TimePicker 时间选择器 ​

用于选择或输入日期

ts
import { createApp } from 'vue'
import { TimePicker as ElTimePicker } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElTimePicker)

任意时间点 ​

可以选择任意时间

<template>
  <div class="example-basic">
    <el-time-picker v-model="value1" placeholder="Arbitrary time" />
    <el-time-picker
      v-model="value2"
      arrow-control
      placeholder="Arbitrary time"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { TimePicker as ElTimePicker } from '@szhn/dh-design-pc'


const value1 = ref()
const value2 = ref()
</script>

<style>
.example-basic .el-date-editor {
  margin: 8px;
}
</style>

限制时间选择范围 ​

您也可以限制时间选择范围。

<template>
  <div class="example-basic">
    <el-time-picker
      v-model="value1"
      :disabled-hours="disabledHours"
      :disabled-minutes="disabledMinutes"
      :disabled-seconds="disabledSeconds"
      placeholder="Arbitrary time"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { TimePicker as ElTimePicker } from '@szhn/dh-design-pc'


const value1 = ref(new Date(2016, 9, 10, 18, 30))

const makeRange = (start: number, end: number) => {
  const result: number[] = []
  for (let i = start; i <= end; i++) {
    result.push(i)
  }
  return result
}
const disabledHours = () => {
  return makeRange(0, 16).concat(makeRange(19, 23))
}
const disabledMinutes = (hour: number) => {
  if (hour === 17) {
    return makeRange(0, 29)
  }
  if (hour === 18) {
    return makeRange(31, 59)
  }
  return []
}
const disabledSeconds = (hour: number, minute: number) => {
  if (hour === 18 && minute === 30) {
    return makeRange(1, 59)
  }
  return []
}
</script>

<style>
.example-basic .el-date-editor {
  margin: 8px;
}
</style>

任意时间范围 ​

可选择任意的时间范围

<template>
  <div class="demo-range">
    <el-time-picker
      v-model="value1"
      is-range
      range-separator="To"
      start-placeholder="Start time"
      end-placeholder="End time"
    />
    <el-time-picker
      v-model="value2"
      is-range
      arrow-control
      range-separator="To"
      start-placeholder="Start time"
      end-placeholder="End time"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { TimePicker as ElTimePicker } from '@szhn/dh-design-pc'


const value1 = ref<[Date, Date]>([
  new Date(2016, 9, 10, 8, 40),
  new Date(2016, 9, 10, 9, 40),
])
const value2 = ref<[Date, Date]>([
  new Date(2016, 9, 10, 8, 40),
  new Date(2016, 9, 10, 9, 40),
])
</script>

<style>
.demo-range .el-date-editor {
  margin: 8px;
}

.demo-range .el-range-separator {
  box-sizing: content-box;
}
</style>

API ​

Attributes ​

属性名说明类型默认
model-value / v-model绑定值，如果它是数组，长度应该是 2number / string / object''
readonly完全只读booleanfalse
disabled禁用booleanfalse
editable文本框可输入booleantrue
clearable是否显示清除按钮booleantrue
size输入框尺寸enum—
placeholder非范围选择时的占位内容string''
start-placeholder范围选择时开始日期的占位内容string—
end-placeholder范围选择时结束日期的占位内容string—
is-range是否为时间范围选择booleanfalse
arrow-control是否使用箭头进行时间选择booleanfalse
popper-classTimePicker 下拉框的类名string''
popper-style为 TimePicke 的下拉菜单自定义样式string / object—
popper-options自定义 popper 选项，更多请参考 popper.jsobject{}
fallback-placements 2.8.4Tooltip 可用的 positions 请查看popper.js 文档array['bottom', 'top', 'right', 'left']
placement 2.8.4下拉框出现的位置展示位置bottom
range-separator选择范围时的分隔符string'-'
format显示在输入框中的格式string—
default-value可选，选择器打开时默认显示的时间Date / array—
value-format可选，绑定值的格式。 不指定则绑定值为 Date 对象string—
id等价于原生 input id 属性string / array—
name等价于原生 input name 属性string''
aria-label a11y 2.7.2等价于原生 input aria-label 属性string—
prefix-icon自定义前缀图标string / ComponentClock
clear-icon自定义清除图标string / ComponentCircleClose
disabled-hours禁止选择部分小时选项Function—
disabled-minutes禁止选择部分分钟选项Function—
disabled-seconds禁止选择部分秒选项Function—
teleported是否将 popover 的下拉列表镜像至 body 元素booleantrue
tabindex输入框的 tabindexstring / number0
empty-values 2.7.0组件的空值配置， 参考config-providerarray—
value-on-clear 2.7.0清空选项的值， 参考config-providerstring / number / boolean / Function—
save-on-blur 2.13.4当未选择任何值时，是否在获得焦点时自动填充为当前时间。booleantrue
label a11y deprecated等价于原生 input aria-label 属性string—

事件 ​

事件名说明类型
change用户确认选定的值时触发Function
blur在组件 Input 失去焦点时触发Function
focus在组件 Input 获得焦点时触发Function
clear 2.7.7可清空的模式下用户点击清空按钮时触发Function
visible-change当 TimePicker 的下拉列表出现/消失时触发Function

暴露 ​

名称说明Type
focus使组件获取焦点Function
blur使组件失去焦点Function
handleOpen 2.2.16打开时间选择器弹窗Function
handleClose 2.2.16关闭时间选择器弹窗Function