Skip to content

DatePicker 日期选择器

DatePicker、MonthPicker、RangePicker, WeekPicker组件都通过 datePicker 生成,可配合props.type生成不同的组件

规则

js
{
    type: "DatePicker",
    field: "section_day",
    title: "活动日期",
    value: ['2018-02-20 12:12:12', '2018-03-20 12:12:12'],
    props: {
        type: "datetimerange",
        placeholder:"请选择活动日期",
    }
}

参考:Ant-design-vue_DatePicker

value: String | Array

Props

以下 API 为 DatePicker、MonthPicker、RangePicker, WeekPicker 共享的 API。

参数说明类型默认值
type组件类型'date', 'month', 'week', 'range''date'
allowClear是否显示清除按钮booleantrue
autofocus自动获取焦点booleanfalse
bordered是否有边框booleantrue
dateRender自定义日期单元格的内容v-slot:dateRender="{current, today}"-
disabled禁用booleanfalse
disabledDate不可选择的日期(currentDate: dayjs) => boolean-
format设置日期格式,为数组时支持多格式匹配,展示以第一个为准。配置参考 dayjs,支持自定义格式formatTypeYYYY-MM-DD
popupClassName额外的弹出日历 classNamestring-
getPopupContainer定义浮层的容器,默认为 body 上新建 divfunction(trigger)-
inputReadOnly设置输入框为只读(避免在移动设备上打开虚拟键盘)booleanfalse
locale国际化配置object默认配置
mode日期面板的状态timedate
nextIcon自定义下一个图标slot-
open控制弹层是否展开boolean-
picker设置选择器类型dateweek
placeholder输入框提示文字string | [string, string]-
placement选择框弹出的位置bottomLeft bottomRight topLeft topRightbottomLeft
popupStyle额外的弹出日历样式CSSProperties{}
prevIcon自定义上一个图标slot-
presets预设时间范围快捷选择{ label: slot, value: dayjs }[]-
size输入框大小,large 高度为 40px,small 为 24px,默认是 32pxlargemiddle
status设置校验状态'error' | 'warning'-
suffixIcon自定义的选择框后缀图标v-slot:suffixIcon-
superNextIcon自定义 << 切换图标slot-
superPrevIcon自定义 >> 切换图标slot-
valueFormat可选,绑定值的格式,对 value、defaultValue、defaultPickerValue 起作用。不指定则绑定值为 dayjs 对象string,具体格式-

共有的事件

事件名称说明回调参数
openChange弹出日历和关闭日历的回调function(status)
panelChange日期面板变化时的回调function(value, mode)-

DatePicker

参数说明类型默认值
defaultPickerValue默认面板日期dayjs-
disabledTime不可选择的时间function(date)-
format展示的日期格式,配置参考 dayjsformatTypeYYYY-MM-DD
renderExtraFooter在面板中添加额外的页脚v-slot:renderExtraFooter="mode"-
showNow当设定了 showTime 的时候,面板是否显示“此刻”按钮boolean-
showTime增加时间选择功能Object | booleanTimePicker Options
showTime.defaultValue设置用户选择日期时默认的时分秒,例子dayjsdayjs()
showToday是否展示“今天”按钮booleantrue

DatePicker 事件

事件名称说明回调参数
change时间发生变化的回调function(date: dayjs | string, dateString: string)
ok点击确定按钮的回调function(date: dayjs | string)

DatePicker[picker=year]

参数说明类型默认值
format展示的日期格式,配置参考 dayjsformatTypeYYYY

DatePicker[picker=quarter]

参数说明类型默认值
format展示的日期格式,配置参考 dayjsformatTypeYYYY-\QQ

DatePicker[picker=month]

参数说明类型默认值
format展示的日期格式,配置参考 dayjsformatTypeYYYY-MM
monthCellRender自定义的月份内容渲染方法v-slot:monthCellRender="{current, locale}"-

DatePicker[picker=week]

参数说明类型默认值
format展示的日期格式,配置参考 dayjsformatTypeYYYY-wo

RangePicker

参数说明类型默认值
allowEmpty允许起始项部分为空[boolean, boolean][false, false]
dateRender自定义日期单元格的内容。v-slot:dateRender="{current: dayjs, today: dayjs, info: { range: start |end }}"
defaultPickerValue默认面板日期dayjs[]-
disabled禁用起始项[boolean, boolean]-
disabledTime不可选择的时间function(date: dayjs, partial: start | end)
format展示的日期格式formatTypeYYYY-MM-DD HH:mm:ss
presets预设时间范围快捷选择{ label: slot, value: dayjs[] }[]-
ranges预设时间范围快捷选择{ [range: string]: dayjs[] } | { [range: string]: () => dayjs[] }-
renderExtraFooter在面板中添加额外的页脚v-slot:renderExtraFooter="mode"-
separator设置分隔符string | v-slot:separator<SwapRightOutlined />
showTime增加时间选择功能Object|booleanTimePicker Options
showTime.defaultValue设置用户选择日期时默认的时分秒,例子dayjs[][dayjs(), dayjs()]

RangePicker 事件

事件名称说明回调参数
calendarChange待选日期发生变化的回调function(dates: [dayjs, dayjs] | [string, string], dateStrings: [string, string], info: { range:start|end })
change日期范围发生变化的回调function(dates: [dayjs, dayjs] | [string, string], dateStrings: [string, string])
ok点击确定按钮的回调function(dates: [dayjs, dayjs] | [string, string])

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