用于选择或输入日期
TIP
在 SSR 场景下,您需要将组件包裹在 <client-only></client-only>
之中 (如: Nuxt) 和 SSG (e.g: VitePress).
选择某一天#
以"日"为基本单位,基础的日期选择控件
基本单位由 type
属性指定。 通过 shortcuts
配置快捷选项, 通过 disabledDate
函数,来设置禁用掉的日期。
largedefaultsmall
Default
Picker with quick options
其他日期单位#
通过扩展基础的日期选择,可以选择周、月、年或多个日期
Week
Month
Year
Dates
选择一段时间#
你可以通过如下例子来学习如何设置一个日期范围选择器。
在选择日期范围时,默认情况下左右面板会联动。 如果希望两个面板各自独立切换当前月份,可以使用 unlink-panels
属性解除联动。
largedefaultsmall
Default
To
With quick options
To
选择月份范围#
你当然还可以选择一个月的范围。
在选择月份范围时,默认情况下左右面板会联动。 如果希望两个面板各自独立切换当前年份,可以使用 unlink-panels
属性解除联动。
Default
To
With quick options
To
默认值#
日期选择器会在用户未选择任何日期的时候默认展示当天的日期。 你也可以使用 default-value
来修改这个默认的日期。 请注意该值需要是一个可以解析的 new Date()
对象。
如果类型是 daterange
, default-value
则会设置左边窗口的默认值。
date
daterange
日期格式#
使用format
指定输入框的格式。 使用 value-format
指定绑定值的格式。
默认情况下,组件接受并返回Date
对象。
在 这里 查看 Day.js 支持的所有格式。
WARNING
请一定要注意传入参数的大小写是否正确
Emits Date object
Value:
Use value-format
Value:
Timestamp
Value:
默认显示日期#
在选择日期范围时,你可以指定起始日期和结束日期的默认时间。
默认情况下,开始日期和结束日期的时间部分都是选择日期当日的 00:00:00
。 通过 default-time
可以分别指定开始日期和结束日期的具体时刻。 它接受最多两个日期对象的数组。 其中第一项控制起始日期的具体时刻,第二项控制结束日期的具体时刻。
Component value:
设置自定义前缀的内容#
前缀内容可以被自定义。
当你从其他vue组件或由渲染函数生成的组件中导入组件时, 你可以设置 prefix-icon
属性来定制前缀内容
set prefix-icon
pre
自定义内容#
弹出框的内容是可以自定义的,在插槽内你可以获取到当前单元格的数据
更详细的数据类型,请查看下表
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 的默认语言为英语,如果你需要设置其它的语言,请参考国际化文档。
要注意的是:日期相关的文字(月份,每一周的第一天等等)也都是通过国际化来配置的。
API#
属性#
属性名 | 说明 | 类型 | 默认 |
---|---|---|---|
model-value / v-model | 绑定值,如果它是数组,长度应该是 2 | number / string / object |
'' |
readonly | 只读 | boolean |
false |
disabled | 禁用 | boolean |
false |
size | 输入框尺寸 | enum |
--- |
editable | 文本框可输入 | boolean |
true |
clearable | 是否显示清除按钮 | boolean |
true |
placeholder | 非范围选择时的占位内容 | string |
'' |
start-placeholder | 范围选择时开始日期的占位内容 | string |
--- |
end-placeholder | 范围选择时结束日期的占位内容 | string |
--- |
type | 显示类型 | enum |
date |
format | 显示在输入框中的格式 | 参见 date formats | YYYY-MM-DD |
popper-class | DatePicker 下拉框的类名 | string |
--- |
popper-options | 自定义 popper 选项,更多请参考 popper.js | object |
{} |
range-separator | 选择范围时的分隔符 | string |
'-' |
default-value | 可选,选择器打开时默认显示的时间 | object |
--- |
default-time | 范围选择时选中日期所使用的当日内具体时刻 | object |
--- |
value-format | 可选,绑定值的格式。 不指定则绑定值为 Date 对象 | 参见 date formats | --- |
id | 等价于原生 input id 属性 |
string / object |
--- |
name | 等价于原生 input name 属性 |
string / object |
'' |
unlink-panels | 在范围选择器里取消两个日期面板之间的联动 | boolean |
false |
prefix-icon | 自定义前缀图标 如果 type 的值是TimeLikeType ,那么就是 Clock ,不然就是 Calendar |
string / object |
'' |
clear-icon | 自定义清除图标 | string / object |
CircleClose |
validate-event | 是否触发表单验证 | boolean |
true |
disabled-date | 一个用来判断该日期是否被禁用的函数,接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。 | Function |
--- |
shortcuts | 设置快捷选项,需要传入数组对象 | object |
[] |
cell-class-name | 设置自定义类名 | Function |
--- |
teleported | 是否将 date-picker 的下拉列表插入至 body 元素 | boolean |
true |
事件#
事件名 | 说明 | 类型 |
---|---|---|
change | 用户确认选定的值时触发 | Function |
blur | 在组件 Input 失去焦点时触发 | Function |
focus | 在组件 Input 获得焦点时触发 | Function |
calendar-change | 在日历所选日期更改时触发 | Function |
panel-change | 当日期面板改变时触发。 | Function |
visible-change | 当 DatePicker 的下拉列表出现/消失时触发 | Function |
插槽#
名称 | 说明 |
---|---|
default | 自定义单元格内容 |
range-separator | 自定义范围分割符内容 |
暴露#
插槽名 | 说明 | 类型 |
---|---|---|
focus | 使选择器的输入框获取焦点 | Function |
handleOpen 2.2.16 | 打开日期选择器弹窗 | Function |
handleClose 2.2.16 | 关闭日期选择器弹窗 | Function |
类型声明#
显示类型声明