我正在 jQuery ui 中构建一个日期选择器。我想要做的是设置一个范围,这样当他们选择第一个日期时,就会出现第二个日期并给出 30 天的窗口。我尝试了这个,但它不起作用(它允许用户选择从今天算起的 30 天,而不是从开始日期算起的 30 天):
var pickDate;
$( "#datepickerEnd" ).hide();
$( "#datepickerStart" ).datepicker();
$( "#datepickerStart" ).change(function(){
var pickDate = $( "#datepickerStart" ).val();
$( "#datepickerEnd" ).datepicker({ minDate: pickDate, maxDate: +30 });
$( "#datepickerEnd" ).show();
})
我遇到的另一个问题是,当我更改 datepickerStart 时,它只会设置开始范围一次,但不是每次更改时都会设置。我必须刷新页面才能锁定新的开始日期。
最佳答案
检查这个 jsfiddle在这里。这是您的问题的一个有效示例。
HTML
<input type="text" id="dt1">
<input type="text" id="dt2">
JS
$(document).ready(function () {
$("#dt1").datepicker({
dateFormat: "dd-M-yy",
minDate: 0,
onSelect: function () {
var dt2 = $('#dt2');
var startDate = $(this).datepicker('getDate');
//add 30 days to selected date
startDate.setDate(startDate.getDate() + 30);
var minDate = $(this).datepicker('getDate');
var dt2Date = dt2.datepicker('getDate');
//difference in days. 86400 seconds in day, 1000 ms in second
var dateDiff = (dt2Date - minDate)/(86400 * 1000);
//dt2 not set or dt1 date is greater than dt2 date
if (dt2Date == null || dateDiff < 0) {
dt2.datepicker('setDate', minDate);
}
//dt1 date is 30 days under dt2 date
else if (dateDiff > 30){
dt2.datepicker('setDate', startDate);
}
//sets dt2 maxDate to the last day of 30 days window
dt2.datepicker('option', 'maxDate', startDate);
//first day which can be selected in dt2 is selected date in dt1
dt2.datepicker('option', 'minDate', minDate);
}
});
$('#dt2').datepicker({
dateFormat: "dd-M-yy",
minDate: 0
});
});
正如 soderslatt 已经提到的,使用 onSelect设置日期的选项。 我使用的其他方法有:
我认为它们都是非常不言自明的,并且文档可以帮助您理解它们是如何工作的。 如果要将第二个日期选择器的日期设置为 dt1 的日期 + 1 天,请执行与此行相同的操作:
startDate.setDate(startDate.getDate() + 30);
但是当然要添加 1 天而不是 30 天。
关于jQuery UI 根据开始日期选择范围内的开始和结束日期,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17016598/