如何在两天内设置 flatpickr 时间选择器？答案

【问题标题】：How to set flatpickr Time Picker with limits across two days?如何在两天内设置 flatpickr 时间选择器？
【发布时间】：2019-06-10 16:28:58
【问题描述】：

我正在使用 flatpickr 来输入时间。我想限制从下午 3:00 到凌晨 3:00 的时间输入（所以我想包括下午 4:00、下午 5:00 ... 下午 11:00、下午 12:00、凌晨 1:00。 ..)。

当前代码：

flatpickr({enableTime: true, noCalendar: true, dateFormat: "H:i", minTime: "15:00", maxTime: "3:00"})

我也试过minTime: "15:00", maxTime: "27:00"

但它们都不起作用。 Documentation 的 flatpickr。

【问题讨论】：

标签： javascript flatpickr

【解决方案1】：

遗憾的是，目前无法使用原生 config 和 minTime, maxTime, minDate, maxDate 道具来实现您所描述的行为。（我建议在他们的回购中打开一张票：flatpickr repo）

但是，您可以使用此解决方法：

const instanceOfPickr = flatpickr("#works", {
      onValueUpdate: function(obj, updatedTime) {
        if ((updatedTime > "03:00") && (updatedTime < "15:00")) {
          instanceOfPickr.setDate(new Date("June 10, 2019 15:00:00"));
        }
      },
      enableTime: true,
      noCalendar: true,
      time_24hr: true,
    });

它很笨重，但它可以完成工作。

唯一的问题是 - 如果您在时间设置为 15:00 的小时或分钟上单击 decrease arrow，它将保留在那里。如果您想将 decrease 行为添加到这些箭头以将时间放到 03:00 - 您可以在 DOM 中专门查找它们并将 setDate(new Date("June 10, 2019 03:00:00") 分配给您的 TimePicker 实例。

希望对你有帮助。

【讨论】：