本文主要是介绍vue element plus DatePicker 日期选择器，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
用于选择或输入日期
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: numbercustomClass: stringdisabled: booleanend: booleaninRange: booleanrow: numberselected: DayjsisCurrent: booleanisSelected: booleanstart: booleantext: numbertimestamp: numberdate: Datedayjs: Dayjstype: '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 |
类型声明#
显示类型声明
源代码#
组件 • 文档
这篇关于vue element plus DatePicker 日期选择器的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
