Used to select time, usually used with the Popup component.
\nRegister component globally via app.use, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { TimePicker } from 'vant';\n\nconst app = createApp();\napp.use(TimePicker);\n<van-time-picker v-model="currentTime" title="Choose Time" />\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentTime = ref(['12', '00']);\n return { currentTime };\n },\n};\nUsing columns-type prop to control the type of columns.
For example:
\n[\'hour\'] to select hour.[\'minute\'] to select minute.[\'minute\', \'second\'] to select minute and second.[\'hour\', \'minute\', \'second\'] to select hour, minute and second.<van-time-picker\n v-model="currentTime"\n title="Choose Time"\n :columns-type="columnsType"\n/>\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentTime = ref(['12', '00', '00']);\n const columnsType = ['hour', 'minute', 'second'];\n return {\n currentTime,\n columnsType,\n };\n },\n};\nYou can use props like min-hour and max-hour to limit the range of hours, min-minute and max-minute to limit the range of minutes, and min-second and max-second to limit the range of seconds.
For example, in the following example, users can only select hours between 10 and 20, and minutes between 30 and 40.
<van-time-picker\n v-model="currentTime"\n title="Choose Time"\n :min-hour="10"\n :max-hour="20"\n :min-minute="30"\n :max-minute="40"\n/>\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentTime = ref(['12', '35']);\n return { currentTime };\n },\n};\nYou can use min-time and max-time attributes to limit the overall time range, with the format 10:00:00.
min-time is set, attributes like min-hour, min-minute, and min-second will not take effect.max-time is set, attributes like max-hour, max-minute, and max-second will not take effect.For example, in the following example, users can select any time between 09:40:10 and 20:20:50.
<van-time-picker\n v-model="currentTime"\n title="Choose Time"\n :columns-type="['hour', 'minute', 'second']"\n min-time="09:40:10"\n max-time="20:20:50"\n/>\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentTime = ref(['12', '00', '00']);\n return { currentTime };\n },\n};\nUsing formatter prop to format option text.
<van-time-picker\n v-model="currentTime"\n title="Choose Time"\n :formatter="formatter"\n/>\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentTime = ref(['12', '00']);\n const formatter = (type, option) => {\n if (type === 'hour') {\n option.text += 'h';\n }\n if (type === 'minute') {\n option.text += 'm';\n }\n return option;\n };\n\n return {\n formatter,\n currentTime,\n };\n },\n};\nUsing filter prop to filter options.
<van-time-picker v-model="currentTime" title="Choose Time" :filter="filter" />\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentTime = ref(['12', '00']);\n\n const filter = (type, options) => {\n if (type === 'minute') {\n return options.filter((option) => Number(option.value) % 10 === 0);\n }\n return options;\n };\n\n return {\n filter,\n currentTime,\n };\n },\n};\nThe third parameter of the filter function can get the currently selected time, which can be used to filter unwanted times more flexibly when using the uncontrolled mode.
<van-time-picker title="Choose Time" :filter="filter" />\nexport default {\n setup() {\n const filter = (type, options, values) => {\n const hour = +values[0];\n\n if (type === 'hour') {\n return options.filter(\n (option) => Number(option.value) >= 8 && Number(option.value) <= 18,\n );\n }\n\n if (type === 'minute') {\n options = options.filter((option) => Number(option.value) % 10 === 0);\n\n if (hour === 8) {\n return options.filter((option) => Number(option.value) >= 40);\n }\n\n if (hour === 18) {\n return options.filter((option) => Number(option.value) <= 20);\n }\n }\n\n return options;\n };\n\n return {\n filter,\n };\n },\n};\n| Attribute | \nDescription | \nType | \nDefault | \n
|---|---|---|---|
| v-model | \nCurrent time | \nstring[] | \n- | \n
| columns-type | \nColumns type | \nstring[] | \n[\'hour\', \'minute\'] | \n
| min-hour | \nMin hour | \nnumber | string | \n0 | \n
| max-hour | \nMax hour | \nnumber | string | \n23 | \n
| min-minute | \nMin minute | \nnumber | string | \n0 | \n
| max-minute | \nMax minute | \nnumber | string | \n59 | \n
| min-second | \nMin second | \nnumber | string | \n0 | \n
| max-second | \nMax second | \nnumber | string | \n59 | \n
min-time v4.5.0 | \nMin time, format reference 07:40:00, min-hour min-minute min-second is invalid when used | \nstring | \n- | \n
max-time v4.5.0 | \nMax time, format reference 10:20:00, min-hour min-minute max-second is invalid when used | \nstring | \n- | \n
| title | \nToolbar title | \nstring | \n\'\' | \n
| confirm-button-text | \nText of confirm button | \nstring | \nConfirm | \n
| cancel-button-text | \nText of cancel button | \nstring | \nCancel | \n
| show-toolbar | \nWhether to show toolbar | \nboolean | \ntrue | \n
| loading | \nWhether to show loading prompt | \nboolean | \nfalse | \n
| readonly | \nWhether to be readonly | \nboolean | \nfalse | \n
| filter | \nOption filter | \n(type: string, options: PickerOption[], values: string[]) => PickerOption[] | \n- | \n
| formatter | \nOption text formatter | \n(type: string, option: PickerOption) => PickerOption | \n- | \n
| option-height | \nOption height, supports px vw vh rem unit, default px | \nnumber | string | \n44 | \n
| visible-option-num | \nCount of visible columns | \nnumber | string | \n6 | \n
| swipe-duration | \nDuration of the momentum animation, unit ms | \nnumber | string | \n1000 | \n
| Event | \nDescription | \nArguments | \n
|---|---|---|
| confirm | \nEmitted when the confirm button is clicked | \n{ selectedValues, selectedOptions, selectedIndexes } | \n
| cancel | \nEmitted when the cancel button is clicked | \n{ selectedValues, selectedOptions, selectedIndexes } | \n
| change | \nEmitted when current option is changed | \n{ selectedValues, selectedOptions, selectedIndexes, columnIndex } | \n
| Name | \nDescription | \nSlotProps | \n
|---|---|---|
| toolbar | \nCustom toolbar content | \n- | \n
| title | \nCustom title | \n- | \n
| confirm | \nCustom confirm button text | \n- | \n
| cancel | \nCustom cancel button text | \n- | \n
| option | \nCustom option content | \noption: PickerOption, index: number | \n
| columns-top | \nCustom content above columns | \n- | \n
| columns-bottom | \nCustom content below columns | \n- | \n
Use ref to get Picker instance and call instance methods.
\n| Name | \nDescription | \nAttribute | \nReturn value | \n
|---|---|---|---|
| confirm | \nStop scrolling and emit confirm event | \n- | \n- | \n
| getSelectedTime | \nGet current selected time | \n- | \nstring[] | \n
The component exports the following type definitions:
\nimport type {\n TimePickerProps,\n TimePickerColumnType,\n TimePickerInstance,\n} from 'vant';\nTimePickerInstance is the type of component instance:
import { ref } from 'vue';\nimport type { TimePickerInstance } from 'vant';\n\nconst timePickerRef = ref<TimePickerInstance>();\n\ntimePickerRef.value?.confirm();\n