Element UI 日期时间选择器(DateTimePicker)使用指南

Element UI 日期时间选择器(DateTimePicker)使用指南

element A Vue.js 2.0 UI Toolkit for Web 项目地址: https://gitcode.com/gh_mirrors/eleme/element

概述

Element UI 的 DateTimePicker 组件是一个功能强大的日期时间选择控件，它结合了 DatePicker 和 TimePicker 的功能，允许用户同时选择日期和时间。这个组件非常适合需要精确时间记录的应用场景，如预约系统、任务管理等。

基本用法

日期时间选择

DateTimePicker 最基本的功能是让用户选择具体的日期和时间点。通过设置 type 属性为 datetime 即可启用这一功能。

<el-date-picker
  v-model="value"
  type="datetime"
  placeholder="选择日期和时间">
</el-date-picker>

特性说明：

• 默认情况下，组件会显示日期和时间选择面板
• 可以通过 format 属性自定义显示格式
• 支持设置默认时间值

快捷选项

为了提高用户体验，可以配置快捷选项，让用户一键选择常用时间：

data() {
  return {
    pickerOptions: {
      shortcuts: [{
        text: '今天',
        onClick(picker) {
          picker.$emit('pick', new Date());
        }
      }, {
        text: '昨天',
        onClick(picker) {
          const date = new Date();
          date.setTime(date.getTime() - 3600 * 1000 * 24);
          picker.$emit('pick', date);
        }
      }]
    }
  }
}

日期时间范围选择

基本范围选择

通过设置 type 为 datetimerange，可以实现日期时间范围选择：

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

范围快捷选项

同样可以为范围选择器配置快捷选项：

shortcuts: [{
  text: '最近一周',
  onClick(picker) {
    const end = new Date();
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
    picker.$emit('pick', [start, end]);
  }
}]

高级功能

默认时间设置

对于范围选择器，可以分别设置开始和结束时间的默认时间值：

<el-date-picker
  v-model="value"
  type="datetimerange"
  :default-time="['12:00:00', '08:00:00']">
</el-date-picker>

禁用特定日期

通过 disabledDate 函数可以禁用特定日期：

pickerOptions: {
  disabledDate(time) {
    return time.getTime() > Date.now();
  }
}

属性详解

DateTimePicker 提供了丰富的配置属性，以下是一些关键属性：

| 属性 | 说明 | 类型 | 默认值 | |------|------|------|------| | type | 选择器类型 | string | 'date' | | format | 显示格式 | string | 'yyyy-MM-dd HH:mm:ss' | | value-format | 绑定值格式 | string | - | | readonly | 是否只读 | boolean | false | | disabled | 是否禁用 | boolean | false | | clearable | 是否显示清除按钮 | boolean | true | | size | 尺寸 | string | - | | placeholder | 占位文本 | string | - |

最佳实践

1. 明确提示：使用清晰的 placeholder 文本指导用户操作
2. 合理限制：根据业务需求设置日期范围限制
3. 性能优化：对于大量数据场景，考虑禁用动画效果
4. 移动适配：在移动设备上考虑使用原生时间选择器

常见问题

Q: 如何设置默认时间？

A: 使用 default-time 属性，可以设置为单个时间字符串或时间范围数组。

Q: 如何禁用过去的时间？

A: 在 pickerOptions 中配置 disabledDate 函数：

disabledDate(time) {
  return time.getTime() < Date.now() - 8.64e7;
}

Q: 如何自定义时间格式？

A: 使用 format 属性，例如 format="yyyy年MM月dd日 HH时mm分"。

DateTimePicker 组件是 Element UI 中功能丰富且灵活的时间选择解决方案，合理使用可以大大提升表单填写效率和用户体验。

element A Vue.js 2.0 UI Toolkit for Web 项目地址: https://gitcode.com/gh_mirrors/eleme/element