element/examples/docs/zh-CN/time-picker.md
2016-11-14 18:24:06 +08:00

4.0 KiB

TimePicker 时间选择器

用于选择或输入日期

固定时间点

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

:::demo 使用 el-time-select 标签,分别通过starendstep指定可选的起始时间、结束时间和步长

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

:::

任意时间点

可以选择任意时间

:::demo 使用 el-time-picker 标签,通过selectableRange限制可选时间范围

<template>
  <el-time-picker
    v-model="value2"
    :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)
      };
    }
  }
</script>

:::

固定时间范围

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

:::demo

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

:::

任意时间范围

可选择任意的时间范围

:::demo 添加is-range属性即可选择时间范围

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

<script>
  export default {
    data() {
      return {
        value3: [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
placeholder 占位内容 string
format 时间格式化(TimePicker) string 小时:HH,分:mm,秒:ss 'HH:mm:ss'
value 绑定值 TimePicker: Date
TimeSelect: String
- -
align 对齐方式 string left, center, right left
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