Time Picker #
Examples #
Default #
21:25:24
Framed #
21:25:24
Controlling the count of displayed cells #
For the better view need to set odd numbers
21:25:24
Readonly and disabled #
AM PM #
You can specify ampm
props if you want to use 12-hours clock format set as true or 24-hours clock set as false.
21:25:24
Period updates model value #
21:25:24
View #
You can specify if time picker needs to show seconds and minutes.
21:25:24
Hours | Minutes | Seconds |
00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
Filter #
You can hide specific time and user will not be able to select it.
21:25:24
Props #
Name | Description | Types | Default |
---|---|---|---|
ampm |
|
| |
cellHeight |
|
| |
disabled |
|
| |
framed |
|
| |
hidePeriodSwitch |
|
| |
hoursFilter |
| - | |
hoursFilter | Function that allows you to hide some specific hours |
| |
minutesFilter |
| - | |
minutesFilter | Function that allows you to hide some specific minutes |
| |
modelValue |
| - | |
periodUpdatesModelValue |
|
| |
preset |
| - | |
readonly |
|
| |
secondsFilter |
| - | |
secondsFilter | Function that allows you to hide some specific seconds |
| |
stateful |
|
| |
view |
|
| |
view | View specifying which columns will be shown |
| |
visibleCellsCount |
|
|
Events #
Name | Description |
---|---|
update:modelValue | The event is triggered when the component needs to change the model. Is also used by |
Css Variables #
Name | Default Value |
---|---|
--va-time-picker-display | inline-flex |
--va-time-picker-disabled-opacity | 0.4 |