时间选择器

版本 ^2.6.0

介绍时间选择器组件——当你需要用户选择特定时间时使用。非常适合预约安排、按时间范围筛选，或任何需要精确时间选择的场景。

组件处理了所有复杂性：12/24 小时制、时间间隔、不可用时段、键盘导航，以及完善的本地化。

<flux:time-picker wire:model="appointmentTime" />

输入或按钮触发

可选择按钮触发（打开时间选择下拉菜单），或输入框触发（提供原生时间输入，并可选配下拉增强）：

<flux:time-picker type="button" />
<flux:time-picker type="input" />

如果你想要纯原生体验，输入框变体甚至可通过 :dropdown="false" 完全禁用下拉。

了解触发类型 →

控制时间间隔

使用 interval 属性设置显示时间之间的间隔。默认是 30 分钟，但你可以使用任意数值：

<flux:time-picker interval="15" />  <!-- 15 分钟间隔 -->
<flux:time-picker interval="60" />  <!-- 每小时 -->

最小值、最大值与不可用时间

使用 min 和 max 边界限制可选时间——非常适合营业时间或基于时间的约束：

<flux:time-picker min="09:00" max="17:00" />

还提供了便捷的 “now” 简写：

<flux:time-picker min="now" />  <!-- 仅未来时间 -->

需要屏蔽特定时间或时间段？使用 unavailable 属性禁用已被预约或不可用的时段：

<flux:time-picker unavailable="03:00,04:00,05:30-07:29" />

查看更多约束选项 →

多选时间

使用 multiple 属性允许用户选择多个时间：

<flux:time-picker multiple wire:model="availableTimes" />

自动本地化

时间选择器会自动使用浏览器的区域设置确定时间格式，但你可以覆盖它：

<flux:time-picker time-format="12-hour" />
<flux:time-picker time-format="24-hour" />
<flux:time-picker locale="ja-JP" />

细节

与 Flux 中的每个组件一样，我们面面俱到：

友好键盘操作：使用方向键完全导航，Enter 选择，Escape 关闭。屏幕阅读器会播报所有状态变化和可用选项。

智能默认：选择器会打开到当前已选时间；若未选择，则打开到当前时间。必要时可通过 open-to 覆盖。

无缝集成：与 label、description、badge 等标准字段属性配合，实现自动字段包装。

浏览时间选择器文档 →