DatePicker 日期选择器

用于选择或输入日期

选择某一天

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

其他日期单位

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

选择一段时间

可在一个选择器中便捷地选择一个时间范围

选择月份范围

可在一个选择器中便捷地选择一个月份范围

默认值

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

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

日期格式

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

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

这里 查看 Day.js 支持的 format 参数。

WARNING

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

默认显示日期

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

设置自定义前缀的内容

前缀内容可以被自定义。

自定义内容

弹出框的内容是可以自定义的,在插槽内你可以获取到当前单元格的数据

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

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

国际化

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

要注意的是:日期相关的文字(月份,每一周的第一天等等)也都是通过国际化来配置的。

属性

属性说明类型可选值默认值
model-value / v-model选中项绑定值date(DatePicker) / array(DateRangePicker)
readonly只读booleanfalse
disabled禁用booleanfalse
size输入框尺寸stringlarge/default/smalldefault
editable文本框可输入booleantrue
clearable是否显示清除按钮booleantrue
placeholder非范围选择时的占位内容string
start-placeholder范围选择时开始日期的占位内容string
end-placeholder范围选择时结束日期的占位内容string
type显示类型stringyear/month/date/dates/datetime/ week/datetimerange/daterange/ monthrangedate
format显示在输入框中的格式string请查看 date formatsYYYY-MM-DD
popper-classDatePicker 下拉框的类名string
range-separator选择范围时的分隔符string'-'
default-value可选,选择器打开时默认显示的时间Dateanything accepted by new Date()
default-time范围选择时选中日期所使用的当日内具体时刻Date[]长度为2的数组,每一项都是Date对象。 第一项是起始日期,第二项是终止日期
value-format可选,绑定值的格式。 不指定则绑定值为 Date 对象string请查阅 date formats
id等价于原生 id 属性string / array(string)字符串 id="my-date" 对应单个日期或数组 :id="['my-range-start', 'my-range-end']" 对应日期范围-
name等价于原生 name 属性string
unlink-panels在范围选择器里取消两个日期面板之间的联动booleanfalse
prefix-icon自定义前缀图标string / ComponentDate
clear-icon自定义清除图标string / ComponentCircleClose
validate-event输入时是否触发表单的校验boolean-true
disabled-date一个用来判断该日期是否被禁用的函数,接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。function
shortcuts设置快捷选项,需要传入数组对象object[{ text: string, value: date / function }]
cell-class-name设置自定义类名Function(Date)
teleported是否将 date-picker 的下拉列表插入至 body 元素booleantrue / falsetrue

事件

事件名说明回调参数
change用户确认选定的值时触发(val: typeof v-model)
blur在组件 Input 失去焦点时触发(e: FocusEvent)
focus在组件 Input 获得焦点时触发(e: FocusEvent)
calendar-change如果用户没有选择日期,那默认展示当前日的月份。 你可以使用 default-value 来设置成其他的日期。(val: [Date, Date])
panel-change当日期面板改变时触发。(date, mode, view)
visible-change当 DatePicker 的下拉列表出现/消失时触发(visibility: boolean)

方法

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

插槽

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

源代码

组件文档

贡献者