DatePicker 日期选择器

使用

用于选择或输入日期

选择某一天

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

基本单位由 type 属性指定。 通过 shortcuts 配置快捷选项， 通过 disabledDate 函数，来设置禁用掉的日期。

便捷型快捷日期选择

当type为daterange或datetimerange时，可以使用showDefaultShortcuts设置快捷选项，快速选择某段时间。

其他日期单位

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

选择一段时间

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

在选择日期范围时，默认情况下左右面板会联动。 如果希望两个面板各自独立切换当前月份，可以使用 unlink-panels 属性解除联动。

选择月份范围

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

在选择月份范围时，默认情况下左右面板会联动。 如果希望两个面板各自独立切换当前年份，可以使用 unlink-panels 属性解除联动。

年份范围

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

在选择范围时，默认情况下左右面板会联动。 如果希望两个面板各自独立切换当前年份，可以使用 unlink-panels 属性解除联动。

默认值

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

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

日期格式

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

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

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

WARNING

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

默认显示日期

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

默认情况下，开始日期和结束日期的时间部分都是选择日期当日的 00:00:00。 通过 default-time 可以分别指定开始日期和结束日期的具体时刻。 它接受最多两个日期对象的数组。 其中第一项控制起始日期的具体时刻，第二项控制结束日期的具体时刻。

设置自定义前缀的内容

前缀内容可以被自定义。

当你从其他vue组件或由渲染函数生成的组件中导入组件时, 你可以设置 prefix-icon 属性来定制前缀内容

自定义内容

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

自定义图标

使用插槽自定义图标。

API

DatePicker Props

参数名	描述	类型	默认值
model-value / v-model	绑定值，如果它是数组，长度应该是2	number | string | Object	-
readonly	是否只读	boolean	false
disabled	是否禁用	boolean	false
editable	文本框是否可编辑	boolean	true
clearable	是否显示清除按钮	boolean	true
show-default-shortcuts	是否显示默认快捷日期	boolean	true
size	输入框尺寸	enum	base
placeholder	输入框占位符	string	-
start-placeholder	开始日期输入框占位符	string	-
end-placeholder	结束日期输入框占位符	string	-
arrow-control	是否使用箭头选择日期	boolean	false
type	日期类型	enum	date
format	输入框日期格式	string	YYYY-MM-DD HH:mm:ss
popper-class	下拉框类名	string	''
range-separator	日期范围分隔符	string	-
default-value	选择器打开时默认显示的时间	object	-
default-time	选择器打开时默认显示的时间，如未指定则默认时间值为00:00:00	object	-
value-format	绑定值的格式。不指定则绑定值为Date对象	string	-
date-format	时间选择器下拉列表中显示的时间格式	string	-
time-format	时间选择器下拉列表中显示的时间格式	string	-
id	input原生id属性	string | [string, string]	-
name	input原生name属性	string | [string, string]	-
unlink-panels	在范围选择器里取消两个日期面板之间的联动	boolean	false
prefix-icon	日期输入框前缀图标	string | Component	-
clear-icon	清除按钮图标	string | Component	-
shortcuts	设置快捷选项，需要传入数组对象	object	-
disabled-date	设置不可选择的日期，接收一个Date对象，返回true表示禁用	Function	-
teleported	是否将弹出层放置于body内	boolean	true
cell-class-name	设置日期单元格的类名，接收一个Date对象	Function	-
showDefaultShortcuts	是否显示默认快捷日期	boolean	true

DatePicker Events

事件名	描述	类型
change	当绑定值变化时触发	Function
blur	当输入框失去焦点时触发	Function
focus	当输入框获得焦点时触发	Function
clear	点击输入框清除图标时触发	Function
calendar-change	当绑定值变化时触发	Function
visible-change	type为datetimerange生效,选中日历日期后触发	Function

DatePicker Methods

方法名	描述	类型
focus	使输入框获得焦点	Function

DatePicker Slots

插槽名	描述	参数
default	自定义单元格内容	-
range-separator	自定义范围分割符内容	-
prev-month	自定义上个月按钮图标	-
next-month	自定义下个月按钮图标	-
prev-year	自定义上一年按钮图标	-
next-year	自定义下一年按钮图标	-