Time Range Picker
Pick a start and end time as Time instances. Used for opening hours, shift schedules, and event blocks. Built on reka-ui's TimeRangeFieldRoot.
Default
Start and end segments with a dash separator. Bind to { start, end } Time values.
API Reference
Props, events, and slots for each sub-component.
TimeRangePicker
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| modelValue | { start: Time, end: Time } | — | Range with Time instances from @internationalized/date. Supports v-model. |
| hourCycle | 12 | 24 | 24 | Display 12- or 24-hour format. |
| locale | string | "en-US" | BCP 47 locale for formatting. |
| disabled | boolean | false | Disable input. |
| readonly | boolean | false | Make the field read-only. |
| clearable | boolean | false | Show a clear button when a value is set. |
| showCaret | boolean | false | Show a blinking caret on the focused segment. |
Events
| Event | Description |
|---|---|
| update:modelValue | Fires with the new { start, end } range. Enables v-model. |
TimeRangePickerInput
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | — | Single editable segment. Forwards to reka-ui TimeRangeFieldInput; usually rendered for you by TimeRangePicker. |