jquery-ui - 如何限制 jqueryui 日期范围？

Question

我有两个日期选择器#from，并且#to像往常一样，现在我需要做的是确保在两者之间选择的日期范围始终在彼此的 3 个月内。所以基本上，在选择一个选择器时，我需要为另一个相对于所选日期设置 minDate/maxDate 选项，但我不知道找到这些相对日期的最佳方法是什么。有什么建议么？

Answer 1

我创建了一个jsfiddle。天数之间的范围设置为 3 天。您可以根据您的要求进行编辑

$(document).ready(function () {
$("#startDatePicker").datepicker({
    dateFormat: 'yy-mm-dd',
    onSelect: function (date) {
        if ($('#endDatePicker').val() == "") {

            var selectedDate = new Date(date);
            var secsPerDay = 86400000;
            var endDate = new Date(selectedDate.getTime() + 2 * secsPerDay);
            alert(endDate);
            $("#endDatePicker").datepicker("option", "minDate", selectedDate);
            $("#endDatePicker").datepicker("option", "maxDate", endDate);
        }
    }

});

$("#endDatePicker").datepicker({
    dateFormat: 'yy-mm-dd',
    changeMonth: true,
    onSelect: function (date) {
        if ($('#startDatePicker').val() == "") {
            var selectedDate = new Date(date);
            var secsPerDay = 86400000;
            var startDate = new Date(selectedDate.getTime() - 5 * secsPerDay);

            $("#startDatePicker").datepicker("option", "minDate", startDate);
            $("#startDatePicker").datepicker("option", "maxDate", selectedDate);
        }
    }

});
});

和 HTML

<p>Start Date:
<input type="text" id="startDatePicker"/>
</p>
<p>End Date:
    <input type="text" id="endDatePicker"/>
</p>

Answer 2

或者，您可以这样做：fiddle
我想这两种方式都是有效的。

.js

$("#startDatePicker").datepicker({ 
    dateFormat: 'yy-mm-dd',
    onSelect: function(dateText,dateObj){            
        var dateObject = $(this).datepicker("getDate");
        dateObject.setMonth(dateObj.currentMonth+3);
        $("#endDatePicker").datepicker( "option", "maxDate",dateObject);  
    }
});
$("#endDatePicker").datepicker({ 
    dateFormat: 'yy-mm-dd',
    changeMonth: true,
        onSelect: function(dateText,dateObj){
            var dateObject = $(this).datepicker("getDate");
            dateObject.setMonth(dateObj.currentMonth-3);
            $("#startDatePicker").datepicker( "option", "minDate",dateObject);
   } 
});