我正在使用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
。我没有收到错误,但它似乎仍然无能为力。我还尝试删除了原始的日期选择器并制作了一个新的日期选择器。
//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
这样的相对值?我相当确定这是有可能的,但是显然我没有正确的方法。 最佳答案
好像documentation一直都可以解决这个问题。我之前只是忽略了它:
根据这些新信息,我将代码重新整理为:
//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);
现在可以正常工作了!清除所有日期范围输入,然后设置新的范围约束。