Изменение minDate и maxDate на лету с помощью jQuery DatePicker

Question

У меня есть особая проблема с 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'); перед повторным вызовом вышеупомянутой функции, чтобы увидеть, создает ли она новый экземпляр с правильными датами, но, похоже, он не работает.

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

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

Answer 2

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

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

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

Answer 4

Я изменил минимальное свойство даты даты и времени, используя это

$('#date').data("DateTimePicker").minDate(startDate);

Я надеюсь, что это поможет кому-то!

Answer 5

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

$('#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.*/