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

【问题标题】：Flatpickr multiple datepicker in same pageFlatpickr 同一页面中的多个日期选择器
【发布时间】：2019-09-16 08:13:12
【问题描述】：

我在 symfony 中实现了一个站点，并使用 flatpickr 库来选择日期。这就是现在的样子：

所以我有 2 个使用 flatpickr 的日期选择器，它允许我选择带时间的出发日期和带时间的日期。我的问题，当我选择第一个日期时，flatpickr 会很好地显示时间选择，但是当我继续第二个日期选择器时，我无法选择时间。

我希望我可以在 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');
    }
  });

感谢您的帮助。

【问题讨论】：

标签： datepicker flatpickr

【解决方案1】：

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

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

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

【讨论】：