jQuery UI根据开始日期在范围内选择开始和结束日期
我正在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
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选项来设置日期。 我使用的其他方法是：
- GETDATE
- 设置日期
- 的minDate
- 的maxDate
我认为他们都非常自我解释，文档可以帮助您了解它们的工作原理。 如果要将第二个日期选择器的日期设置为dt1的日期+ 1天，请执行与此行相同的操作：
startDate.setDate(startDate.getDate() + 30);
但当然要加1天而不是30天。
尝试使用ui onSelect回调而不是.change（）， http： //api.jqueryui.com/datepicker/#option-onSelect
在init上：
var $datepickerStart = $("#datepickerStart"); $datepickerStart.datepicker({ onSelect: function( selectedDate ) { $datepickerStart.datepicker( "option", "minDate", selectedDate ); } });