Skip to content

DatePicker 日期选择器

规则

js
{
    type: "DatePicker",
    field: "section_day",
    title: "活动日期",
    value: ['2018-02-20', '2021-02-15'],
    props: {
        type: "datetimerange",
        format: "YYYY-MM-dd HH:mm:ss",
        placeholder:"请选择活动日期",
    }
}

完整配置项:Element_DatePicker,Element_DateTimePicker

value: String | Array

DatePicker

Props

属性名说明类型默认
readonly只读booleanfalse
disabled禁用booleanfalse
size输入框尺寸enum
editable文本框可输入booleantrue
clearable是否显示清除按钮booleantrue
placeholder非范围选择时的占位内容string''
startPlaceholder范围选择时开始日期的占位内容string
endPlaceholder范围选择时结束日期的占位内容string
type显示类型enumdate
format显示在输入框中的格式参见 date formatsYYYY-MM-DD
popperClassDatePicker 下拉框的类名string
popperOptions自定义 popper 选项,更多请参考 popper.jsobject{}
rangeSeparator选择范围时的分隔符string'-'
defaultValue可选,选择器打开时默认显示的时间object
defaultTime范围选择时选中日期所使用的当日内具体时刻object
valueFormat可选,绑定值的格式。 不指定则绑定值为 Date 对象参见 date formats
id等价于原生 input id 属性string / object
name等价于原生 input name 属性string / object''
unlinkPanels在范围选择器里取消两个日期面板之间的联动booleanfalse
prefixIcon自定义前缀图标 如果 type的值是TimeLikeType,那么就是 Clock,不然就是 Calendarstring / object''
clearIcon自定义清除图标string / objectCircleClose
validateEvent是否触发表单验证booleantrue
disabledDate一个用来判断该日期是否被禁用的函数,接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。Function
shortcuts设置快捷选项,需要传入数组对象object[]
cellClassName设置自定义类名Function
teleported是否将 date-picker 的下拉列表插入至 body 元素booleantrue
emptyValues组件的空值配置 参考config-providerarray
valueOnClear清空选项的值 参考 config-providerstring / number / boolean / Function
fallbackPlacementsTooltip 可用的 positions 请查看popper.js 文档arrary
placement下拉框出现的位置Placementbottom

Events

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

Slots

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

DateTimePicker (props.type:'datetime')

Props

属性名说明类型默认值
readonly只读booleanfalse
disabled禁用booleanfalse
editable文本框可输入booleantrue
clearable是否显示清除按钮booleantrue
size输入框尺寸enumdefault
placeholder非范围选择时的占位内容string
startPlaceholder范围选择时开始日期的占位内容string
endElaceholder范围选择时结束日期的占位内容string
arrowControl是否使用箭头进行时间选择booleanfalse
type显示类型enumdate
format显示在输入框中的格式string see date formatsYYYY-MM-DD HH:mm:ss
popperClassDateTimePicker 下拉框的类名string
rangeSeparator选择范围时的分隔符string'-'
defaultValue可选,选择器打开时默认显示的时间object
defaultTime选择日期后的默认时间值。 如未指定则默认时间值为 00:00:00object
valueFormat可选,绑定值的格式。 不指定则绑定值为 Date 对象string see date formats
dateFormat可选,时间选择器下拉列表中显示的日期格式string see date formats
timeFormat可选,时间选择器下拉列表中显示的时间格式string see date formats
id等价于原生 input id 属性string / object
name等价于原生 input name 属性string
unlinkPanels在范围选择器里取消两个日期面板之间的联动booleanfalse
prefixIcon自定义前缀图标组件string / ComponentDate
clearIcon自定义清除图标string / ComponentCircleClose
shortcuts设置快捷选项,需要传入数组对象object
disabledDate一个用来判断该日期是否被禁用的函数,接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。Function
cellClassName设置自定义类名Function
teleported是否将 datetime-picker 的下拉列表插入至 body 元素booleantrue
emptyValues组件的空值配置 参考config-providerarray
valueOnClear清空选项的值 参考 config-providerstring / number / boolean / Function
showNow是否显示 now 按钮booleantrue

Events

事件名说明回调参数
change用户确认选定的值时触发value
blur在组件 Input 失去焦点时触发(e: FocusEvent)
focus在组件 Input 获得焦点时触发(e: FocusEvent)
clear可清空的模式下用户点击清空按钮时触发Function
calendar-change如果用户没有选择日期,那默认展示当前日的月份。 选中日历日期后会执行的回调,只有当 datetimerange 才生效[Date, Date]
visible-change当 DateTimePicker 的下拉列表出现/消失时触发出现时为true,隐藏时为false

Slots

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

FormCreate 是一个开源项目,基于 MIT 许可证发布,欢迎个人和企业用户免费使用