Как открыть второй пользовательский интерфейс Datepicker при закрытии первого

Я пытаюсь добавить некоторые функции в форму с помощью Datepicker пользовательского интерфейса JQuery.

Когда пользователь выбирает дату прибытия (onSelect), должно произойти несколько вещей:

  1. Обновить дату отправления на 3 дня после даты прибытия (теперь это работает :))
  2. Разделите дату отъезда на 3 части и добавьте каждую часть в поле ввода (см. пример даты прибытия в Fiddle)
  3. Когда средство выбора даты прибытия закрывается (onClose), средство выбора даты отправления должно открыться автоматически, по умолчанию используется дата, выбранная в пункте 1 (пример: http://www.kayak.es)

Мне удалось заставить работать пункт 1, но я немного запутался с другими функциями. Если кто-нибудь может показать мне, как это сделать, или направить меня на правильный путь, это было бы действительно здорово! Я еще новичок, но быстро учусь.

Вот скрипка того, что у меня есть сейчас: http://jsfiddle.net/mattvic/B6Kax/13/


javascript datepicker jquery jquery-ui jquery-ui-datepicker
person Mattvic    schedule 26.06.2011    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Разделите дату отъезда на 3 части и добавьте каждую часть в поле ввода

Похоже, у вас уже есть код, написанный для этого в обработчике onSelect целевого средства выбора даты. К сожалению, похоже, что setDate не запускает это событие, и вы не можете запустить его вручную. Я бы порекомендовал разбить этот код на отдельную функцию, которую вы можете вызывать из обоих мест:

function splitDepartureDate(dateText) {
    var depSplit = dateText.split("-", 3);
    $('#alt-vertrek-d').val(depSplit[0]);
    $('#alt-vertrek-m').val(depSplit[1]);
    $('#alt-vertrek-y').val(depSplit[2]);
}

Затем измените обработчик даты отъезда onSelect, чтобы он указывал на эту функцию:

$('#vertrek').datepicker({

    // Prevent selecting departure date before arrival:
    beforeShow: customRange,
    onSelect: splitDepartureDate
});

Наконец, вызовите эту функцию из обработчика событий onSelect вашего прибытия:

/* snip: */

// Populate departure date field 
var nextDayDate = $('#aankomst').datepicker('getDate', '+3d');
nextDayDate.setDate(nextDayDate.getDate() + 3);
$('#vertrek').datepicker('setDate', nextDayDate);

// Manually call splitDepartureDate
splitDepartureDate($("#vertrek").val());

Когда средство выбора даты прибытия закрывается (onClose), средство выбора даты отправления должно открываться автоматически, по умолчанию это дата, выбранная в пункте 1

Это всего лишь вопрос использования обработчика событий onClose:

onClose: function() {
    $("#vertrek").datepicker("show");
}

Вот ваш обновленный пример: http://jsfiddle.net/zXMke/

person Andrew Whitaker    schedule 26.06.2011
comment
Большое спасибо Андрей, это было именно то, что я искал. - person Mattvic; 26.06.2011
comment
@Mattvic: Нет проблем. Интересно/к сожалению, метод setDate не запускает onSelect... - person Andrew Whitaker; 26.06.2011
comment
Возникла проблема с показом при закрытии. В скрипке попробуйте выбрать диапазон следующего месяца во втором календаре. Обратите внимание, что вам нужно дважды щелкнуть месяц, прежде чем он переключится. Я хотел бы знать, как это исправить! - person Tim; 19.06.2015
comment
Обертывание вызова шоу в тайм-аут, кажется, решает проблему следующего месяца. Я точно не знаю, почему. - person Tim; 19.06.2015

arrow_upward
1
arrow_downward

Отвечая на вопрос заголовка:

 $("#firsDate").datepicker('option',"onClose", function() { $( "#secondDate" ).datepicker( "show" ); });

Источник :

http://api.jqueryui.com/datepicker/#method-show

http://api.jqueryui.com/datepicker/#option-onClose

Я рекомендую использовать onSelect вместо события onClose, чтобы убедиться, что 1-я дата была выбрана до открытия второго средства выбора даты.

person Thomas Allier    schedule 05.12.2012

arrow_upward
0
arrow_downward

пункт 3 ответ:

$(function() {
  $( '#aankomst' ).datepicker({
    onClose: function(dateText, instance) {
      $( '#vertrek' ).datepicker('show');
     },      
    onSelect: function( dateText, instance ) {

      // Split arrival date in 3 input fields                        
      var arrSplit = dateText.split("-");
        $( '#alt-aankomst-d' ).val(arrSplit[0]);
        $( '#alt-aankomst-m' ).val(arrSplit[1]);
        $( '#alt-aankomst-y' ).val(arrSplit[2]);

       // Populate departure date field
       var nextDayDate = $( '#aankomst' ).datepicker('getDate', '+3d');
         nextDayDate.setDate( nextDayDate.getDate() + 3 );
           $( '#vertrek' ).datepicker( 'setDate', nextDayDate );
           }                
        });
});

у вас уже есть решение для пункта 2?

Здоровья, папа

person whosrdaddy    schedule 26.06.2011