javascript - 更改 Bootstrap Datepicker 日期范围的可选范围

Question

我正在使用 eternicode 的 Bootstrap Datepicker，并尝试根据页面上其他用户输入生成的一些日期字符串来调整可选择的日期范围。请务必注意，我使用的是 date-range允许用户选择相互关联的开始和结束日期的工具。

使用默认范围实例化日期范围日期选择器可以像这样正常工作:

$('#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
}); 

然而，稍后更新这些默认范围似乎并没有。假设我想限制用户只能选择从圣诞节到元旦的日期。我相信正确的做法是这样的(至少根据 documentation ):

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

虽然这不会出现任何错误，但似乎也没有效果。

我也尝试过使用像 2015-12-25T05:00:00.000Z 和 new Date(2015-12-25T05:00:00.000Z) 这样的 UTC 字符串而不是格式化字符串，即 25 Dec 2015。我没有收到错误，但它似乎仍然什么也没做。

我还尝试删除原来的日期选择器并制作一个新的。

//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
});

一开始这确实有效，但是在运行此代码一两次后，日期选择器开始表现出一些奇怪的行为。他们停止用选定的日期填充他们的输入字段，或者出现故障并将日期放在错误的输入字段中。可以说似乎有一些主要问题阻碍了最后一种方式成为可行的选择。更不用说这似乎是一种非常草率的完成日期范围更改的方法。

setStartDate/setEndDate 代码是不是我做错了什么？也许这些只是拒绝接受我尝试使用的那种日期字符串，而是想要像 -1d 这样的相对值？我相当确定这应该是可能的，但显然我还没有正确的方法。

Answer 1

看起来像 documentation一直都有这个问题的答案。我之前只是忽略了它:

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”);
});

根据这些新信息，我重新编写了我的代码:

//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);

它现在按预期工作了!清除所有日期范围输入，然后设置新的范围限制。