时间选择器（TimePicker）

Element-UI 的时间选择器组件用于在应用中选择或输入时间。它支持单个时间选择和时间范围选择，并提供多种配置选项以满足不同的使用场景。

提示

时间选择器（TimePicker）官方文档：https://element.eleme.cn/#/zh-CN/component/time-picker (opens new window)

1. 基本用法

基本语法：在 Vue 组件中使用 <el-time-picker> 或 <el-time-select> 标签创建一个时间选择器。通过 v-model 绑定选择器的值。

<template>
  <el-time-picker
    v-model="timeValue"
    placeholder="选择时间"
  ></el-time-picker>
</template>

<script>
export default {
  data() {
    return {
      timeValue: '' // 时间选择器的初始值
    };
  }
};
</script>

• v-model 绑定：时间选择器的值通过 v-model 与 timeValue 绑定。当用户选择时间时，timeValue 会自动更新。
• 默认时间格式：不指定 value-format 时，默认以 Date 对象形式返回时间。
• 

TimePicker 属性

参数	说明	类型	可选值	默认值
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	绑定值的格式。不指定则绑定值为 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 选项

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

Time Picker 选项

参数	说明	类型	可选值	默认值
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'

TimePicker 事件

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

TimePicker 方法

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

2. 常见时间选择器示例

基础时间选择器

通过 v-model 绑定值来实时更新时间选择器。

<template>
  <el-time-picker
    v-model="timeValue"
    placeholder="选择时间"
  ></el-time-picker>
</template>

<script>
export default {
  data() {
    return {
      timeValue: '' // 时间选择器的初始值
    };
  }
};
</script>

• 基本使用：用户可以通过选择时间更新 timeValue，v-model 确保绑定值与用户选择的时间同步。
• 

范围时间选择器

通过 is-range 属性启用范围选择模式。

<template>
  <el-time-picker
    v-model="timeRange"
    is-range
    range-separator="至"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
  ></el-time-picker>
</template>

<script>
export default {
  data() {
    return {
      timeRange: [] // 范围选择的初始值
    };
  }
};
</script>

• 范围选择：通过 is-range 属性启用，用户可以选择一段时间范围，timeRange 数组将存储用户选择的开始时间和结束时间。
• 

带步长的时间选择器

使用 picker-options 的 step 设置时间选择器的间隔。

<template>
  <el-time-select
    v-model="selectedTime"
    :picker-options="{
      start: '09:00',
      step: '01:00',
      end: '18:00'
    }"
    placeholder="选择时间"
  ></el-time-select>
</template>

<script>
export default {
  data() {
    return {
      selectedTime: '' // 带步长的时间选择器的初始值
    };
  }
};
</script>

• 步长设置：通过 picker-options 中的 step 属性设置时间间隔，用户可以根据步长选择时间。
• 

禁用特定时间段的时间选择器

通过 selectableRange 限制可选的时间段。

<template>
  <el-time-picker
    v-model="timeValue"
    :picker-options="{
      selectableRange: '09:00:00 - 18:00:00'
    }"
    placeholder="选择时间"
  ></el-time-picker>
</template>

<script>
export default {
  data() {
    return {
      timeValue: '' // 带时间段限制的时间选择器的初始值
    };
  }
};
</script>

• 时间段限制：通过 selectableRange 属性设置可选的时间段，用户只能选择在该范围内的时间。
• 

固定时间点选择器

使用 <el-time-select> 和 picker-options 可以实现固定时间点选择。

<template>
  <el-time-select
    v-model="selectedTime"
    :picker-options="{
      start: '08:00',
      step: '01:00',
      end: '17:00'
    }"
    placeholder="选择时间"
  ></el-time-select>
</template>

<script>
export default {
  data() {
    return {
      selectedTime: '' // 固定时间点的初始值
    };
  }
};
</script>

• 固定时间点：通过 picker-options 中的 start、step 和 end 属性设置固定时间点选择范围。用户可以选择固定的时间点，例如从早上 8 点开始，每隔 1 小时，直到下午 5 点。
• 

3. 事件处理示例

监听时间变化事件

使用 change 事件监听时间选择器的值变化。

<template>
  <el-time-picker
    v-model="timeValue"
    @change="handleChange"
  ></el-time-picker>
</template>

<script>
export default {
  data() {
    return {
      timeValue: '' // 时间选择器的初始值
    };
  },
  methods: {
    handleChange(value) {
      console.log('选定的时间为:', value);
    }
  }
};
</script>

• 事件监听：通过 change 事件监听时间选择器的值变化，并执行回调函数 handleChange，可以在控制台输出选定的时间。

总结

• 灵活的属性配置：通过 is-range、step、selectableRange 等属性可以自定义时间选择器的行为。
• 丰富的事件处理：支持 change、blur、focus 等事件，允许开发者在时间值变化时进行自定义处理。
• 多样的选择方式：支持单时间选择、时间范围选择、带步长的选择、限制时间段的选择和固定时间点选择等多种方式，适应不同应用场景的需求。