Question

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

使用默认范围实例化日期范围的datepickers可以正常工作：

$('#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。我没有得到错误，但它似乎仍然无能为力。

我还尝试删除原始的datepicker并创建一个新的。

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

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

我在使用setStartDate / setEndDate代码时遇到了什么问题吗？也许这些只是拒绝接受我试图使用的日期字符串，而是想要-1d之类的相对值？我很确定这应该是可能的，但显然我还没有正确的方法。

Answer 1

看起来documentation一直有这个问题的答案。我之前忽略了它：

请注意，input-daterange本身不实现datepicker方法。方法应直接调用输入。例如：
$(‘.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 Datepicker日期范围

1 个答案: