Time picker

Examples

Basic

PreviewAngularReactVueJavaScript

API

Properties

Name

Description and specifications

corners

Corner style

Attribute:

corners

Type:

"left" ｜ "right" ｜ "rounded" ｜ "straight"

Default:

'rounded'

format

Since 1.1.0

Format of time string See {@link "https://moment.github.io/luxon/#/formatting?id=table-of-tokens"} for all available tokens.

Attribute:

format

Type:

string

Default:

'TT'

individual

Deprecated

Not supported since 2.0.0.

Attribute:

individual

Type:

boolean

Default:

true

showHour

Show hour input

Attribute:

show-hour

Type:

boolean

Default:

true

showMinutes

Show minutes input

Attribute:

show-minutes

Type:

boolean

Default:

true

showSeconds

Show seconds input

Attribute:

show-seconds

Type:

boolean

Default:

true

showTimeReference

Since 1.1.0 time reference is default aligned with format tt

Deprecated

Since 2.0.0 time reference will be displayed depending on format.

Show time reference input

Attribute:

show-time-reference

Type:

boolean ｜ undefined

Default:

undefined

standaloneAppearance

Controls the visual presentation and styling of the component when it is displayed as a standalone element

Attribute:

standalone-appearance

Type:

boolean

Default:

true

textSelectTime

Since 1.1.0

Text of date select button

Attribute:

text-select-time

Type:

string

Default:

'Done'

textTime

Since 2.1.0

Text for top label

Attribute:

text-time

Type:

string

Default:

'Time'

time

Since 1.1.0

Select time with format string Format has to match the `format` property.

Attribute:

time

Type:

string

Default:

DateTime.now().toFormat(this.format)

timeReference

Set time reference

Attribute:

time-reference

Type:

"AM" ｜ "PM" ｜ undefined

Events

Name

Description and specifications

done

Deprecated

Will be removed in 3.0.0. Use `time-select` event.

Time event

Detail:

string

timeChange

Time change event

Detail:

string

timeSelect

Time event

Detail:

string