Блог

Главная - Вопросы по программированию - Календари с двойным подбором даты с автофокусом и минимальной датой

Календари с двойным подбором даты с автофокусом и минимальной датой

#jquery #jquery-ui

#jquery #jquery-пользовательский интерфейс

Вопрос:

Я использую 2 jquery datepickers, один для отправки и один для возврата.

Я хочу, чтобы 2-й открывался автоматически, и для минимальной даты было установлено значение, выбранное в первом календаре 1 день (т. е. первой календарной датой было 21 мая, для 2-го календаря минимальная дата должна быть установлена на 22 мая).).

На данный момент я могу заставить его автоматически заполнять дату по умолчанию во втором календаре датой, выбранной в первом.

 $( "#dep_date" ).datepicker({dateFormat: 'dd/mm/yy', numberOfMonths: 3, minDate:  2, onSelect: function(dateText, inst){$("#ret_date").val(dateText);}});
$( "#ret_date" ).datepicker({dateFormat: 'dd/mm/yy', numberOfMonths: 3});

Ответ №1:

Как насчет чего-то подобного:

 $("#dep_date").datepicker({
    dateFormat: 'dd/mm/yy',
    numberOfMonths: 3,
    minDate:  2,
    onSelect: function(dateText, inst) {
        var date = $.datepicker.parseDate('dd/mm/yy', dateText);
        date.setDate(date.getDate()   1);

        var $ret_date = $("#ret_date");

        $ret_date.datepicker("option", "minDate", date);            
        $ret_date.datepicker("setDate", date);

        $(this).datepicker("hide");

        $ret_date.datepicker("show");
    }
});

$("#ret_date").datepicker({
    dateFormat: 'dd/mm/yy',
    numberOfMonths: 3
});

Подробные сведения:

  • Использует setDate метод на datepicker
  • Устанавливает minDate параметр на datepicker
  • Вызывает show метод на следующем datepicker

Вот рабочий пример:http://jsfiddle.net/4tay7

Комментарии:

1. Да, это сработало идеально. Я пытался использовать $ ret_date.datepicker («minDate», дата), и это не срабатывало, поэтому, я думаю, мне нужна была опция. Плюс я пытался использовать события фокусировки.

2. @dawgbone: Рад помочь! Пожалуйста, примите ответ, если он сработал для вас.

3. готово! Одна вещь, которую я заметил, заключалась в том, что если у вас есть $ret_date.datepicker("setDate", date); раньше $ret_date.datepicker("option", "minDate", date); , и вы выбираете будущую дату (т. Е. через месяц), а затем меняете ее на дату, более раннюю, чем ваш первый выбор (скажем, на следующей неделе), 2-й календарь не будет использовать новую дату по умолчанию, потому что он использует minDate из вашего первого выбора. Так что просто измените порядок на $ret_date.datepicker("option", "minDate", date); $ret_date.datepicker("setDate", date); , и он отлично работает.