DatePicker 日期选择器

用于选择或输入日期

import { createApp } from 'vue'
import { ElDatePicker } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElDatePicker)

规范

DatePicker 弹出层内的面板与 DatePickerPanel 日期选择器面板使用同一套样式与交互。
范围选择时，结束日期不得早于起始日期；非组合场景由组件自动拦截非法范围。
通过 app.use(DhDesignPc) 安装后，组件内置文案（月份、星期、面板按钮等）默认使用 zh-cn。示例中的 placeholder、shortcuts、演示标题等需自行配置为中文。

选择某一天

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

其他日期单位

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

选择一段时间

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

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

选择月份范围

你当然还可以选择一个月的范围。展开后的面板与 DatePickerPanel 规范示例中的月份范围一致。

年份范围

你可以通过如下例子来学习如何设置一个年份范围选择器。展开后的面板与 DatePickerPanel 规范示例中的年份范围一致。

默认值

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

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

日期格式

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

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

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

注意

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

默认显示日期

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

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

设置自定义前缀的内容

前缀内容可以被自定义。

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

自定义内容

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

自定义图标

使用插槽自定义图标。

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

国际化

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

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

API

属性

属性名	说明	类型	默认
model-value / v-model	绑定值，如果是 `range` 选择器，数组长度应为 2	number / string / Date / array	''
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	显示在输入框中的格式	string	YYYY-MM-DD
popper-class	DatePicker 下拉框的类名	string	—
popper-style	弹出内容的自定义样式	string / object	—
popper-options	自定义 popper 选项，更多请参考 popper.js	object	{}
range-separator	选择范围时的分隔符	string	'-'
default-value	可选，选择器打开时默认显示的时间	object	—
default-time	范围选择时选中日期所使用的当日内具体时刻	object	—
value-format	可选，绑定值的格式。不指定则绑定值为 Date 对象	string	—
id	等价于原生 input `id` 属性	string / array	—
name	等价于原生 input `name` 属性	string / array	''
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	设置快捷选项，需要传入数组对象	array	[]
cell-class-name	设置自定义类名	Function	—
teleported	是否将 date-picker 的下拉列表插入至 body 元素	boolean	true
empty-values	组件的空值配置，参考config-provider	array	—
value-on-clear	清空选项的值，参考config-provider	string / number / boolean / Function	—
fallback-placements	Tooltip 可用的 positions 请查看popper.js 文档	array	['bottom', 'top', 'right', 'left']
placement	下拉框出现的位置	`Placement`	bottom
show-footer	是否显示 footer	boolean	true
show-confirm	是否显示确定按钮	boolean	true
show-week-number	显示周数(除周外)	boolean	false
automatic-dropdown	该属性决定在输入框获得焦点时日期选择面板是否弹出。（在 3.0 版本中，默认值将设置为 false）	boolean	true

事件

事件名	说明	类型
change	当用户确认值或点击外部时触发	Function
blur	在组件 Input 失去焦点时触发	Function
focus	在组件 Input 获得焦点时触发	Function
clear	当点击清除按钮时触发	Function
calendar-change	在日历所选日期更改时触发仅用于 `range`	Function
panel-change	当日期面板改变时触发。	Function
visible-change	当 DatePicker 的下拉列表出现/消失时触发	Function

插槽

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

暴露

方法名	说明	类型
focus	使组件获取焦点	Function
blur	使组件失去焦点	Function
handleOpen	打开日期选择器弹窗	Function
handleClose	关闭日期选择器弹窗	Function

DatePicker 日期选择器 ​

规范 ​

选择某一天 ​

其他日期单位 ​

选择一段时间 ​

选择月份范围 ​

年份范围 ​

默认值 ​

日期格式 ​

默认显示日期 ​

设置自定义前缀的内容 ​

自定义内容 ​

自定义图标 ​

国际化 ​

API ​

属性 ​

事件 ​

插槽 ​

暴露 ​