DateTimePicker 日期时间选择器 ​

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

TIP

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

日期和时间点 ​

通过设置type属性为datetime，即可在同一个选择器里同时进行日期和时间的选择。 快捷方式的使用方法与 Date Picker 相同。

Default
With shortcuts
With default time

日期时间格式 ​

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

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

在 这里 查看 Day.js 支持的所有格式。

WARNING

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

Emits Date object
Value:
Use value-format
Value：
Timestamp
Value：

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

使用 date-format 和 time-format 控制下拉列表面板输入框中显示的文本格式

-

日期和时间范围 ​

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

Default
To
With shortcuts
To

单个面板 2.14.0 ​

默认日期选择器范围有两个面板。 如果你想要一个面板设置 single-panel 属性。

single-panel
-

默认的起始与结束时刻 ​

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

Start and end date time 12:00:00
-
Start date time 12:00:00, end date time 08:00:00
-

自定义图标 2.8.0 ​

使用插槽自定义图标。

-

API ​

Attributes ​

<th>
  说明
</th>

<th>
  类型
</th>

<th>
  默认值
</th>

<td>
  绑定值，如果是 <code>range</code> 选择器，数组长度应为 2
</td>

<td>
  ^[number] / ^[string] / ^[Date] / ^[array]<code>number[] \| string[] \| Date[]</code>
</td>

<td>
  ''
</td>

<td>
  只读
</td>

<td>
  ^[boolean]
</td>

<td>
  false
</td>

<td>
  禁用
</td>

<td>
  ^[boolean]
</td>

<td>
  false
</td>

<td>
  文本框可输入
</td>

<td>
  ^[boolean]
</td>

<td>
  true
</td>

<td>
  是否显示清除按钮
</td>

<td>
  ^[boolean]
</td>

<td>
  true
</td>

<td>
  输入框尺寸
</td>

<td>
  ^[enum]<code>'large' \| 'default' \| 'small'</code>
</td>

<td>
  default
</td>

<td>
  非范围选择时的占位内容
</td>

<td>
  ^[string]
</td>

<td>
  —
</td>

<td>
  范围选择时开始日期的占位内容
</td>

<td>
  ^[string]
</td>

<td>
  —
</td>

<td>
  范围选择时结束日期的占位内容
</td>

<td>
  ^[string]
</td>

<td>
  —
</td>

<td>
  是否使用箭头进行时间选择
</td>

<td>
  ^[boolean]
</td>

<td>
  false
</td>

<td>
  显示类型
</td>

<td>
  ^[enum]<code>'year' \| 'month' \| 'date' \| 'datetime' \| 'week' \| 'datetimerange' \| 'daterange'</code>
</td>

<td>
  date
</td>

<td>
  显示在输入框中的格式
</td>

<td>
  ^[string] 参考 <a href="./date-picker.md#date-formats">日期格式</a>
</td>

<td>
  YYYY-MM-DD HH:mm:ss
</td>

<td>
  DateTimePicker 下拉框的类名
</td>

<td>
  ^[string]
</td>

<td>
  —
</td>

<td>
  弹出内容的自定义样式
</td>

<td>
  ^[string] / ^[object]
</td>

<td>
  —
</td>

<td>
  自定义 popper 选项，更多请参考 <a href="https://popper.js.org/docs/v2/">popper.js</a>
</td>

<td>
  ^[object]<code>Partial&lt;PopperOptions&gt;</code>
</td>

<td>
  {}
</td>

<td>
  Tooltip 可用的 positions 请查看<a href="https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements">popper.js 文档</a>
</td>

<td>
  ^[array]<code>Placement[]</code>
</td>

<td>
  ['bottom', 'top', 'right', 'left']
</td>

<td>
  下拉框出现的位置
</td>

<td>
  <code>展示位置</code>
</td>

<td>
  bottom
</td>

<td>
  选择范围时的分隔符
</td>

<td>
  ^[string]
</td>

<td>
  '-'
</td>

<td>
  可选，选择器打开时默认显示的时间
</td>

<td>
  ^[object]<code>Date \| [Date, Date]</code>
</td>

<td>
  —
</td>

<td>
  选择日期后的默认时间值。 如未指定则默认时间值为 <code>00:00:00</code>
</td>

<td>
  ^[object]<code>Date \| [Date, Date]</code>
</td>

<td>
  —
</td>

<td>
  可选，绑定值的格式。 不指定则绑定值为 Date 对象
</td>

<td>
  ^[string] see <a href="https://day.js.org/docs/en/display/format">date formats</a>
</td>

<td>
  —
</td>

<td>
  可选，输入框内部面板中显示的日期格式
</td>

<td>
  ^[string] see <a href="https://day.js.org/docs/en/display/format">date formats</a>
</td>

<td>
  YYYY-MM-DD
</td>

<td>
  可选，输入框内部面板中显示的时间格式
</td>

<td>
  ^[string] see <a href="https://day.js.org/docs/en/display/format">date formats</a>
</td>

<td>
  HH:mm:ss
</td>

<td>
  等价于原生 input <code>id</code> 属性
</td>

<td>
  ^[string] / ^[array]<code>[string, string]</code>
</td>

<td>
  —
</td>

<td>
  等价于原生 input <code>name</code> 属性
</td>

<td>
  ^[string]
</td>

<td>
  —
</td>

<td>
  在范围选择器里取消两个日期面板之间的联动
</td>

<td>
  ^[boolean]
</td>

<td>
  false
</td>

<td>
  在范围选择器中只显示一个面板
</td>

<td>
  ^[boolean]
</td>

<td>
  false
</td>

<td>
  自定义前缀图标组件
</td>

<td>
  ^[string] / <code>Component</code>
</td>

<td>
  Date
</td>

<td>
  自定义清除图标
</td>

<td>
  ^[string] / <code>Component</code>
</td>

<td>
  CircleClose
</td>

<td>
  设置快捷选项，需要传入数组对象
</td>

<td>
  ^[array]<code>Array&lt;{ text: string, value: Date \| Function }&gt;</code>
</td>

<td>
  —
</td>

<td>
  一个用来判断该日期是否被禁用的函数，接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。
</td>

<td>
  ^[Function]<code>(data: Date) =&gt; boolean</code>
</td>

<td>
  —
</td>

<td>
  禁止选择部分小时选项
</td>

<td>
  ^[Function]<code>(role: string, comparingDate?: Dayjs) =&gt; number[]</code>
</td>

<td>
  —
</td>

<td>
  禁止选择部分分钟选项
</td>

<td>
  ^[Function]<code>(hour: number, role: string, comparingDate?: Dayjs) =&gt; number[]</code>
</td>

<td>
  —
</td>

<td>
  禁止选择部分秒选项
</td>

<td>
  ^[Function]<code>(hour: number, minute: number, role: string, comparingDate?: Dayjs) =&gt; number[]</code>
</td>

<td>
  —
</td>

<td>
  设置自定义类名
</td>

<td>
  ^[Function]<code>(data: Date) =&gt; string</code>
</td>

<td>
  —
</td>

<td>
  是否将 datetime-picker 的下拉列表插入至 body 元素
</td>

<td>
  ^[boolean]
</td>

<td>
  true
</td>

<td>
  组件的空值配置， <a href="./config-provider.md#empty-values-configurations">参考config-provider</a>
</td>

<td>
  ^[array]
</td>

<td>
  —
</td>

<td>
  清空选项的值， <a href="./config-provider.md#empty-values-configurations">参考config-provider</a>
</td>

<td>
  ^[string] / ^[number] / ^[boolean] / ^[Function]
</td>

<td>
  —
</td>

<td>
  是否显示 now 按钮
</td>

<td>
  ^[boolean]
</td>

<td>
  true
</td>

<td>
  是否在日期选择器中显示页脚 ^\[enum]<code>'datetime' | 'datetimerange'</code>
</td>

<td>
  ^[boolean]
</td>

<td>
  true
</td>

<td>
  是否显示确定按钮
</td>

<td>
  ^[boolean]
</td>

<td>
  true
</td>

<td>
  显示周数(除周外)
</td>

<td>
  <div id="app">
    <el-button></el-button>
  </div> <script>
  const App = {
    data() {
      return {
        message: "Hello Element Plus",
      };
    },
  };
  const app = Vue.createApp(App);
  app.use(ElementPlus);
  app.mount("#app");
</script>
</td>

<td>
  false
</td>
属性名
model-value / v-model
readonly
disabled
editable
clearable
size
placeholder
start-placeholder
end-placeholder
arrow-control
type
format
popper-class
popper-style
popper-options
fallback-placements ^(2.8.4)
placement ^(2.8.4)
range-separator
default-value
default-time
value-format
date-format ^(2.4.0)
time-format ^(2.4.0)
id
name
unlink-panels
single-panel ^(2.14.0)
prefix-icon
clear-icon
shortcuts
disabled-date
disabled-hours
disabled-minutes
disabled-seconds
cell-class-name
teleported
empty-values ^(2.7.0)
value-on-clear ^(2.7.0)
show-now ^(2.8.7)
show-footer ^(2.10.5)
show-confirm ^(2.11.0)
show-week-number ^(2.10.3)

事件 ​

事件名说明回调参数
change当用户确认值或点击外部时触发Function
blur在组件 Input 失去焦点时触发Function
focus在组件 Input 获得焦点时触发Function
clear 2.7.7当点击清除按钮时触发Function
calendar-change如果用户没有选择日期，那默认展示当前日的月份。 仅用于 rangeFunction
panel-change当日期面板改变时触发。Function
visible-change当 DateTimePicker 的下拉列表出现/消失时触发Function

Slots ​

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

Exposes ​

方法名说明类型
focus使组件获取焦点Function
blur 2.8.7使组件失去焦点Function

Type Declarations ​

Show declarations
ts
type Placement =
  | 'top'
  | 'top-start'
  | 'top-end'
  | 'bottom'
  | 'bottom-start'
  | 'bottom-end'
  | 'left'
  | 'left-start'
  | 'left-end'
  | 'right'
  | 'right-start'
  | 'right-end'

源代码 ​

文档