fes.js/packages/fes-doc/docs/ui/datePicker.md

pageClass
comp-page-class

DatePicker 日期选择器

概述

当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。

代码示例

选个单个日期

可以选择单选single、多选multiple、区间选择range，默认为 single。

设置position，可以选择单选bottomLeft、bottomRight、topLeft、topRight，默认为 bottomLeft。

同样支持v-model、range、format等配置

通过 format 控制日期类型：

YYYY 年份、YYYY-MM 月份、YYYY-MM-DD 日期、 YYYY-MM-DD HH:mm 时间精确到分钟、YYYY-MM-DD HH:mm:ss 时间精确到秒。

默认为 YYYY-MM-DD。

可选择的时间范围为：2020-7-1 到 2020-8-31

选择的时间范围不超过3天：

今天不能被选择：

只能选择今天：

禁止每个月 3 号：

可以通过多种方式实现时间禁用。

minDate可选的最小时间，maxDate可选的最大时间。

maxRange：需要配合range使用，设置可选时间范围，格式为 2D（2天）、2M（2个月）、2Y（2年）

disable和enable: 子项可以是时间（Date对象）、函数、对象的数组。

以disable举例：

当子项是Date对象时，禁用此日期；

当子项是函数时，参数为日期，通过函数执行结果判断是否禁用；

当子项是{from, to} 格式的对象时，表示从from日期到to日期都禁用

disabledDate: 禁用函数，参数为日期，通过函数执行结果判断是否禁用

设置readonly 只读

设置disabled 禁用

API

InputDatePicker 和 DatePicker 共有的 Props

属性	说明	类型	默认值
value	日期的值，可以使用v-model实现数据的双向绑定	Date、Array、Number	null
model	模式，可选值有single、range、 multiple	String	single
format	时间格式：YYYY-MM-DD HH:mm:ss	String	YYYY-MM-DD
maxDate	最大可选时间	Date	null
minDate	最小可选时间	Date	null
maxRange	最大可选区间，格式为 /\d+[DMY]/	String	null
disable	禁止的时间，格式可以为：[Date, Function, {from: Date, to: Date}]	Array	null
enable	可用的时间，格式可以为：[Date, Function, {from: Date, to: Date}]	Array	null
disabledDate	禁止时间函数，参数为对应的时间 Date，执行结果为true则禁止	Function	null
rangeSeparator	区间选择中间的分割符号,只在 model 为 range 时生效	String	～
showConfirm	是否显示确认按钮，在多选强制为true，其他情况默认为 false	Boolean	-
onlyMonth	是否只选择月份(兼容老的API，尽量使用 format代替)	Boolean	false
enableTime	是否显示时间(兼容老的API，尽量使用 format代替)	Boolean	false
enableSeconds	是否显示秒(兼容老的API，尽量使用 format代替)	Boolean	false

InputDatePicker Props

属性	说明	类型	默认值
placeholder	未选择时间时的提示语	String	请选择日期
icon	输入框左边的 icon	String	calendar
clearable	是否显示清除 icon	Boolean	false
position	弹窗的位置，会根据窗口大小自适应，可选值bottomLeft bottomRight topLeft topRight	String	bottomLeft
readonly	是否只读	Boolean	false
disabled	是否禁用	Boolean	false

InputDatePicker Events

事件名	说明	返回值
on-input	输入时触发	(value) => void
on-change	值改变时触发	(value) => void
on-enter	焦点在input, 按下enter键触发	(event) => void
on-focus	获取焦点时触发	(event) => void
on-blur	失去焦点时触发	(event) => void
on-blur	失去焦点时触发	(event) => void

DatePicker Props

属性	说明	类型	默认值
inline	是否脱离文档流，ture则用relative定位，false则用absolute定位	Boolean	true

DatePicker Events

事件名	说明	返回值
on-change	值改变时触发	(value) => void
on-finish	选择结束触发	() => void