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

Posted 2023-05-07

【中文标题】更改 Bootstrap Datepicker 日期范围的可选范围

【英文标题】：Change selectable range for a Bootstrap Datepicker date-range

【发布时间】：2015-11-29 17:08:12

【问题描述】：

我正在使用 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 这样的相对值？我相当肯定这应该是可能的，但显然我还没有正确的方法。

【参考方案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);

现在可以正常工作了！清除所有日期范围输入，然后设置新的范围约束。