elementui时间

ElementUI 时间组件使用指南

DatePicker 日期选择器

ElementUI 提供了 el-date-picker 组件，支持选择日期、日期范围或时间。

基本用法

<el-date-picker v-model="date" type="date" placeholder="选择日期"></el-date-picker>

v-model 绑定选择的日期值，type 指定选择类型（date、month、year、dates、datetime 等）。

日期范围选择

<el-date-picker
  v-model="dateRange"
  type="daterange"
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期">
</el-date-picker>

type="daterange" 启用日期范围选择，range-separator 定义分隔符。

TimePicker 时间选择器

el-time-picker 用于选择时间或时间范围。

基本用法

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

默认支持 HH:mm:ss 格式。

时间范围选择

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

is-range 启用时间范围选择。

格式化与解析

通过 format 和 value-format 控制显示格式和绑定值格式。

<el-date-picker
  v-model="date"
  type="date"
  format="yyyy-MM-dd"
  value-format="yyyy-MM-dd"
  placeholder="选择日期">
</el-date-picker>

format 定义显示格式，value-format 定义绑定值格式。

禁用日期

使用 picker-options 的 disabledDate 方法禁用特定日期。

<el-date-picker
  v-model="date"
  :picker-options="pickerOptions">
</el-date-picker>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now(); // 禁用未来日期
        }
      }
    };
  }
};
</script>

国际化

ElementUI 默认支持中文，如需切换语言，引入对应的语言包并配置。

import Vue from 'vue';
import ElementUI from 'element-ui';
import locale from 'element-ui/lib/locale/lang/en';

Vue.use(ElementUI, { locale });

注意事项

• 确保 v-model 初始值为 null 或符合格式的字符串，避免初始化报错。
• 时间范围选择时，绑定值为数组格式，如 ['09:00', '18:00']。
• 如需动态修改选项，可通过 picker-options 响应式更新。