DatePicker 日期选择器 ​

用于选择或输入日期

选择某一天 ​

以”日“为基本单位，基础的日期选择控件

其他日期单位 ​

通过扩展基础的日期选择，可以选择周、月、年或多个日期

选择一段时间 ​

你可以通过如下例子来学习如何设置一个日期范围选择器。

选择月份范围 ​

你当然还可以选择一个月的范围。

年份范围2.8.0 ​

你可以通过如下例子来学习如何设置一个年份范围选择器。

默认值 ​

日期选择器会在用户未选择任何日期的时候默认展示当天的日期。 你也可以使用 default-value 来修改这个默认的日期。 请注意该值需要是一个可以解析的 new Date() 对象。

如果类型是 daterange, default-value 则会设置左边窗口的默认值。

日期格式 ​

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

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

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

默认显示日期 ​

在选择日期范围时，你可以指定起始日期和结束日期的默认时间。

设置自定义前缀的内容 ​

前缀内容可以被自定义。

自定义内容 ​

弹出框的内容是可以自定义的，在插槽内你可以获取到当前单元格的数据 请注意，自定义内容结构应与默认结构一致，否则可能风格会不一致。

自定义图标 2.8.0 ​

使用插槽自定义图标。

更详细的数据类型，请查看下表

interface DateCell {
  column: number
  customClass: string | undefined
  disabled: boolean
  end: boolean
  inRange: boolean
  row: number
  selected: Dayjs | undefined
  isCurrent: boolean | undefined
  isSelected: boolean
  renderText: string | undefined
  start: boolean
  text: number
  timestamp: number
  date: Date
  dayjs: Dayjs
  type: 'normal' | 'today' | 'week' | 'next-month' | 'prev-month'
}

国际化 ​

由于 Element Plus 的默认语言为英语，如果你需要设置其它的语言，请参考国际化文档。

要注意的是：日期相关的文字（月份，每一周的第一天等等）也都是通过国际化来配置的。

API ​

属性 ​

事件 ​

插槽 ​

暴露 ​

类型声明 ​

import type { Options as PopperOptions } from '@popperjs/core'

type TimeLikeType = 'datetime' | 'datetimerange'

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

源代码 ​

组件 • 样式 • 文档

贡献者 ​