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, the min-hour, min-minute and min-second properties will not take effect.
  • After setting max-time, the max-hour, max-minute and max-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

ParametersDescriptionTypeDefault value
v-modelCurrently selected timestring-
columns-typeOption type, array of hour, minute and secondstring['hour', 'minute']
min-hourOptional minimum hournumber | string0
max-hourOptional maximum hournumber | string23
min-minuteOptional minimum minutenumber | string0
max-minuteOptional maximum minutenumber | string59
min-secondOptional minimum number of secondsnumber | string0
max-secondOptional maximum number of secondsnumber | string59
min-timeOptional minimum time, the format refers to 07:40:00, when using min-hour min-minute min-second will not take effectstring-
max-timeOptional maximum time, the format refers to 10:20:00, when using max-hour max-minute max-second will not take effectstring-
titleTop column titlestring''
confirm-button-textConfirm button textstringConfirm
cancel-button-textCancel button textstringCancel
show-toolbarWhether to display the top barbooleantrue
loadingwhether to display loading statusbooleanfalse
readonlyWhether it is in read-only state. Options cannot be switched in read-only statebooleanfalse
filteroption filter function(type: string, options: PickerOption, values: string) => PickerOption-
formatteroption formatting function(type: string, option: PickerOption) => PickerOption-
option-heightOption height, supports rpx unit, default pxnumber | string44
visible-option-numNumber of visible optionsnumber | string6
swipe-durationThe duration of inertial scrolling during fast swiping, unit msnumber | string1000

Events

Event nameDescriptionCallback parameters
confirmTriggered when the completion button is clicked{ selectedValues, selectedOptions, selectedIndexes }
cancelTriggered when the cancel button is clicked{ selectedValues, selectedOptions, selectedIndexes }
changeTriggered when options change{ selectedValues, selectedOptions, selectedIndexes, columnIndex }

Slots

NameDescriptionParameters
toolbarCustomize the entire top bar content-
titleCustom title content-
confirmCustomize the confirmation button content-
cancelCustomize cancel button content-
optionCustom option contentoption: PickerOption, index: number
columns-topCustomize the content above the options-
columns-bottomCustomize the content below the options-