javascript - Change selectable range for a Bootstrap Datepicker date-range - Stack Overflow

admin管理员组

文章数量:1433154

I'm using eternicode's Bootstrap Datepicker, and trying to make the selectable date ranges adjust based on some date strings that are generated from other user input on the page. It's important to note that I'm using the date-range tool that allows users to select a start and end date that are associated with each other.

Instantiating the date-range datepickers with default ranges works fine like this:

$('#newEventForm').find('.input-daterange').datepicker({
    autoclose: true,
    format: "d M yyyy",
    startDate: "1 Jan 2010", //This works.
    endDate: "31 Dec 2099", //So does this.
    startView: 2,
    clearBtn: true
}); 

However updating those default ranges later on doesn't seem to. Let's assume I wanted to restrict the user to selecting only dates from Christmas to New Year's Day. I believe the correct way of doing it is this (at least according to documentation):

$('#newEventForm').find('.input-daterange').datepicker('setStartDate','25 Dec 2015');
$('#newEventForm').find('.input-daterange').datepicker('setStartDate','1 Jan 2016');

While this does not present any errors, it also seems to have no effect.

I have also tried with UTC strings like 2015-12-25T05:00:00.000Z and new Date(2015-12-25T05:00:00.000Z) instead of the formatted strings i.e. 25 Dec 2015. I don't get errors but it still seems to do nothing.

I also attempted to remove the original datepicker and make a new one.

//Remove the existing datepicker
$('#newEventForm').find('.input-daterange').datepicker('remove');
//clear the input fields that make up this date range datepicker
$("#eventStartDate").val("");
$("#eventEndDate").val("");
//Build a new datepicker.
$('#newEventForm').find('.input-daterange').datepicker({
    autoclose: true,
    format: "d M yyyy",
    startDate: newStartDate,
    endDate: newEndDate,
    startView: 2,
    clearBtn: true
});

This actually does work at first, however after running this code one or two times the datepickers start to exhibit some bizarre behavior. They stop filling their input fields with the selected dates, or glitch and place the date in the wrong input field. Suffice to say there appears to be some major issues that prevent this last way of being a viable option. Not to mention that it seems like a really sloppy way of acplishing a date range change.

Is there something that I'm doing wrong with the setStartDate/setEndDate code? Maybe these just refuse to accept the sort of date strings I'm trying to use and instead want relative values like -1d? I'm fairly sure this should be possible, but clearly I don't have the right approach yet.

I'm using eternicode's Bootstrap Datepicker, and trying to make the selectable date ranges adjust based on some date strings that are generated from other user input on the page. It's important to note that I'm using the date-range tool that allows users to select a start and end date that are associated with each other.

Instantiating the date-range datepickers with default ranges works fine like this:

$('#newEventForm').find('.input-daterange').datepicker({
    autoclose: true,
    format: "d M yyyy",
    startDate: "1 Jan 2010", //This works.
    endDate: "31 Dec 2099", //So does this.
    startView: 2,
    clearBtn: true
}); 

However updating those default ranges later on doesn't seem to. Let's assume I wanted to restrict the user to selecting only dates from Christmas to New Year's Day. I believe the correct way of doing it is this (at least according to documentation):

$('#newEventForm').find('.input-daterange').datepicker('setStartDate','25 Dec 2015');
$('#newEventForm').find('.input-daterange').datepicker('setStartDate','1 Jan 2016');

While this does not present any errors, it also seems to have no effect.

I have also tried with UTC strings like 2015-12-25T05:00:00.000Z and new Date(2015-12-25T05:00:00.000Z) instead of the formatted strings i.e. 25 Dec 2015. I don't get errors but it still seems to do nothing.

I also attempted to remove the original datepicker and make a new one.

//Remove the existing datepicker
$('#newEventForm').find('.input-daterange').datepicker('remove');
//clear the input fields that make up this date range datepicker
$("#eventStartDate").val("");
$("#eventEndDate").val("");
//Build a new datepicker.
$('#newEventForm').find('.input-daterange').datepicker({
    autoclose: true,
    format: "d M yyyy",
    startDate: newStartDate,
    endDate: newEndDate,
    startView: 2,
    clearBtn: true
});

This actually does work at first, however after running this code one or two times the datepickers start to exhibit some bizarre behavior. They stop filling their input fields with the selected dates, or glitch and place the date in the wrong input field. Suffice to say there appears to be some major issues that prevent this last way of being a viable option. Not to mention that it seems like a really sloppy way of acplishing a date range change.

Is there something that I'm doing wrong with the setStartDate/setEndDate code? Maybe these just refuse to accept the sort of date strings I'm trying to use and instead want relative values like -1d? I'm fairly sure this should be possible, but clearly I don't have the right approach yet.

• javascript
• jquery
• twitter-bootstrap
• datepicker
• bootstrap-datepicker

Share Improve this question Follow edited Sep 3, 2015 at 18:33 Ectropy asked Sep 3, 2015 at 18:21 EctropyEctropy 1,54144 gold badges2222 silver badges3737 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Looks like the documentation had the answer to this problem all along. I had just overlooked it before:

Note that that input-daterange itself does not implement the datepicker methods. Methods should be directly called to the inputs. For example:

$(‘.input-daterange input’).each(function (){
    $(this).datepicker(“clearDates”);
});

Based on this new information, I reworked my code to:

//Clear what's in the datepicker, if anything.
$('#eventStartDate').datepicker('clearDates');      
$('#eventEndDate').datepicker('clearDates');

//Note, the variables Sdate and Edate are UTC dates like 2015-12-25T05:00:00.000Z
//Set start and end dates for the first input in this date-range
$('#eventStartDate').datepicker('setStartDate',Sdate);
$('#eventStartDate').datepicker('setEndDate',Edate);

//Set start and end dates for the second input in this date-range       
$('#eventEndDate').datepicker('setStartDate',Sdate);
$('#eventEndDate').datepicker('setEndDate',Edate);

It works as expected now! All date-range inputs are cleared, then the new range constraint is set.

本文标签： javascriptChange selectable range for a Bootstrap Datepicker daterangeStack Overflow