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, она будет устанавливать только начальный диапазон один раз, но не каждый раз, когда я его меняю. Я должен обновить страницу, чтобы заблокировать новую дату начала.

Ответы

Ответ 1

Здесь jsfiddl e. Это рабочий пример вашей проблемы.

HTML

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

JS

$(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');
            //minDate of dt2 datepicker = dt1 selected day
            dt2.datepicker('setDate', minDate);
            //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);
            //same for dt1
            $(this).datepicker('option', 'minDate', minDate);
        }
    });
    $('#dt2').datepicker({
        dateFormat: "dd-M-yy"
    });
});

Как уже упоминалось в soderslatt, используйте параметр onSelec t для установки дат. Другие методы, которые я использовал:

Я думаю, что они все сами объясняют, и документация помогает вам понять, как они работают. Если вы хотите установить дату второго datepicker на дату dt1 + 1 день, сделайте то же самое, что и в этой строке:

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

Но, конечно, добавьте 1 день, а не 30.

Ответ 2

Попробуйте использовать ui onSelect callback вместо .change(), http://api.jqueryui.com/datepicker/#option-onSelect

в init:

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