jQuery Datepicker: текстовые поля прибытия и отправления?

Question

Прошу прощения, если это дубликат вопрос, но это довольно сложно возиться со всеми датчиками запросы ..

Я в основном стремлюсь реализовать это:

Я не очень знаком с использованием средства выбора даты, кроме тривиальных настроек. Кто-нибудь должен был реализовать это раньше, и если да, то как вы настроили его для обработки обоих текстовых полей прибытия / отправления?

Разные вопросы:

• Вам нужно было разделять экземпляры средства выбора даты?
• Есть какие-то странные ошибки? Или это просто с опциями конфигурации?

Примечания по функциональности:

• По умолчанию текстовые поля будут пустыми.
• Если вы нажмете на прибытие, календарь всплывет
• После выбора даты прибытия из календаря необходимо автоматически сфокусироваться на отправлении, чтобы календарь оставался на месте.
• Календарь должен исчезнуть, если вы нажмете

Буду признателен за любую информацию, вам не обязательно предоставлять мне полностью рабочую демонстрацию или что-то в этом роде.

Answer 1

Вы могли бы сделать это, используя my datepicker , хотя для этого потребовалось бы дополнительное кодирование с вашей стороны.

Чтобы дать вам несколько советов:

• Возможно, вам понадобится связать сборщики вместе, чтобы после выбора даты прибытия дата отправления должна была быть позже (см. демонстрация начальной и конечной даты ).
• Вы захотитепередать closeOnSelect: false первому средству выбора даты и прослушать событие dateSelected (вышеприведенная демонстрация начала и конца также прослушивает событие dateSelected - в вашем случае вы захотите вызвать dpDisplay на втором входе после выбора первого входа.
• Похоже, вы хотите видеть два месяца одновременно, поэтому вам нужно будет использовать datePickerMultiMonth Плагин расширения.

Надеюсь, это поможет, спросите, не вызывает ли это каких-либо дополнительных вопросов ...

Answer 2

Мне не пришлось реализовывать ситуацию, которую вы описываете, но я использовал jQueryUI datepicker в нескольких проектах, и его довольно просто использовать. Единственная проблема, с которой я столкнулся, заключается в том, что тема, как правило, делает указатель даты немного больше, чем я бы предпочел (так что я должен придерживаться этого стиля). Но его функциональность в значительной степени работает так, как рекламируется.

Что касается вашего сценария, я собрал быструю демонстрацию jsfiddle здесь . Я собрал это быстро, но я думаю, что это удовлетворяет большинству ваших требований. Единственное, что меня не устраивает, так это то, что между выбором первой даты, смещением фокуса во второе текстовое поле и повторным отображением средства выбора даты снова возникает мерцание. Я все еще смотрю на это, но я не смог предотвратить попытки средства выбора даты закрыться, когда выбрана первая дата.

Не было много кода, чтобы заставить его работать:

$(function() {
    $('.tripDate').datepicker({
        numberOfMonths: 2,
        onSelect: function(dateText, inst) {
            if($(this).attr("id")==="datepicker_arrive") {
            $('#datepicker_depart').focus();
                $(inst).datepicker("show");
            }
        }
    });

});​

Я назначил класс для текстовых полей даты прибытия и отъезда. Когда дата выбрана, запускается onSelect, и, если текущее текстовое поле является датой прибытия ($(this)), тогда смещается фокус на текстовое поле даты отъезда и снова отображается средство выбора даты. (Это то, где я не могу обойтись без повторного показа средства выбора даты.)

Я думаю, что есть только один экземпляр средства выбора даты, хотя есть два текстовых поля. Средство выбора даты знает о выбранной дате в каждом текстовом поле и соответственно выделит эту дату.

В целом, я думаю, это направит вас в правильном направлении. Дайте мне знать, если есть другие вопросы, и я обновлю свой ответ соответственно.

Надеюсь, это поможет!