JQuery DatePicker - изменяет minDate и maxDate на лету

У меня проблема с jQuery Datepicker. Я могу легко добавить диапазон дат, но я хочу, чтобы диапазон выбора изменялся в зависимости от события, которое выбрал пользователь.

Таким образом, если они выбирают событие №1, они могут выбирать даты только из диапазона дат события # 1.

Я написал небольшую небольшую функцию, которая вызывается всякий раз, когда пользователь выбирает новое событие, но только когда-либо показывает первоначально установленные значения minDate/maxDate.

function datepicker(startDate, endDate) {
  $( "#date" ).datepicker({
    inline: true,
    minDate: new Date(startDate),
    maxDate: new Date(endDate),
    dateFormat: 'dd/mm/yy' 
  });
}

Я попробовал позвонить $('#date').datepicker('remove');, прежде чем вызывать указанную выше функцию, чтобы увидеть, создает ли он новый экземпляр с правильными датами, но он не работает.

Я проверил все данные с помощью инструментов разработчика, и все вызывается и передается правильно. Есть ли что-нибудь, что я могу сделать, чтобы сделать эту работу так, как я хочу?

Ответы

Ответ 1

У вас есть несколько вариантов...

1) Вам нужно вызвать метод destroy() не remove(), поэтому...

$('#date').datepicker('destroy');

Затем вызовите ваш метод для воссоздания объекта datepicker.

2) Вы можете обновить свойство существующего object через

$('#date').datepicker('option', 'minDate', new Date(startDate));
$('#date').datepicker('option', 'maxDate', new Date(endDate));

или...

$('#date').datepicker('option', { minDate: new Date(startDate),
                                  maxDate: new Date(endDate) });

Ответ 2

В зависимости от/на сегодняшний день, вот как я применил ограничение дат, основанное на дате, введенной в другой datepicker. Работает очень хорошо:

function activateDatePickers() {
    $("#aDateFrom").datepicker({
        onClose: function() {
            $("#aDateTo").datepicker(
                    "change",
                    { minDate: new Date($('#aDateFrom').val()) }
            );
        }
    });
    $("#aDateTo").datepicker({
        onClose: function() {
            $("#aDateFrom").datepicker(
                    "change",
                    { maxDate: new Date($('#aDateTo').val()) }
            );
        }
    });
}

Ответ 3

$(document).ready(function() {
$("#aDateFrom").datepicker({
    onSelect: function() {
        //- get date from another datepicker without language dependencies
        var minDate = $('#aDateFrom').datepicker('getDate');
        $("#aDateTo").datepicker("change", { minDate: minDate });
    }
});

$("#aDateTo").datepicker({
    onSelect: function() {
        //- get date from another datepicker without language dependencies
        var maxDate = $('#aDateTo').datepicker('getDate');
        $("#aDateFrom").datepicker("change", { maxDate: maxDate });
    }
});
});

Ответ 4

Я знаю, что вы используете Datepicker, но для некоторых людей, которые используют только дату ввода HTML5, как я, есть пример того, как вы можете сделать то же самое: ссылка JSFiddle

$('#start_date').change(function(){
  var start_date = $(this).val();
  $('#end_date').prop({
    min: start_date
  });
});


/*  prop() method works since jquery 1.6, if you are using a previus version, you can use attr() method.*/