Tu View PlusTimePicker
Use Time Picker for time input.
Basic Usage
The basic usage of TimePicker.
Range Picker
Select time range.
V-model
Support v-model for two-way data binding.
Allow Clear
By setting allow-clear, the clear button is displayed.
Default Value
The default value can be passed through defaultValue.
Disabled
Disabled.
Disable Option
By setting disabledHours disabledMinutes disabledSeconds, you can disable some options of hour/minute/second.
Skip Confirm
Skip the confirm step and click directly to select time.
Custom Format
By setting format, you can customize the hour, minute, and second.
Step
By setting step, you can customize the step length of the hour, minute, and second.
Extra Content
Show extra content.
Use 12 Hours
By setting use12Hours, you can customize the hours, minutes, and seconds.
Sizes
Besides default size, tu-time-picker component provides three additional sizes for you to choose among different scenarios. Use attribute size to set additional sizes with mini, small, large.
时间选择
时间范围选择
Time-Picker API
Time-Picker Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| type | Selector type | String | time |
| model-value / v-model | Value | String Number Date Array | - |
| default-value | default Value | String Number Date Array | - |
| disabled | Whether to disable | Boolean | false |
| allow-clear | Whether to allow clear | Boolean | false |
| readonly | Whether it is read-only mode | Boolean | false |
| format | Display the format of the date, refer toString Parsing Format | String | HH:mm:ss |
| placeholder | Placeholder | String | - |
| size | Input box size | String | medium |
| popup-container | Mount container for pop-up box | String HTMLElement | - |
| use12-hours | 12 hour clock | Boolean | false |
| step | Set the hour/minute/second selection interval | Object | - |
| disabled-hours | Disabled partial hour options | Function | - |
| disabled-minutes | Disabled some minutes options | Function | - |
| disabled-seconds | Disabled partial seconds option | Function | - |
| hide-disabled-options | Hide disabled options | Boolean | false |
| disable-confirm | Firmation step, click the time directly after opening, without clicking the confirmation button | Boolean | false |
| position | Pop-up position | String | bl |
| popup-visible | Control the pop-up box to open or close | Boolean | - |
| default-popup-visible | The pop-up box is opened or closed by default | Boolean | false |
| trigger-props | You can pass in the parameters of the Trigger component | TriggerProps | - |
| unmount-on-close | Whether to destroy the dom structure after closing | Boolean | false |
Time-Picker Events
| Name | Description | Type |
|---|---|---|
| change | The component value changes | Function |
| select | Select time but do not trigger component value change | Function |
| clear | Click the clear button | - |
| popup-visible-change | Pop up box expand and collapse | Function |
Time-Picker Slots
| Name | Description |
|---|---|
| prefix | Input box prefix |
| suffix-icon | Input box suffix icon |
| extra | Extra footer |
String parsing format
| Format | Output | Description |
|---|---|---|
| YY | 21 | two digit year |
| YYYY | 2021 | four digit year |
| M | 1-12 | month, starting from 1 |
| MM | 01-12 | month, two digits |
| MMM | Jan-Dec | abbreviated month name |
| MMMM | January-December | full month name |
| D | 1-31 | day of the month |
| DD | 01-31 | day of the month, two digits |
| d | 0-6 | day of the week, Sunday is 0 |
| dd | Su-Sa | the shortest name of the day of the week |
| ddd | Sun-Sat | abbreviated name of the day of the week |
| dddd | Sunday-Saturday | the name of the day of the week |
| H | 0-23 | hour |
| HH | 00-23 | hour, two digits |
| h | 1-12 | hour, 12-hour clock |
| hh | 01-12 | hour, 12-hour clock, two digits |
| m | 0-59 | minute |
| mm | 00-59 | minute, two digits |
| s | 0-59 | second |
| ss | 00-59 | second, two digits |
| S | 0-9 | hundreds of milliseconds, one digits |
| SS | 00-99 | tens of milliseconds, two digits |
| SSS | 000-999 | millisecond, three |
| Z | -5:00 | UTC offset |
| ZZ | -0500 | UTC offset, add 0 in front of the number |
| A | AM PM | - |
| a | am pm | - |
| Do | 1st... 3st | day of month with serial number |
| X | 1410715640.579 | Unix timestamp |
| x | 1410715640579 | Unix millisecond timestamp |