Time

Time picker component.

When to Use

Use when users need to input or select a time value.

Basic Usage

Click the input to open the time selection panel. Use v-model to bind the time value (format HH:mm).

<TTime v-model="time" placeholder="Select time" />

Preset Value

Pass a preset time value.

<TTime :model-value="'14:30'" />

With Seconds

Set format="HH:mm:ss" to show the seconds column.

<TTime :model-value="'09:15:30'" format="HH:mm:ss" />

Minute Step

Set minute-step to control the minute increment (5, 10, 15, 30, etc.).

<TTime :minute-step="15" placeholder="15 min step" />

Sizes

Supports sm, default, and lg sizes.

<TTime size="sm" placeholder="Small" />
<TTime placeholder="Default" />
<TTime size="lg" placeholder="Large" />

Clearable

Set clearable to show a clear button in the panel footer.

<TTime :model-value="'10:00'" clearable />

Disabled

Set disabled to disable time selection.

<TTime disabled placeholder="Disabled" />

API

TTime Props

Prop	Description	Type	Default
model-value	Time value (v-model, format HH:mm or HH:mm:ss)	string	''
format	Display format	'HH:mm' | 'HH:mm:ss'	'HH:mm'
hour-step	Hour step	number	1
minute-step	Minute step	number	1
second-step	Second step	number	1
disabled	Disabled state	boolean	false
placeholder	Placeholder text	string	'Select time'
size	Size	'sm' | 'lg'	undefined
clearable	Show clear button	boolean	false

TTime Events

Event	Description	Parameters
update:model-value	Emitted when time value changes	(value: string) => void
change	Emitted when user confirms selection	(value: string) => void