jquery-ui - jqueryuiの日付範囲を制限するには?

Question

私は 2 つの日付ピッカーを持って#fromおり#to、いつものように、2 つの間で選択された日付範囲が常に互いに 3 か月以内であることを確認する必要があります。したがって、基本的に、ピッカーの 1 つを選択するときに、選択した日付を基準にして他のピッカーに minDate/maxDate オプションを設定する必要がありますが、これらの相対的な日付を見つける最良の方法はわかりません。助言がありますか？

Answer 1

あるいは、次のようにすることもできます: 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);
   } 
});

Answer 2

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>