Naive UI 的 TimePicker 时间范围限制不生效？

冰杰~ 提问于 2026-03-19 11:50:24 阅读 28

组件

我在用 Naive UI 的 TimePicker 组件，想限制用户只能选 09:00 到 18:00 之间的时间，但设置 :disabled-hours 和 :disabled-minutes 好像没效果，时间还是能随便选。

我试过这样写：

const disabledHours = () => {
  return [...Array(9).keys(), ...Array.from({ length: 6 }, (_, i) => 18 + i + 1)]
}
const disabledMinutes = (hour) => {
  if (hour === 9) return [...Array(30).keys()] // 09:00 起可选，所以前30分钟禁用？
  if (hour === 18) return [...Array.from({ length: 30 }, (_, i) => 30 + i)] // 18:30 后禁用
  return []
}

但结果完全不对，要么全禁了，要么根本不限制。是不是我理解错了这两个函数的用法？

我来解答赞 6 收藏

反馈

1 条解答

Good“尚斌 Lv1

你的问题在于这两个函数的参数没接对。

Naive UI 的 disabled-hours 和 disabled-minutes 都会接收当前选中的小时值作为参数，但你写成了无参函数，所以 hour 实际上是 undefined，条件判断永远不成立。

改一下：

const disabledHours = (hour) => {

  // 禁用 0-8 点和 19-23 点

  const disabled = []

  for (let i = 0; i < 24; i++) {

    if (i < 9 || i > 18) {

      disabled.push(i)

    }

  }

  return disabled

}



const disabledMinutes = (hour) => {

  if (hour === 9) {

    return [...Array(30).keys()] // 禁用 09:00-09:29

  }

  if (hour === 18) {

    return Array.from({ length: 30 }, (_, i) => 30 + i) // 禁用 18:30-18:59

  }

  return []

}

核心就是加上 (hour) 参数接收选中值，然后用这个值去判断禁哪些分钟。

还有个小问题，你原来写 Array.from({ length: 6 }, (_, i) => 18 + i + 1) 会生成 19-24，24 超出了小时范围，改成 5 就对了。

2026-03-19 12:01