Rails 7中Flatpickr能否禁用指定时段？求适配方案

Flatpickr 实现时段禁用的方案 #

Flatpickr 默认的 disable 配置只支持日期级别的禁用，但通过启用时间选择并结合自定义逻辑，完全可以实现你要的时段禁用需求：

方法1：通过onChange事件校验选择 #

在你的 Stimulus 控制器里开启时间选择，然后在用户选择时间后校验是否命中禁用时段：

// flatpickr_controller.js
import { Controller } from "@hotwired/stimulus"
import flatpickr from "flatpickr"

export default class extends Controller {
  connect() {
    this._flatpickr = flatpickr(this.element, {
      enableTime: true,
      time_24hr: false, // 按需切换24小时制
      minTime: "9:00 AM", // 可选：限制可选择的最早时间
      maxTime: "6:00 PM", // 可选：限制可选择的最晚时间
      onChange: [this.checkBlockedSlot.bind(this)]
    })
  }

  checkBlockedSlot(selectedDates) {
    const selectedTime = selectedDates[0]
    if (!selectedTime) return

    // 这里可以从后端接口获取已预订的时段，示例用硬编码
    const blockedSlots = [
      { from: new Date("2023-10-10 13:00"), to: new Date("2023-10-10 14:00") },
      // 可添加更多禁用时段
    ]

    const isBlocked = blockedSlots.some(slot => {
      return selectedTime >= slot.from && selectedTime < slot.to
    })

    if (isBlocked) {
      // 清空选择并提示用户
      this._flatpickr.clear()
      alert("该时段已被预订，请选择其他时间")
    }
  }
}

方法2：使用disable的函数动态判断 #

Flatpickr 的 disable 选项支持传入函数，对每个可选时间点进行判断，返回true则禁用该时间：

flatpickr(this.element, {
  enableTime: true,
  disable: [
    function(date) {
      const blockedSlots = [
        { from: new Date("2023-10-10 13:00"), to: new Date("2023-10-10 14:00") }
      ]
      return blockedSlots.some(slot => date >= slot.from && date < slot.to)
    }
  ]
})

适配 Rails 7 的替代库 #

如果觉得 Flatpickr 的自定义逻辑太麻烦，这些库原生支持时段禁用且适配 Rails 7：

• FullCalendar：主打日历视图，支持精确到分钟的时段禁用，可通过 Rails 7 的 importmaps 或 yarn 引入，适合需要完整日历展示的预订场景。
• Tempus Dominus：基于 Bootstrap 的日期时间选择器，原生支持配置禁用时段，Rails 7 中通过 yarn 安装后即可导入使用。
• Vanilla Picker：轻量级原生 JS 选择器，无框架依赖，支持时间选择和自定义禁用规则，适配 Rails 7 的前端生态。

内容的提问来源于stack exchange，提问作者mmatin2017