DateTime Picker 日期时间选择器

DateTime Picker 用于在同一个输入控件中选择日期和时间。VISTA B 直接使用 Element Plus 的 el-date-picker，通过 type="datetime" 或 type="datetimerange" 开启日期时间能力，适合定时发送、预约生效、任务排期等场景。

日期和时间点

设置 type="datetime" 后，可以在同一个选择器中同时选择日期和时间。快捷选项 shortcuts 的使用方式与 Date Picker 一致。

DateTime

With shortcuts

<script setup>
import { ref } from 'vue'

const value = ref('')
const shortcuts = [
  {
    text: 'Today',
    value: new Date()
  }
]
</script>

<template>
  <el-date-picker
    v-model="value"
    type="datetime"
    placeholder="Select date and time"
    :shortcuts="shortcuts"
  />
</template>

日期时间格式

通过 format 控制输入框中显示的格式，通过 value-format 控制绑定值的格式。不设置 value-format 时，绑定值为 Date 对象。

value: 2026-05-26 10:30:00

<el-date-picker
  v-model="value"
  type="datetime"
  format="YYYY/MM/DD HH:mm"
  value-format="YYYY-MM-DD HH:mm:ss"
/>

下拉列表中的日期和时间格式

date-format 和 time-format 用于控制面板中的日期、时间展示格式，适合输入框格式和面板格式需要分开管理的场景。

<el-date-picker
  v-model="value"
  type="datetime"
  date-format="YYYY/MM/DD ddd"
  time-format="A hh:mm:ss"
/>

日期和时间范围

设置 type="datetimerange" 后可以选择一段日期时间范围。范围选择器支持开始、结束占位文案、范围分隔符、快捷选项等配置。

To

<el-date-picker
  v-model="value"
  type="datetimerange"
  :shortcuts="shortcuts"
  range-separator="To"
  start-placeholder="Start date"
  end-placeholder="End date"
/>

单个面板

默认范围选择器会显示两个面板。设置 single-panel 后，范围选择器只展示一个面板，适合空间较窄的筛选区。

To

<el-date-picker
  v-model="value"
  type="datetimerange"
  single-panel
/>

默认的起始与结束时刻

使用 datetimerange 进行范围选择时，如果用户只选定日期，默认会使用 00:00:00 作为起止时刻。通过 default-time 可以分别设置开始日期和结束日期的默认时间。

Start and end date time 12:00:00

-

Start 12:00:00, end 08:00:00

-

<script setup>
const defaultTime = [
  new Date(2000, 1, 1, 12, 0, 0),
  new Date(2000, 1, 1, 8, 0, 0)
]
</script>

<template>
  <el-date-picker
    v-model="value"
    type="datetimerange"
    :default-time="defaultTime"
  />
</template>

自定义图标

通过 prefix-icon 和 clear-icon 可以替换输入框前缀图标与清除图标。

Calendar icon

Clock icon and custom clear

<script setup>
import { Calendar } from '@element-plus/icons-vue'
</script>

<template>
  <el-date-picker
    v-model="value"
    type="datetime"
    :prefix-icon="Calendar"
  />
</template>

API

DateTimePicker 属性

属性	说明	类型	默认值
model-value / v-model	绑定值；范围选择器应传入长度为 2 的数组	number / string / Date / array	空
readonly	是否只读	boolean	false
disabled	是否禁用	boolean	false
editable	文本框是否可输入	boolean	true
clearable	是否显示清除按钮	boolean	true
size	输入框尺寸	large / default / small	default
placeholder	非范围选择时的占位内容	string	空
start-placeholder	范围选择时开始日期的占位内容	string	空
end-placeholder	范围选择时结束日期的占位内容	string	空
arrow-control	是否使用箭头进行时间选择	boolean	false
type	显示类型，日期时间场景常用 datetime、datetimerange	date / datetime / datetimerange / daterange 等	date
format	显示在输入框中的格式	string	YYYY-MM-DD HH:mm:ss
popper-class	下拉框的类名	string / object	空
popper-style	下拉框的自定义样式	string / object	空
popper-options	Popper.js 参数	object	{}
fallback-placements	Popper 可用的备用位置	array	['bottom', 'top', 'right', 'left']
placement	下拉框出现的位置	top / bottom / left / right 等	bottom
range-separator	范围选择时的分隔符	string	-
default-value	面板打开时默认显示的时间	Date / [Date, Date]	空
default-time	选择日期后的默认时间值	Date / [Date, Date]	00:00:00
value-format	绑定值的格式；不指定时绑定值为 Date 对象	string	空
date-format	面板中显示的日期格式	string	YYYY-MM-DD
time-format	面板中显示的时间格式	string	HH:mm:ss
id	原生 input 的 id 属性	string / array	空
name	原生 input 的 name 属性	string / array	空
unlink-panels	范围选择器中取消两个日期面板之间的联动	boolean	false
single-panel	范围选择器中只显示一个面板	boolean	false
prefix-icon	自定义前缀图标组件	string / Component	Date
clear-icon	自定义清除图标	string / Component	CircleClose
shortcuts	快捷选项数组	array	空
disabled-date	判断日期是否禁用的函数，参数为 Date，返回 boolean	function	空
disabled-hours	禁止选择部分小时选项	function	空
disabled-minutes	禁止选择部分分钟选项	function	空
disabled-seconds	禁止选择部分秒选项	function	空
cell-class-name	设置日期单元格自定义类名	function	空
teleported	是否将下拉列表插入至 body 元素	boolean	true
empty-values	组件的空值配置	array	空
value-on-clear	清空时设置的值	string / number / boolean / function	空
show-now	是否显示 now 按钮	boolean	true
show-footer	是否显示页脚	boolean	true
show-confirm	是否显示确定按钮	boolean	true
show-week-number	是否显示周数，周选择器除外	boolean	false

DateTimePicker 事件

事件名	说明	类型
change	用户确认值或点击外部时触发	(value) => void
blur	输入框失去焦点时触发	(event: FocusEvent) => void
focus	输入框获得焦点时触发	(event: FocusEvent) => void
clear	点击清除按钮时触发	() => void
calendar-change	日历所选日期更改时触发，仅用于范围类型	(value) => void
panel-change	日期面板改变时触发	(date, mode, view) => void
visible-change	下拉列表出现或隐藏时触发	(visible: boolean) => void

DateTimePicker 插槽

插槽	说明
default	自定义日期单元格内容
range-separator	自定义范围分隔符内容
prev-month	上个月图标
next-month	下个月图标
prev-year	上一年图标
next-year	下一年图标

DateTimePicker 方法

方法名	说明	类型
focus	使组件获取焦点	() => void
blur	使组件失去焦点	() => void

使用提醒

DateTime Picker 仍然是 el-date-picker 的能力集合，关键在于 type。单点选择使用 datetime，范围选择使用 datetimerange；需要把值提交给接口时，建议使用 value-format 固定为后端约定的字符串格式。