javascript - 如何在两天内设置 flatpickr 时间选择器的限制?

标签 javascript flatpickr

我正在使用 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。

最佳答案

遗憾的是,目前无法实现您使用 native configminTime、maxTime、minDate、maxDate 属性描述的行为。 (我建议在他们的 repo 中打开一张票: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 实例。

希望对您有所帮助。

关于javascript - 如何在两天内设置 flatpickr 时间选择器的限制?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56530158/

相关文章:

javascript - 与字典元素 typescript 进行比较

javascript - 使用 JavaScript 查询 SharePoint 列表

Angular Flatpickr 将最后选择的日期绑定(bind)到模型而不是当前选择的日期

javascript - 如何安装 Flatpickr 插件

javascript - Flatpickr onDayCreate 添加类

javascript - 无法让 iframe 工作

javascript - event.preventDefault 和 stopPropagation 在拖/放事件中未按预期工作

javascript - 使用模板事件监听器删除 Meteor.js 集合时出现问题

angular - angularx - flatpickr 中禁用弹出月历的所有日期