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

<input type="text" id="dt1">
<input type="text" id="dt2">

$(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
> setDate
> minDate
> maxDate

我认为他们都非常自我解释,文档可以帮助您了解它们的工作原理.
如果要将第二个日期选择器的日期设置为dt1的日期1天,请执行与此行相同的操作：

startDate.setDate(startDate.getDate() + 30);

但当然要加1天而不是30天.

jQuery UI根据开始日期在范围内选择开始和结束日期

解决方法

猜你在找的jQuery相关文章