Element UI 中的 DateTimePicker 日期时间选择器详解

Element UI 中的 DateTimePicker 日期时间选择器详解

【免费下载链接】element A Vue.js 2.0 UI Toolkit for Web 项目地址: https://gitcode.com/gh_mirrors/eleme/element

什么是 DateTimePicker

DateTimePicker 是 Element UI 提供的一个组合式日期时间选择组件，它结合了 DatePicker（日期选择器）和 TimePicker（时间选择器）的功能，允许用户在一个控件中同时选择日期和时间。

基本用法

DateTimePicker 提供了多种使用方式，下面我们来看几个典型示例：

1. 基础日期时间选择

最简单的用法是设置 type 为 datetime，这样用户就可以在一个选择器中同时选择日期和时间：

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

2. 带快捷选项的日期时间选择

为了提高用户体验，我们可以添加快捷选项：

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

在 JavaScript 部分定义快捷选项：

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);
    }
  }]
}

3. 带默认时间的日期时间选择

可以设置默认时间值：

<el-date-picker
  v-model="value3"
  type="datetime"
  placeholder="选择日期和时间"
  default-time="12:00:00">
</el-date-picker>

日期时间范围选择

DateTimePicker 还支持选择日期时间范围：

1. 基础日期时间范围选择

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

2. 带快捷选项的日期时间范围选择

<el-date-picker
  v-model="value2"
  type="datetimerange"
  :picker-options="pickerOptions"
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
  align="right">
</el-date-picker>

JavaScript 部分：

pickerOptions: {
  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]);
    }
  }]
}

高级功能

1. 自定义默认时间值

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

<el-date-picker
  v-model="value2"
  type="datetimerange"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
  :default-time="['12:00:00', '08:00:00']">
</el-date-picker>

2. 禁用特定日期

可以通过 disabledDate 函数禁用某些日期：

pickerOptions: {
  disabledDate(time) {
    // 禁用今天之前的日期
    return time.getTime() < Date.now() - 8.64e7;
  }
}

属性详解

DateTimePicker 提供了丰富的属性来控制组件行为：

属性	说明	类型	可选值	默认值
type	选择器类型	string	year/month/date/datetime/week/datetimerange/daterange	date
format	显示格式	string	如 "yyyy-MM-dd HH:mm:ss"	yyyy-MM-dd HH:mm:ss
value-format	绑定值格式	string	如 "timestamp"	-
readonly	是否只读	boolean	-	false
disabled	是否禁用	boolean	-	false
editable	输入框是否可编辑	boolean	-	true
clearable	是否显示清除按钮	boolean	-	true
size	输入框尺寸	string	large/small/mini	-

事件与方法

DateTimePicker 提供了以下常用事件：

• change：当用户确认选择时触发
• blur：当输入框失去焦点时触发
• focus：当输入框获得焦点时触发

组件方法：

• focus()：让输入框获得焦点

最佳实践

1. 格式化显示：根据用户所在地区选择合适的日期时间格式
2. 设置合理范围：使用 disabledDate 限制可选日期范围
3. 提供快捷选项：为常用日期时间范围添加快捷选项
4. 响应式设计：考虑在不同屏幕尺寸下的显示效果

总结

Element UI 的 DateTimePicker 组件提供了强大而灵活的日期时间选择功能，通过合理配置可以满足各种业务场景的需求。掌握其属性和方法的用法，可以显著提升表单中日期时间选择的用户体验。

【免费下载链接】element A Vue.js 2.0 UI Toolkit for Web 项目地址: https://gitcode.com/gh_mirrors/eleme/element