DateTimePicker 日期时间选择器

在同一个选择器里选择日期和时间

TIP

日期时间选择器来自日期选择器和时间选择器的组合。 关于属性的更详细解释，请参阅日期选择器和时间选择器。

日期和时间点

设置 type 为 datetimerange 即可选择日期和时间范围。 快捷方式的使用方法与 Date Picker 相同。

DateTime Picker 日期时间选择器 - 图1

  1. <template>
  2.   <div class="demo-datetime-picker">
  3.     <div class="block">
  4.       <span class="demonstration">Default</span>
  5.       <el-date-picker
  6.         v-model="value1"
  7.         type="datetime"
  8.         placeholder="Select date and time"
  9.       />
  10.     </div>
  11.     <div class="block">
  12.       <span class="demonstration">With shortcuts</span>
  13.       <el-date-picker
  14.         v-model="value2"
  15.         type="datetime"
  16.         placeholder="Select date and time"
  17.         :shortcuts="shortcuts"
  18.       />
  19.     </div>
  20.     <div class="block">
  21.       <span class="demonstration">With default time</span>
  22.       <el-date-picker
  23.         v-model="value3"
  24.         type="datetime"
  25.         placeholder="Select date and time"
  26.         :default-time="defaultTime"
  27.       />
  28.     </div>
  29.   </div>
  30. </template>
  32. <script lang="ts" setup>
  33. import { ref } from 'vue'
  35. const value1 = ref('')
  36. const value2 = ref('')
  37. const value3 = ref('')
  38. const defaultTime = new Date(2000, 1, 1, 12, 0, 0)
  40. const shortcuts = [
  41.   {
  42.     text: 'Today',
  43.     value: new Date(),
  44.   },
  45.   {
  46.     text: 'Yesterday',
  47.     value: () => {
  48.       const date = new Date()
  49.       date.setTime(date.getTime() - 3600 * 1000 * 24)
  50.       return date
  51.     },
  52.   },
  53.   {
  54.     text: 'A week ago',
  55.     value: () => {
  56.       const date = new Date()
  57.       date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
  58.       return date
  59.     },
  60.   },
  61. ]
  62. </script>
  63. <style scoped>
  64. .demo-datetime-picker {
  65.   display: flex;
  66.   width: 100%;
  67.   padding: 0;
  68.   flex-wrap: wrap;
  69. }
  70. .demo-datetime-picker .block {
  71.   padding: 30px 0;
  72.   text-align: center;
  73.   border-right: solid 1px var(--el-border-color);
  74.   flex: 1;
  75. }
  76. .demo-datetime-picker .block:last-child {
  77.   border-right: none;
  78. }
  79. .demo-datetime-picker .demonstration {
  80.   display: block;
  81.   color: var(--el-text-color-secondary);
  82.   font-size: 14px;
  83.   margin-bottom: 20px;
  84. }
  85. </style>

日期时间格式

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

默认情况下，组件接受并返回Date对象。

在 这里 DateTime Picker 日期时间选择器 - 图2 查看 Day.js 支持的 format 参数。

WARNING

请一定要注意传入参数的大小写是否正确

DateTime Picker 日期时间选择器 - 图3

  1. <template>
  2.   <div class="demo-datetime-picker">
  3.     <div class="block">
  4.       <span class="demonstration">Emits Date object</span>
  5.       <div class="demonstration">Value: {{ value1 }}</div>
  6.       <el-date-picker
  7.         v-model="value1"
  8.         type="datetime"
  9.         placeholder="Pick a Date"
  10.         format="YYYY/MM/DD HH:mm:ss"
  11.       />
  12.     </div>
  13.     <div class="block">
  14.       <span class="demonstration">Use value-format</span>
  15.       <div class="demonstration">Value：{{ value2 }}</div>
  16.       <el-date-picker
  17.         v-model="value2"
  18.         type="datetime"
  19.         placeholder="Pick a Date"
  20.         format="YYYY/MM/DD hh:mm:ss"
  21.         value-format="YYYY-MM-DD h:m:s a"
  22.       />
  23.     </div>
  24.     <div class="block">
  25.       <span class="demonstration">Timestamp</span>
  26.       <div class="demonstration">Value：{{ value3 }}</div>
  27.       <el-date-picker
  28.         v-model="value3"
  29.         type="datetime"
  30.         placeholder="Pick a Date"
  31.         format="YYYY/MM/DD hh:mm:ss"
  32.         value-format="x"
  33.       />
  34.     </div>
  35.   </div>
  36. </template>
  38. <script lang="ts" setup>
  39. import { ref } from 'vue'
  41. const value1 = ref('')
  42. const value2 = ref('')
  43. const value3 = ref('')
  44. </script>
  45. <style scoped>
  46. .demo-datetime-picker {
  47.   display: flex;
  48.   width: 100%;
  49.   padding: 0;
  50.   flex-wrap: wrap;
  51. }
  52. .demo-datetime-picker .block {
  53.   padding: 30px 0;
  54.   text-align: center;
  55.   border-right: solid 1px var(--el-border-color);
  56.   flex: 1;
  57. }
  58. .demo-datetime-picker .block:last-child {
  59.   border-right: none;
  60. }
  61. .demo-datetime-picker .demonstration {
  62.   display: block;
  63.   color: var(--el-text-color-secondary);
  64.   font-size: 14px;
  65.   margin-bottom: 20px;
  66. }
  67. </style>

日期和时间范围

设置type为datetimerange即可选择日期和时间范围

DateTime Picker 日期时间选择器 - 图4

  1. <template>
  2.   <div class="block">
  3.     <span class="demonstration">Default</span>
  4.     <el-date-picker
  5.       v-model="value1"
  6.       type="datetimerange"
  7.       range-separator="To"
  8.       start-placeholder="Start date"
  9.       end-placeholder="End date"
  10.     />
  11.   </div>
  12.   <div class="block">
  13.     <span class="demonstration">With shortcuts</span>
  14.     <el-date-picker
  15.       v-model="value2"
  16.       type="datetimerange"
  17.       :shortcuts="shortcuts"
  18.       range-separator="To"
  19.       start-placeholder="Start date"
  20.       end-placeholder="End date"
  21.     />
  22.   </div>
  23. </template>
  25. <script lang="ts" setup>
  26. import { ref } from 'vue'
  28. const value1 = ref([
  29.   new Date(2000, 10, 10, 10, 10),
  30.   new Date(2000, 10, 11, 10, 10),
  31. ])
  32. const value2 = ref('')
  34. const shortcuts = [
  35.   {
  36.     text: 'Last week',
  37.     value: () => {
  38.       const end = new Date()
  39.       const start = new Date()
  40.       start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
  41.       return [start, end]
  42.     },
  43.   },
  44.   {
  45.     text: 'Last month',
  46.     value: () => {
  47.       const end = new Date()
  48.       const start = new Date()
  49.       start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
  50.       return [start, end]
  51.     },
  52.   },
  53.   {
  54.     text: 'Last 3 months',
  55.     value: () => {
  56.       const end = new Date()
  57.       const start = new Date()
  58.       start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
  59.       return [start, end]
  60.     },
  61.   },
  62. ]
  63. </script>
  64. <style scoped>
  65. .block {
  66.   padding: 30px 0;
  67.   text-align: center;
  68.   border-right: solid 1px var(--el-border-color);
  69.   flex: 1;
  70. }
  71. .block:last-child {
  72.   border-right: none;
  73. }
  74. .block .demonstration {
  75.   display: block;
  76.   color: var(--el-text-color-secondary);
  77.   font-size: 14px;
  78.   margin-bottom: 20px;
  79. }
  80. </style>

默认的起始与结束时刻

使用datetimerange进行范围选择时，在日期选择面板中选定起始与结束的日期，默认会使用该日期的00:00:00作为起始与结束的时刻；通过选项default-time可以控制选中起始与结束日期时所使用的具体时刻。 我们可以使用 default-time 属性来控制它。 default-time接受一个数组，其中第一项控制起始日期的具体时刻，第二项控制结束日期的具体时刻。 第一项控制开始日期的时间值，第二项控制结束日期的时间值。

DateTime Picker 日期时间选择器 - 图5

  1. <template>
  2.   <div class="block">
  3.     <span class="demonstration">Start date time 12:00:00</span>
  4.     <el-date-picker
  5.       v-model="value1"
  6.       type="datetimerange"
  7.       start-placeholder="Start Date"
  8.       end-placeholder="End Date"
  9.       :default-time="defaultTime1"
  10.     />
  11.   </div>
  12.   <div class="block">
  13.     <span class="demonstration"
  14.       >Start date time 12:00:00, end date time 08:00:00</span
  15.     >
  16.     <el-date-picker
  17.       v-model="value2"
  18.       type="datetimerange"
  19.       start-placeholder="Start Date"
  20.       end-placeholder="End Date"
  21.       :default-time="defaultTime2"
  22.     />
  23.   </div>
  24. </template>
  26. <script lang="ts" setup>
  27. import { ref } from 'vue'
  29. const value1 = ref('')
  30. const value2 = ref('')
  32. const defaultTime1 = [new Date(2000, 1, 1, 12, 0, 0)] // '12:00:00'
  33. const defaultTime2 = [
  34.   new Date(2000, 1, 1, 12, 0, 0),
  35.   new Date(2000, 2, 1, 8, 0, 0),
  36. ] // '12:00:00', '08:00:00'
  37. </script>
  38. <style scoped>
  39. .block {
  40.   padding: 30px 0;
  41.   text-align: center;
  42.   border-right: solid 1px var(--el-border-color);
  43.   flex: 1;
  44. }
  45. .block:last-child {
  46.   border-right: none;
  47. }
  48. .block .demonstration {
  49.   display: block;
  50.   color: var(--el-text-color-secondary);
  51.   font-size: 14px;
  52.   margin-bottom: 20px;
  53. }
  54. </style>

属性

属性说明类型可选值默认值
model-value / v-model选中项绑定值date(DateTimePicker) / array(DateTimeRangePicker)——
readonly只读boolean—false
disabled禁用boolean—false
editable文本框可输入boolean—true
clearable是否显示清除按钮boolean—true
size输入框尺寸stringlarge/default/smalldefault
placeholder非范围选择时的占位内容string——
start-placeholder范围选择时开始日期的占位内容string——
end-placeholder范围选择时结束日期的占位内容string——
time-arrow-controlwhether to pick time using arrow buttonsboolean—false
type显示类型stringyear/month/date/datetime/ week/datetimerange/daterangedate
format显示在输入框中的格式stringsee date formatsYYYY-MM-DD HH:mm:ss
popper-classDateTimePicker 下拉框的类名string——
range-separator选择范围时的分隔符string-‘-‘
default-value可选，选择器打开时默认显示的时间Date可被new Date()解析的所有值—
default-time选中日期后的默认具体时刻若为非时间范围: Date / 若为时间范围: Date[]非范围选择时：Date 对象；范围选择时：数组，长度为 2，每项值为 Date 对象，第一项指定开始日期的时刻，第二项指定结束日期的时刻。 不指定会使用时刻 00:00:00—
value-format可选，绑定值的格式。 不指定则绑定值为 Date 对象string查看 日期格式 DateTime Picker 日期时间选择器 - 图6—
id等价于原生 input id 属性string / array(string)字符串 id=”my-date” 对应单个日期或数组 :id=”[‘my-range-start’, ‘my-range-end’]” 对应日期范围-
name等价于原生 input name 属性string——
unlink-panels在范围选择器里取消两个日期面板之间的联动boolean—false
prefix-icon自定义前缀图标string | Component—Date
clear-icon自定义清除图标string | Component—CircleClose
shortcuts设置快捷选项，需要传入数组对象object[{ text: string, value: date / function }]——
disabled-date一个用来判断该日期是否被禁用的函数，接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。Function(Date)——
cell-class-name设置自定义类名Function(Date)——
teleported是否将 datetime-picker 的下拉列表插入至 body 元素booleantrue / falsetrue

事件

事件名说明回调参数
change用户确认选定的值时触发value
blur在组件 Input 失去焦点时触发(e: FocusEvent)
focus在组件 Input 获得焦点时触发(e: FocusEvent)
calendar-change如果用户没有选择日期，那默认展示当前日的月份。 选中日历日期后会执行的回调，只有当 datetimerange 才生效[Date, Date]
visible-change当 DateTimePicker 的下拉列表出现/消失时触发出现时为true，隐藏时为false

方法

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

插槽

插槽名说明
default自定义单元格内容
range-separator自定义范围分割符内容

源代码

文档 DateTime Picker 日期时间选择器 - 图7