014_TimePicker时间选择器

1. TimePicker时间选择器

1.1. 用于选择或输入日期。

1.2. 时间选择器属性

参数	说明	类型	可选值	默认值
value / v-model	绑定值	date(TimePicker) / string(TimeSelect)	无	无
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
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

1.3. Time Select Options

参数	说明	类型	可选值	默认值
start	开始时间	string	无	09:00
end	结束时间	string	无	18:00
step	间隔时间	string	无	00:30
minTime	最小时间, 小于该时间的时间段将被禁用	string	无	00:00
maxTime	最大时间, 大于该时间的时间段将被禁用	string	无	无

1.4. 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	'HH:mm:ss'

1.5. 时间选择器事件

事件名称	说明	参数
change	用户确认选定的值时触发	组件绑定值
blur	当input失去焦点时触发	组件实例
focus	当input获得焦点时触发	组件实例

1.6. 时间选择器方法

方法名	说明
focus	使input获取焦点

2. 时间选择器例子

2.1. 使用脚手架新建一个名为element-ui-timepicker的前端项目, 同时安装Element插件。

2.2. 编写App.vue 

<template>
  <div id="app">
    <h1>固定时间点-提供几个固定的时间点供用户选择</h1>
    <h4>使用el-time-select标签, 分别通过start、end和step指定可选的起始时间、结束时间和步长。</h4>
    <el-time-select v-model="val1" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }" placeholder="选择时间"></el-time-select>

    <h1>任意时间点</h1>
    <h4>使用el-time-picker标签, 通过selectableRange限制可选时间范围。提供了两种交互方式: 默认情况下通过鼠标滚轮进行选择, 打开arrow-control属性则通过界面上的箭头进行选择。</h4>
    <el-time-picker v-model="val21" :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }" placeholder="任意时间点"></el-time-picker>
    <div style="display: inline-block; margin-left: 20px;"></div>
    <el-time-picker arrow-control v-model="val22" :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }" placeholder="任意时间点"></el-time-picker>

    <h1>固定时间范围</h1>
    <h4>若先选择开始时间, 则结束时间内备选项的状态会随之改变。</h4>
    <el-time-select placeholder="起始时间" v-model="startTime" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"></el-time-select>
    <div style="display: inline-block; margin-left: 20px;"></div>
    <el-time-select placeholder="结束时间" v-model="endTime" :picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }"></el-time-select>

    <h1>任意时间范围-可选择任意的时间范围</h1>
    <h4>添加is-range属性即可选择时间范围, 同样支持arrow-control属性。</h4>
    <el-time-picker is-range v-model="val41" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"></el-time-picker>
    <div style="display: inline-block; margin-left: 20px;"></div>
    <el-time-picker is-range arrow-control v-model="val42" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"></el-time-picker>
  </div>
</template>

<script>
export default {
  data () {
    return {
      val1: '',
      val21: new Date(2016, 9, 10, 18, 40),
      val22: new Date(2016, 9, 10, 18, 40),
      startTime: '',
      endTime: '',
      val41: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
      val42: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
    }
  }
}
</script>

2.3. 运行项目