更改 Bootstrap 日期选择器日期范围的可选范围

Question

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

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

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

但是稍后更新这些默认范围似乎并没有。假设我想限制用户只 selecting 从圣诞节到元旦的日期。我相信正确的做法是这样的（至少根据 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
});

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

我的 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);

现在一切正常！清除所有日期范围输入，然后设置新的范围限制。

更改 Bootstrap 日期选择器日期范围的可选范围

Change selectable range for a Bootstrap Datepicker date-range

javascript

jquery

datepicker

twitter-bootstrap

bootstrap-datepicker