允许用户选择特定时间来安排事件或设置约会。非常适合基于时间的过滤和精确调度。
<flux:time-picker /><flux:time-picker value="11:30" /><flux:time-picker wire:model="time" />将时间选择器附加到时间输入框以实现更精确的时间选择控制。
<flux:time-picker type="input" /><flux:time-picker type="input" :dropdown="false" />默认情况下，时间选择器将使用浏览器的区域设置来确定时间格式。
您可以通过将 time-format 属性设置为 12-hour 或 24-hour 来覆盖此行为。
<flux:time-picker time-format="12-hour" /><flux:time-picker time-format="24-hour" />通过设置最小和最大边界来限制可选择的时间。
<flux:time-picker min="09:00" max="17:00" /><!-- Prevent selection before now... --><flux:time-picker min="now" /><!-- Prevent selection after now... --><flux:time-picker max="now" />禁用特定时间被选中。适用于阻止预约、显示已预订时间或指示不可用的时间段。
<flux:time-picker unavailable="03:00,04:00,05:30-07:29" />默认情况下，时间选择器将使用浏览器的区域设置（例如 navigator.language）。
您可以通过将 locale 属性设置为任何有效的区域字符串来覆盖此行为（例如 fr 表示法语，en-US 表示英语等）：
<flux:time-picker locale="ja-JP" />|
属性
|
描述
|
|---|---|
| wire:model |
将时间选择器绑定到 Livewire 属性。有关更多信息，请参阅 wire:model 文档。
|
| value |
选中的时间。格式取决于 mode：单个时间 (H:i) 或多个时间 (H:i,H:i)。
|
| type |
时间选择器的类型。选项：input、button。默认：button。
|
| multiple |
允许用户选择多个时间。默认：false。
|
| time-format |
时间格式。选项：auto（默认）、12-hour、24-hour。
|
| interval |
显示的时间选项之间的间隔（分钟）。默认：30。
|
| min |
最早可选择的时间。可以是时间字符串或 "now"。
|
| max |
最晚可选择的时间。可以是时间字符串或 "now"。
|
| unavailable |
不可用的时间。可以是时间字符串或逗号分隔的时间字符串列表。
|
| open-to |
时间选择器打开时显示的时间。默认：选中的时间或当前时间。
|
| label |
显示在时间选择器上方的标签文本。提供时，会将组件包装在 flux:field 中，并附加一个 flux:label。
|
| description |
显示在时间选择器上方的帮助文本。当与 label 一起提供时，会显示在 flux:field 包装器内的标签和时间选择器之间。
|
| description:trailing |
提供的描述将显示在时间选择器的下方而不是上方。
|
| badge |
当提供 label 属性时，显示在 flux:label 组件末尾的徽章文本。
|
| placeholder |
当未选择时间时显示的占位符文本。
|
| size |
时间选择器的大小。选项：sm、xs。
|
| clearable |
当选择了时间时显示一个清除按钮。
|
| disabled |
阻止用户与时间选择器的交互。
|
| invalid |
为时间选择器应用错误样式。
|
| locale |
设置时间选择器的区域设置。例如：fr、en-US、ja-JP。
|
|
属性
|
描述
|
|---|---|
| data-flux-time-picker |
应用于根元素，用于样式设置和识别。
|