TimePicker

A time picker for selecting or entering arbitrary points in time. It supports hour/minute/second spinner selection, 12/24-hour formats, time disabling, and other advanced features.

TimePicker vs TimeSelect

• TimePicker: Free selection of any time point via spinner panels (this component).
• TimeSelect: Selection from a predefined list of fixed time slots, ideal for appointment scenarios.

Choose the component that best fits your business needs.

Basic Usage

Click the input area to open the time selection panel. Scroll or click to select hours, minutes, and seconds.

Current value: Not selected

Basic Usage

Disabled State

Use the disabled property to disable the entire time picker.

Disabled State

Clearable

Set the clearable property to allow clearing the selected time.

Current value: 09:15:30

Clearable

Different Sizes

Use the size property to change the picker's dimensions. Options: large, default, small.

Different Sizes

12-Hour Format

Set the use12-hours property to enable the 12-hour format (AM/PM).

Current value: Not selected

12-Hour Format

Hide Seconds

Set show-seconds to false to hide the seconds selection column.

Current value: Not selected

Hide Seconds

Arrow Control Mode

Set the arrow-control property to use up/down arrows for time adjustment instead of scrolling lists.

Arrow Control Mode

Step Settings

Use hour-step, minute-step, and second-step properties to set the intervals for time selection.

Hour step: 2, Minute step: 15, Second step: 30

Step Settings

Disabled Time

Use the disabled-time property to restrict selectable times. You can independently disable specific hours, minutes, and seconds.

Disabled: 0-5h, 22-23h, and specific minutes at 12h

Disabled Time

Time Range Selection

Set the is-range property to enable time range selection mode.

to

Current value: Not selected

Time Range Selection

Automatic Range Sorting

By setting order-on-confirm to true, the system will no longer enforce strict disabling constraints (you can pick any time), but will automatically swap the values if the end time is earlier than the start time upon clicking "OK".

to

Current value: 10:00:00 - 08:00:00

Automatic Range Sorting

Full Feature Demo

A demonstration of common TimePicker features: clearable, footer actions, "Now" button, etc.

Full Feature Demo

Usage in Nuxt

The TimePicker component fully supports SSR in Nuxt 3/4. When used in a Nuxt project, it is auto-imported.

Usage in Nuxt

SSR Considerations:

• ✅ Component structure and styles fully support SSR.
• ✅ Initial values render correctly on the server.
• ✅ Panel uses Teleport but is SSR-compatible for the initial load.
• ⚠️ Spinner scroll positioning becomes active after client-side hydration.
• ⚠️ DOM-direct operations (like focus) only execute on the client.

SSR Best Practices

TimePicker's core logic is optimized for SSR. All operations that could cause hydration mismatches (like timestamp generation or direct DOM access) are safely deferred to the client side.

API

Props

Name	Description	Type	Default
model-value / v-model	Binding value	string | Date | number | [string, string]	—
disabled	Whether to disable the picker	boolean	false
editable	Whether the input is editable	boolean	true
clearable	Whether the selected value can be cleared	boolean	true
size	Input size	'large' | 'default' | 'small'	'default'
placeholder	Placeholder text	string	'Select time'
start-placeholder	Placeholder for the start time in range mode	string	'Start time'
end-placeholder	Placeholder for the end time in range mode	string	'End time'
is-range	Whether to enable range selection	boolean	false
format	Time display format	string	'HH:mm:ss'
value-format	Format for the bound value	string	'HH:mm:ss'
use12-hours	Whether to use 12-hour format	boolean	false
show-seconds	Whether to show the seconds column	boolean	true
hour-step	Interval between selectable hours	number	1
minute-step	Interval between selectable minutes	number	1
second-step	Interval between selectable seconds	number	1
disabled-time	Config for disabled times	DisabledTimeConfig	—
popper-class	Class name for the dropdown	string	—
teleported	Whether to insert the dropdown into body	boolean	true
range-separator	Separator for range display	string	'-'
arrow-control	Whether to use arrows for control	boolean	false
order-on-confirm	Whether to auto-swap range values if end < start	boolean	false
show-footer	Whether to show the bottom footer	boolean	true
show-now	Whether to show the "Now" button	boolean	true
confirm-text	Text for the OK button	string	'OK'
cancel-text	Text for the Cancel button	string	'Cancel'
now-text	Text for the Now button	string	'Now'
validate-event	Whether to trigger form validation	boolean	true

DisabledTimeConfig

Name	Description	Type
disabledHours	Disabled hours	() => number[]
disabledMinutes	Disabled minutes (based on selected hour)	(hour: number) => number[]
disabledSeconds	Disabled seconds (based on selected hour and minute)	(hour: number, minute: number) => number[]

Events

Name	Description	Parameters
change	Triggers when time changes	(value: TimeValue | TimeRangeValue) => void
focus	Triggers on focus	(event: FocusEvent) => void
blur	Triggers on blur	(event: FocusEvent) => void
clear	Triggers when cleared	() => void
visible-change	Triggers when the panel shows/hides	(visible: boolean) => void
confirm	Triggers when the OK button is clicked	(value: TimeValue | TimeRangeValue) => void
cancel	Triggers when the Cancel button is clicked	() => void

Slots

Name	Description
prefix	Custom prefix icon
suffix	Custom suffix icon
range-separator	Custom range separator content

Expose

Name	Description	Type
focus	Focus the picker	() => void
blur	Blur the picker	() => void
open	Open the selection panel	() => void
close	Close the selection panel	() => void

Theme Variables

All colors support dark mode via the global theme system:

Variable	Description	Default
--yh-time-picker-width	Picker width	220px
--yh-time-picker-range-width	Range picker width	360px
--yh-time-picker-active-color	Highlighted text color	var(--yh-color-primary)
--yh-time-picker-active-bg	Highlighted background color	var(--yh-color-primary-light-9)
--yh-time-picker-hover-bg	Hover background color	var(--yh-fill-color-light)
--yh-time-picker-panel-bg	Panel background color	var(--yh-bg-color-overlay)
--yh-time-picker-panel-shadow	Panel shadow	var(--yh-shadow-lg)
--yh-time-picker-text-color	Text color	var(--yh-text-color-primary)
--yh-time-picker-text-secondary	Secondary text color	var(--yh-text-color-secondary)
--yh-time-picker-border	Border color	var(--yh-border-color-light)
--yh-time-picker-item-height	Option item height	32px
--yh-time-picker-spinner-height	Spinner height	192px
--yh-time-picker-border-radius	Border radius	var(--yh-border-radius-base)