TimePicker time selection

introduce

Time picker, usually used in conjunction with the popup layer component.

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
}

Props

Events

Slots