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

【问题标题】：jQuery UI Picking a start and end date within range based on start datejQuery UI 根据开始日期在范围内选择开始和结束日期
【发布时间】：2013-06-10 03:41:17
【问题描述】：

我正在 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 时，它只会设置一次开始范围，但不是每次更改时都设置。我必须刷新页面才能锁定新的开始日期。

【问题讨论】：

标签： jquery jquery-ui jquery-ui-datepicker

【解决方案1】：

在此处查看 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 选项来设置日期。我使用的其他方法是：

我认为它们都是不言自明的，文档可以帮助您了解它们的工作原理。如果要将第二个 datepicker 的日期设置为 dt1 的日期 + 1 天，请执行以下操作：

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

当然要加 1 天，而不是 30 天。

【讨论】：

【解决方案2】：

尝试使用 ui onSelect 回调而不是 .change()，http://api.jqueryui.com/datepicker/#option-onSelect

在初始化时：

var $datepickerStart = $("#datepickerStart");
$datepickerStart.datepicker({
    onSelect: function( selectedDate ) {
        $datepickerStart.datepicker( "option", "minDate", selectedDate );
    }
});

【讨论】：

【解决方案3】：

$("#start_date").datepicker().on('changeDate', function(selected){
        startDate = new Date(selected.date.valueOf());
        $('#end_date').datepicker('setStartDate', startDate);
    });  

    $("#end_date").datepicker().on('changeDate', function(selected){
        startDate = new Date(selected.date.valueOf());
        $('#start_date').datepicker('setEndDate', startDate);
    });

【讨论】：