TimePicker time selection
introduce
Time picker, usually used in conjunction with the popup layer component.
Code Demo
Basic usage
Bind the currently selected time through v-model
.
<z-time-picker v-model="currentTime" title="Select time" />
import { ref } from 'vue';
const currentTime = ref(['12', '00']);
Option type
The type of options can be controlled through the columns-type
attribute, which supports permutations and combinations of hour
, minute
and second
in any order.
for example:
- Pass
['hour']
to select hours individually. - Pass
['minute']
to select minutes individually. - Pass
['minute', 'second']
to select minutes and seconds. - Pass in
['hour', 'minute', 'second']
to select hours, minutes and seconds.
<z-time-picker
v-model="currentTime"
title="Select time"
:columns-type="columnsType"
/>
import { ref } from 'vue';
const currentTime = ref(['12', '00', '00']);
const columnsType = ['hour', 'minute', 'second'];
time limit
You can use attributes such as min-hour
and max-hour
to limit the hour (hour) range, minute (minute) range, and second (second) range.
For example, in the following example, the hours that the user can select are 10 ~ 20
and the minutes are 30 ~ 40
.
<z-time-picker
v-model="currentTime"
title="Select time"
:min-hour="10"
:max-hour="20"
:min-minute="30"
:max-minute="40"
/>
Overall time range
You can use the min-time
and max-time
attributes to limit the overall time range, with the agreed format 10:00:00
.
- After setting
min-time
, themin-hour
,min-minute
andmin-second
properties will not take effect. - After setting
max-time
, themax-hour
,max-minute
andmax-second
properties will not take effect.
For example, in the following example, the user can select any time from 09:40:10
to 20:20:50
.
<z-time-picker
v-model="currentTime"
title="Select time"
:columns-type="['hour', 'minute', 'second']"
min-time="09:40:10"
max-time="20:20:50"
/>
Format options
By passing in the formatter
function, the text of the option can be formatted.
<z-time-picker
v-model="currentTime"
title="Select time"
:formatter="formatter"
/>
const formatter = (type: string, option: any) => {
if (type === 'hour') {
option.text += 'when'
}
if (type === 'minute') {
option.text += 'fen'
}
return option
}
Filter options
By passing in the filter
function, the option array can be filtered to eliminate unnecessary time and implement a custom time interval.
<z-time-picker v-model="currentTime" title="Select time" :filter="filter" />
const filter = (type: string, options: any) => {
if (type === 'minute') {
return options.filter((option: any) => Number(option.value) % 10 === 0)
}
return options
}
Advanced usage
The third parameter of the filter
function can get the currently selected time, which can more flexibly filter out unnecessary times when using uncontrolled mode.
<z-time-picker title="Select time" :filter="filter" />
const filterMore = (type: string, options: any, values: any) => {
const hour = +values[0]
if (type === 'hour') {
return options.filter(
(option: any) => Number(option.value) >= 8 && Number(option.value) <= 18
)
}
if (type === 'minute') {
options = options.filter((option: any) => Number(option.value) % 10 === 0)
if (hour === 8) {
return options.filter((option: any) => Number(option.value) >= 40)
}
if (hour === 18) {
return options.filter((option: any) => Number(option.value) <= 20)
}
}
return options
}
API
Props
Parameters | Description | Type | Default value |
---|---|---|---|
v-model | Currently selected time | string | - |
columns-type | Option type, array of hour , minute and second | string | ['hour', 'minute'] |
min-hour | Optional minimum hour | number | string | 0 |
max-hour | Optional maximum hour | number | string | 23 |
min-minute | Optional minimum minute | number | string | 0 |
max-minute | Optional maximum minute | number | string | 59 |
min-second | Optional minimum number of seconds | number | string | 0 |
max-second | Optional maximum number of seconds | number | string | 59 |
min-time | Optional minimum time, the format refers to 07:40:00 , when using min-hour min-minute min-second will not take effect | string | - |
max-time | Optional maximum time, the format refers to 10:20:00 , when using max-hour max-minute max-second will not take effect | string | - |
title | Top column title | string | '' |
confirm-button-text | Confirm button text | string | Confirm |
cancel-button-text | Cancel button text | string | Cancel |
show-toolbar | Whether to display the top bar | boolean | true |
loading | whether to display loading status | boolean | false |
readonly | Whether it is in read-only state. Options cannot be switched in read-only state | boolean | false |
filter | option filter function | (type: string, options: PickerOption, values: string) => PickerOption | - |
formatter | option formatting function | (type: string, option: PickerOption) => PickerOption | - |
option-height | Option height, supports rpx unit, default px | number | string | 44 |
visible-option-num | Number of visible options | number | string | 6 |
swipe-duration | The duration of inertial scrolling during fast swiping, unit ms | number | string | 1000 |
Events
Event name | Description | Callback parameters |
---|---|---|
confirm | Triggered when the completion button is clicked | { selectedValues, selectedOptions, selectedIndexes } |
cancel | Triggered when the cancel button is clicked | { selectedValues, selectedOptions, selectedIndexes } |
change | Triggered when options change | { selectedValues, selectedOptions, selectedIndexes, columnIndex } |
Slots
Name | Description | Parameters |
---|---|---|
toolbar | Customize the entire top bar content | - |
title | Custom title content | - |
confirm | Customize the confirmation button content | - |
cancel | Customize cancel button content | - |
option | Custom option content | option: PickerOption, index: number |
columns-top | Customize the content above the options | - |
columns-bottom | Customize the content below the options | - |