首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

TimePicker 时间选择器

TimePicker 时间选择器

用于选择或输入日期

固定时间点

提供几个固定的时间点供用户选择

使用 el-time-select 标签,通过设置picker-options属性对象的startendstep指定可选的起始时间、结束时间和步长

代码语言:javascript
复制
<el-time-select
  v-model="value1"
  :picker-options="{
    start: '08:30',
    step: '00:15',
    end: '18:30'
  }"
  placeholder="选择时间">
</el-time-select>

<script>
  export default {
    data() {
      return {
        value1: ''
      };
    }
  }
</script>

任意时间点

可以选择任意时间

使用 el-time-picker 标签,通过selectableRange限制可选时间范围。提供了两种交互方式:默认情况下通过鼠标滚轮进行选择,打开arrow-control属性则通过界面上的箭头进行选择。

代码语言:javascript
复制
<template>
  <el-time-picker
    v-model="value2"
    :picker-options="{
      selectableRange: '18:30:00 - 20:30:00'
    }"
    placeholder="任意时间点">
  </el-time-picker>
  <el-time-picker
    arrow-control
    v-model="value3"
    :picker-options="{
      selectableRange: '18:30:00 - 20:30:00'
    }"
    placeholder="任意时间点">
  </el-time-picker>
</template>

<script>
  export default {
    data() {
      return {
        value2: new Date(2016, 9, 10, 18, 40),
        value3: new Date(2016, 9, 10, 18, 40)
      };
    }
  }
</script>

固定时间范围

若先选择开始时间,则结束时间内备选项的状态会随之改变

代码语言:javascript
复制
<template>
  <el-time-select
    placeholder="起始时间"
    v-model="startTime"
    :picker-options="{
      start: '08:30',
      step: '00:15',
      end: '18:30'
    }">
  </el-time-select>
  <el-time-select
    placeholder="结束时间"
    v-model="endTime"
    :picker-options="{
      start: '08:30',
      step: '00:15',
      end: '18:30',
      minTime: startTime
    }">
  </el-time-select>
</template>

<script>
  export default {
    data() {
      return {
        startTime: '',
        endTime: ''
      };
    }
  }
</script>

任意时间范围

可选择任意的时间范围

添加is-range属性即可选择时间范围,同样支持arrow-control属性。

代码语言:javascript
复制
<template>
  <el-time-picker
    is-range
    v-model="value4"
    range-separator="至"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    placeholder="选择时间范围">
  </el-time-picker>
  <el-time-picker
    is-range
    arrow-control
    v-model="value5"
    range-separator="至"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    placeholder="选择时间范围">
  </el-time-picker>
</template>

<script>
  export default {
    data() {
      return {
        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
      };
    }
  }
</script>

Attributes

参数

说明

类型

可选值

默认值

readonly

完全只读

boolean

false

disabled

禁用

boolean

false

editable

文本框可输入

boolean

true

clearable

是否显示清除按钮

boolean

true

size

输入框尺寸

string

medium / small / mini

placeholder

非范围选择时的占位内容

string

start-placeholder

范围选择时开始日期的占位内容

string

end-placeholder

范围选择时结束日期的占位内容

string

is-range

是否为时间范围选择,仅对<el-time-picker>有效

boolean

false

arrow-control

是否使用箭头进行时间选择,仅对<el-time-picker>有效

boolean

false

value

绑定值

date(TimePicker) / string(TimeSelect)

align

对齐方式

string

left / center / right

left

popper-class

TimePicker 下拉框的类名

string

picker-options

当前时间日期选择器特有的选项参考下表

object

{}

range-separator

选择范围时的分隔符

string

-

'-'

value-format

可选,仅TimePicker时可用,绑定值的格式。不指定则绑定值为 Date 对象

string

见日期格式

default-value

可选,选择器打开时默认显示的时间

Date(TimePicker) / string(TimeSelect)

可被new Date()解析(TimePicker) / 可选值(TimeSelect)

name

原生属性

string

prefix-icon

自定义头部图标的类名

string

el-icon-time

clear-icon

自定义清空图标的类名

string

el-icon-circle-close

Time Select Options

参数

说明

类型

可选值

默认值

start

开始时间

string

09:00

end

结束时间

string

18:00

step

间隔时间

string

00:30

minTime

最小时间,小于该时间的时间段将被禁用

string

00:00

maxTime

最大时间,大于该时间的时间段将被禁用

string

Time Picker Options

参数

说明

类型

可选值

默认值

selectableRange

可选时间段,例如'18:30:00 - 20:30:00'或者传入数组['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']

string / array

format

时间格式化(TimePicker)

string

小时:HH,分:mm,秒:ss,AM/PM A

'HH:mm:ss'

Events

事件名

说明

参数

change

用户确认选定的值时触发

组件绑定值

blur

当 input 失去焦点时触发

组件实例

focus

当 input 获得焦点时触发

组件实例

Methods

方法名

说明

参数

focus

使 input 获取焦点

-

扫码关注腾讯云开发者

领取腾讯云代金券