SelectTime

Brief Introduction

The selectTime time picker component is used for users to select a time or time range.
You can use <MYSelect-time></MYSelect-time> or <MYSelect-time /> to implement a time picker.

Basic Usage

Use v-model to bind the time value.

Code Demo

000102030405060708091011121314151617181920212223:000102030405060708091011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859

<template>
    <MYSelect-time v-model='timePoint' />
</template>

展开代码

Select Time Range

Use the range property to enable time range selection mode.

Code Demo

000102030405060708091011121314151617181920212223:000102030405060708091011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859

至

000102030405060708091011121314151617181920212223:000102030405060708091011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859

<template>
    <MYSelect-time v-model='timeRange' range />
</template>

展开代码

Custom Hour Options

Use the hourOptions property to customize the hour options.

Code Demo

091011121314151617:000102030405060708091011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859

<template>
    <MYSelect-time v-model='timePoint2' :hourOptions='[9, 10, 11, 12, 13, 14, 15, 16, 17]' />
</template>

展开代码

Custom Minute Options

Use the minuteOptions property to customize the minute options.

Code Demo

000102030405060708091011121314151617181920212223:00153045

<template>
    <MYSelect-time v-model='timePoint3' :minuteOptions='[0, 15, 30, 45]' />
</template>

展开代码

Combined Usage

Finally, combine multiple APIs to create a customized time picker:

Code Demo

0809101112131415161718:0030

至

0809101112131415161718:0030

<template>
    <MYSelect-time 
        v-model='timeRange2' 
        range 
        :hourOptions='[8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18]'
        :minuteOptions='[0, 30]'
    />
</template>

展开代码

API Reference

Props

Parameter	Description	Type	Options	Default
modelValue	Bound value	string | array	—	—
range	Whether range mode	boolean	—	false
hourOptions	Hour options	number[]	—	[0-23]
minuteOptions	Minute options	number[]	—	[0-59]

Type Definition

interface SelectTimeProps {
  modelValue?: string | string[];
  range?: boolean;
  hourOptions?: number[];
  minuteOptions?: number[];
}