Time Picker 时间选择器

Time Picker 用于选择或输入时间。VISTA B 直接使用 Element Plus 的 el-time-picker，适合排班时间、定时任务、预约时段、营业时间等只需要时间值的场景。

任意时间点

默认情况下，通过鼠标滚轮选择时、分、秒。设置 arrow-control 后，面板会使用箭头按钮进行时间选择。

Default

With arrow controls

<script setup>
import { ref } from 'vue'

const value = ref(new Date(2016, 9, 10, 18, 30))
</script>

<template>
  <el-time-picker
    v-model="value"
    placeholder="Arbitrary time"
  />
  <el-time-picker
    v-model="value"
    arrow-control
    placeholder="Arbitrary time"
  />
</template>

限制时间选择范围

通过 disabled-hours、disabled-minutes 和 disabled-seconds 可以限制可选时间范围。下面示例只允许选择 17:30:00 到 18:30:00 之间的时间。

available: 17:30:00 - 18:30:00

<script setup>
const makeRange = (start, end) => {
  const result = []
  for (let i = start; i <= end; i += 1) result.push(i)
  return result
}

const disabledHours = () => makeRange(0, 16).concat(makeRange(19, 23))
const disabledMinutes = (hour) => {
  if (hour === 17) return makeRange(0, 29)
  if (hour === 18) return makeRange(31, 59)
  return []
}
const disabledSeconds = (hour, minute) => {
  if (hour === 18 && minute === 30) return makeRange(1, 59)
  return []
}
</script>

<template>
  <el-time-picker
    v-model="value"
    :disabled-hours="disabledHours"
    :disabled-minutes="disabledMinutes"
    :disabled-seconds="disabledSeconds"
  />
</template>

值格式

默认绑定值为 Date 对象。通过 value-format 可以把绑定值转换成指定格式的字符串，方便和后端接口约定保持一致。

value: 18:30:00

<el-time-picker
  v-model="value"
  value-format="HH:mm:ss"
  format="HH:mm:ss"
/>

任意时间范围

添加 is-range 后可以选择时间范围。范围模式支持 range-separator、start-placeholder、end-placeholder，也支持 arrow-control。

Default

To

With arrow controls

To

<el-time-picker
  v-model="value"
  is-range
  range-separator="To"
  start-placeholder="Start time"
  end-placeholder="End time"
/>

暴露方法

通过组件实例可以调用 focus、blur、handleOpen 和 handleClose。下面示例演示手动打开和关闭下拉面板。

未操作

<script setup>
import { ref } from 'vue'

const pickerRef = ref()

const openPicker = () => {
  pickerRef.value?.handleOpen()
}
</script>

<template>
  <el-button @click="openPicker">打开面板</el-button>
  <el-time-picker ref="pickerRef" v-model="value" />
</template>

API

TimePicker 属性

属性	说明	类型	默认值
model-value / v-model	绑定值	Date / string / number / array	空
readonly	是否只读	boolean	false
disabled	是否禁用	boolean	false
editable	文本框是否可输入	boolean	true
clearable	是否显示清除按钮	boolean	true
size	输入框尺寸	large / default / small	default
placeholder	非范围选择时的占位内容	string	空
start-placeholder	范围选择时开始时间的占位内容	string	空
end-placeholder	范围选择时结束时间的占位内容	string	空
is-range	是否为时间范围选择	boolean	false
arrow-control	是否使用箭头按钮选择时间	boolean	false
format	显示在输入框中的格式	string	HH:mm:ss
value-format	绑定值的格式，不指定时绑定值为 Date 对象	string	空
popper-class	下拉框的类名	string / object	空
popper-style	下拉框的自定义样式	string / object	空
popper-options	Popper.js 参数	object	{}
placement	下拉框出现的位置	top / bottom / left / right 等	bottom
fallback-placements	Popper 可用的备用位置	array	['bottom', 'top', 'right', 'left']
range-separator	范围选择时的分隔符	string	-
default-value	可选，选择器打开时默认显示的时间	Date / [Date, Date]	空
id	原生 input 的 id 属性	string / array	空
name	原生 input 的 name 属性	string / array	空
aria-label	原生 aria-label 属性	string	空
prefix-icon	自定义前缀图标	string / Component	空
clear-icon	自定义清除图标	string / Component	CircleClose
disabled-hours	禁止选择部分小时选项	function	空
disabled-minutes	禁止选择部分分钟选项	function	空
disabled-seconds	禁止选择部分秒选项	function	空
teleported	是否将下拉列表插入至 body 元素	boolean	true
tabindex	输入框的 tabindex	string / number	0
validate-event	输入时是否触发表单校验	boolean	true
empty-values	组件的空值配置	array	空
value-on-clear	清空时设置的值	string / number / boolean / function	空

TimePicker 事件

事件名	说明	类型
change	用户确认选定值时触发	(value) => void
blur	输入框失去焦点时触发	(event: FocusEvent) => void
focus	输入框获得焦点时触发	(event: FocusEvent) => void
clear	点击清除按钮时触发	() => void
visible-change	下拉列表出现或隐藏时触发	(visible: boolean) => void

TimePicker 方法

方法名	说明	类型
focus	使组件获取焦点	() => void
blur	使组件失去焦点	() => void
handleOpen	打开 TimePicker 下拉面板	() => void
handleClose	关闭 TimePicker 下拉面板	() => void

使用提醒

Time Picker 只处理时间，不包含日期。需要同时选择日期和时间时，应使用 DateTime Picker；需要纯字符串提交给接口时，建议使用 value-format 固定输出格式。