同一页面中的 Flatpickr 多个日期选择器

Question

我在 symfony 中实现了一个站点，我使用 flatpickr 库来处理 select 日期。这就是现在的样子:

datepicker

所以我有 2 个使用 flatpickr 的日期选择器，它允许我 select 一个带有时间的出发日期和一个带有时间的返回日期。我的问题是，当我 select 第一次约会时，flatpickr 很好地显示了时间 selection 但是当我继续第二个日期选择器时，我不能 select 时间。

datepicker 1

datepicker 2

我希望我可以 select 在 2 个输入中输入日期和时间。

这是我的 2 个输入的 JS 代码：

  var departure = $('#quick_booking_departure');
  var arrival = $('#quick_booking_arrival');

  departure.flatpickr({
    enableTime: true,
    dateFormat: "Y-m-d H:i",
    position: "above",
    disableMobile: true,
    locale: "fr",
    minDate: "today",
    onChange: function (selectedDates, dateStr, instance) {
      arrival.flatpickr({
        minDate: dateStr
      });
      departure.removeAttr('readonly');
      arrival.removeAttr('readonly');
    }
  });

  arrival.flatpickr({
    enableTime: true,
    dateFormat: "Y-m-d H:i",
    position: "above",
    disableMobile: true,
    locale: "fr",
    minDate: "today",
    onChange: function (selectedDates, dateStr, instance) {
      departure.flatpickr({
        minDate: 'today'
      });
      departure.removeAttr('readonly');
      arrival.removeAttr('readonly');
    }
  });

感谢您的帮助。

Answer 1

看起来你的 onChange 函数是添加 enableTime: true 允许时间选择的罪魁祸首：

onChange: function(selectedDates, dateStr, instance) {
    arrival.flatpickr({
      enableTime: true,
      minDate: dateStr
    });
    departure.removeAttr('readonly');
    arrival.removeAttr('readonly');
  }

但仔细观察，当您的一个选择器发生变化时，您正在完全重新初始化另一个。因此，您最初定义的所有选项都将恢复为默认值，除了您重新定义的选项 minDate

同一页面中的 Flatpickr 多个日期选择器

Flatpickr multiple datepicker in same page

datepicker

flatpickr