日期时间选择器（DateTimePicker）

Element-UI 的日期时间选择器组件用于在同一个选择器里选择日期和时间。它由 DatePicker 和 TimePicker 派生，具有丰富的配置选项，以满足不同的使用场景。

提示

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

1. 基本用法

基本语法：在 Vue 组件中使用 <el-date-picker> 标签，并设置 type="datetime" 或 type="datetimerange"，创建一个日期时间选择器。通过 v-model 绑定选择器的值。

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

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

• v-model 绑定：日期时间选择器的值通过 v-model 与 dateTimeValue 绑定。当用户选择日期和时间时，dateTimeValue 会自动更新。
• 显示类型：通过 type 属性指定日期时间选择器的类型，如 datetime、datetimerange 等。
• 

日期时间格式

使用 format 指定输入框的格式；使用 value-format 指定绑定值的格式。

默认情况下，组件接受并返回 Date 对象。以下为可用的格式化字符串示例：

格式	含义	备注	举例
yyyy	年		2017
M	月	不补 0	1
MM	月		01
d	日	不补 0	2
dd	日		02
H	小时	24 小时制；不补 0	3
HH	小时	24 小时制	03
m	分钟	不补 0	4
mm	分钟		04
s	秒	不补 0	5
ss	秒		05
A	AM/PM	仅 format 可用，大写	AM
a	am/pm	仅 format 可用，小写	am
timestamp	JS 时间戳	仅 value-format 可用；组件绑定值为数字	1483326245000
[MM]	不需要格式化字符	使用方括号标识不需要格式化的字符	MM

DateTimePicker 属性

参数	说明	类型	可选值	默认值
value / v-model	绑定值	date(DateTimePicker) / array(DateTimeRangePicker)	—	—
readonly	完全只读	boolean	—	false
disabled	禁用	boolean	—	false
editable	文本框可输入	boolean	—	true
clearable	是否显示清除按钮	boolean	—	true
size	输入框尺寸	string	large, small, mini	—
placeholder	非范围选择时的占位内容	string	—	—
start-placeholder	范围选择时开始日期的占位内容	string	—	—
end-placeholder	范围选择时结束日期的占位内容	string	—	—
time-arrow-control	是否使用箭头进行时间选择	boolean	—	false
type	显示类型	string	year/month/date/week/datetime/datetimerange/daterange	date
format	显示在输入框中的格式	string	见日期格式	yyyy-MM-dd HH:mm:ss
align	对齐方式	string	left, center, right	left
popper-class	DateTimePicker 下拉框的类名	string	—	—
picker-options	当前时间日期选择器特有的选项	object	—	{}
range-separator	选择范围时的分隔符	string	—	'-'
default-value	选择器打开时默认显示的时间	Date	可被 new Date() 解析	—
default-time	选中日期后的默认具体时刻	非范围选择时：string / 范围选择时：string[]	非范围选择时：形如 12:00:00 的字符串；范围选择时：数组，长度为 2，每项值为字符串，形如 12:00:00，第一项指定开始日期的时刻，第二项指定结束日期的时刻。不指定会使用时刻 00:00:00	—
value-format	绑定值的格式。不指定则绑定值为 Date 对象	string	见日期格式	—
name	原生属性	string	—	—
unlink-panels	在范围选择器里取消两个日期面板之间的联动	boolean	—	false
prefix-icon	自定义头部图标的类名	string	—	el-icon-date
clear-icon	自定义清空图标的类名	string	—	el-icon-circle-close

Picker Options

参数	说明	类型	可选值	默认值
shortcuts	设置快捷选项，需要传入 { text, onClick } 对象，用法参考 demo 或下表	Object[]	—	—
disabledDate	设置禁用状态，参数为当前日期，要求返回 Boolean	Function	—	—
cellClassName	设置日期的 className	Function(Date)	—	—
firstDayOfWeek	周起始日	Number	1 到 7	7
onPick	选中日期后会执行的回调，只有当 daterange 或 datetimerange 才生效	Function({ maxDate, minDate })	—	—

Shortcuts

参数	说明	类型	可选值	默认值
text	标题文本	string	—	—
onClick	选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date())	function	—	—

DateTimePicker 事件

事件名称	说明	回调参数
change	用户确认选定的值时触发	组件绑定值。格式与绑定值一致，可受 value-format 控制
blur	当 input 失去焦点时触发	组件实例
focus	当 input 获得焦点时触发	组件实例

DateTimePicker 方法

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

DateTimePicker 插槽

名称	说明
range-separator	自定义分隔符

2. 常见日期时间选择器示例

基础日期时间选择器

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

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

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

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

范围日期时间选择器

通过 type 属性启用日期时间范围选择模式。

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

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

• 范围选择：通过 type="datetimerange" 启用，用户可以选择一段日期时间范围，dateTimeRange 数组将存储用户选择的开始日期时间和结束日期时间。
• 

带快捷选项的日期时间选择器

通过 shortcuts 设置日期时间选择器的快捷选项。

<template>
  <el-date-picker
    v-model="dateTimeValue"
    type="datetime"
    :picker-options="{
      shortcuts: [
        {
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        },
        {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setDate(date.getDate() - 1);
            picker.$emit('pick', date);
          }
        }
      ]
    }"
    placeholder="选择日期和时间"
  ></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      dateTimeValue: '' // 快捷选项的初始值
    };
  }
};
</script>

• 快捷选项：通过 picker-options 中的 shortcuts 属性设置快捷选项，用户可以快速选择常用日期时间。
• 

禁用特定日期时间的选择器

通过 disabledDate 设置禁用特定日期时间。

<template>
  <el-date-picker
    v-model="dateTimeValue"
    type="datetime"
    :picker-options="{
      disabledDate(time) {
        return time.getTime() < Date.now() - 8.64e7;
      }
    }"
    placeholder="选择日期和时间"
  ></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      dateTimeValue: '' // 带禁用日期时间的选择器初始值
    };
  }
};
</script>

• 禁用日期时间：通过 picker-options 中的 disabledDate 方法禁用特定日期时间，例如禁用今天之前的日期时间。
• 

自定义分隔符的范围日期时间选择器

通过 range-separator 插槽自定义范围日期时间选择器的分隔符。

<template>
  <el-date-picker
    v-model="dateTimeRange"
    type="datetimerange"
    start-placeholder="开始日期时间"
    end-placeholder="结束日期时间"
  >
    <template #range-separator>
      到
    </template>
  </el-date-picker>
</template>

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

• 自定义分隔符：通过 range-separator 插槽自定义范围选择的分隔符，使其更符合项目需求。
• 

3. 事件处理示例

监听日期时间变化事件

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

<template>
  <el-date-picker
    v-model="dateTimeValue"
    type="datetime"
    @change="handleChange"
  ></el-date-picker>
</template>

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

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

总结

• 多样化的选择类型：Element-UI 的日期时间选择器支持单日期时间、日期时间范围等多种选择类型。
• 灵活的属性配置：通过 type、picker-options、format 等属性可以自定义日期时间选择器的行为。
• 丰富的事件处理：支持 change、blur、focus 等事件，允许开发者在日期时间值变化时进行自定义处理。
• 快捷选项与禁用日期时间：通过 shortcuts 设置快捷选项，通过 disabledDate 方法禁用特定日期时间，增强用户体验。