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);
   } 
});

如何限制jqueryui日期范围？

2 个答案: