使用 jQuery 1.9.1 和 jQuery-ui 1.10.3。我有一个页面,上面有 2 个日期选择器。它们将用作从 SQL 表中选择的过滤器。我正在阅读一个表格行,其中包含表格上的日期min
和max
日期。
datepicker1
是开始日期,datepicker2
是结束日期。使用上述min
及max
以上,日历应datepicker1
以该日期作为默认日期开始,并datepicker2
应具有max
最近的可选日期。这两个日期是我日历上可选日期的艰难开始和结束。尽管没有在任一日期的输入框中设置日期。
我需要做的是,一旦用户做出选择(在任一datepicker
控件中),datepicker
根据该选择对另一个强制执行规则,但前提是另一个datepicker
尚未被选择。
一旦从一个日期中选择了一个日期,另一个(未选择)datepicker
将具有一个从所选日期开始的 14 天的预定窗口(>= 如果datepicker1
首先选择,<= 如果datepicker2
首先选择)作为其max
(或min
)日期。例如:
页面加载,从查询返回 2012-12-10 的 minDate 和 2013-10-22 的 maxDate。
datepicker1
具有 12/10 日期,因为它是“开始”(可以选择的最远一天)。datepicker2
将 10/22/2013 日期作为其“结束”(可以选择的最新日期)。用户单击日历控件
datepicker1
并选择 2013-02-14。现在,
datepicker2
将重新计算其新的 maxDate,即 2013-02-14 之后的 14 天。然后,用户可以选择 >= 2013-02-14 到 2013-02-28 的任何日期作为结束日期。
datepicker2
如果先选择,则过程将反转。
每个日期选择器上的选项对于两者来说几乎相同:
$(function(){
$("#datepicker1").datepicker({
dateFormat: "yy-mm-dd",
dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
changeMonth: true,
changeYear: true,
buttonImage: "calendar-blue.png",
buttonImageOnly: true,
buttonText: "Choose Start Date",
showOn: "both",
numberOfMonths: 1,
beforeShow: function(input, inst) {
$(".ui-datepicker").addClass("resizeDP");
},
onClose: function(selectedDate) {
$(".ui-datepicker").removeClass("resizeDP");
}
});
});
加载页面时,我可以在日历上强制执行日期max
和min
日期,但不能在选择“新”14 天时应用它。我尝试了几种不同的方法(主要是在 中onClose
),但无法使它们中的任何一个起作用。