element/examples/docs/time-picker.md

<style> .demo-box { .el-date-editor + .el-date-editor { margin-left: 10px; } } </style>

固定时间点

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

<el-time-select
  v-model="value"
  :picker-options="{
    start: '08:30',
    step: '00:15',
    end: '18:30'
  }"
  placeholder="选择时间">
</el-time-select>

任意时间点

可以选择任意时间。

<el-time-picker
  v-model="value"
  placeholder="任意时间点">
</el-time-picker>

通用 - 手动输入规则

<el-time-picker
  v-model="value"
  placeholder="任意时间点">
</el-time-picker>

通用 - 限制时间范围

<el-time-picker
  v-model="value"
  :picker-options="{
    selectableRange: '18:30:00 - 20:30:00'
  }"
  placeholder="任意时间点">
</el-time-picker>

固定时间范围

先选择开始时间

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

<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>

先选择结束时间

开始时间的备选项不随结束时间的选择改变。

<el-time-select
  placeholder="起始时间"
  v-model="startTime2"
  :picker-options="{
    start: '08:30',
    step: '00:15',
    end: '18:30'
  }">
</el-time-select>
<el-time-select
  placeholder="结束时间"
  v-model="endTime2"
  :picker-options="{
    start: '08:30',
    step: '00:15',
    end: '18:30',
    minTime: startTime2
  }">
</el-time-select>

任意时间范围

可选择任意的时间范围。

<el-time-picker
  is-range
  v-model="value"
  placeholder="选择时间范围">
</el-time-picker>

<script> export default { data() { return { value1: '', value2: '', value3: '', value4: '', value5: '', startTime: '', endTime: '', startTime2: '', endTime2: '' }; } } </script>

API

参数	说明	类型	可选值	默认值
value	绑定值，需双向绑定	String
readonly	只读	Boolean		false
placeholder	占位内容	String
format	时间格式化	String	小时: HH, 分mm, 秒ss	'HH:mm:ss'
picker-options	当前时间日期选择器特有的选项，参考下表	Object		{}

time-select Options

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

time-picker Options

参数	说明	类型	可选值	默认值
selectableRange	可选时间段，例如 18:30:00 - 20:30:00，或者传入数组 ['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']	String, Array