DatePicker 日期选择器

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

规则

{
    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	是否显示清除按钮	boolean	true
autofocus	自动获取焦点	boolean	false
bordered	是否有边框	boolean	true
dateRender	自定义日期单元格的内容	v-slot:dateRender="{current, today}"	-
disabled	禁用	boolean	false
disabledDate	不可选择的日期	(currentDate: dayjs) => boolean	-
format	设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 dayjs，支持自定义格式	formatType	YYYY-MM-DD
popupClassName	额外的弹出日历 className	string	-
getPopupContainer	定义浮层的容器，默认为 body 上新建 div	function(trigger)	-
inputReadOnly	设置输入框为只读（避免在移动设备上打开虚拟键盘）	boolean	false
locale	国际化配置	object	默认配置
mode	日期面板的状态	time	date
nextIcon	自定义下一个图标	slot	-
open	控制弹层是否展开	boolean	-
picker	设置选择器类型	date	week
placeholder	输入框提示文字	string | [string, string]	-
placement	选择框弹出的位置	bottomLeft bottomRight topLeft topRight	bottomLeft
popupStyle	额外的弹出日历样式	CSSProperties	{}
prevIcon	自定义上一个图标	slot	-
presets	预设时间范围快捷选择	{ label: slot, value: dayjs }[]	-
size	输入框大小，large 高度为 40px，small 为 24px，默认是 32px	large	middle
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	展示的日期格式，配置参考 dayjs	formatType	YYYY-MM-DD
renderExtraFooter	在面板中添加额外的页脚	v-slot:renderExtraFooter="mode"	-
showNow	当设定了 showTime 的时候，面板是否显示“此刻”按钮	boolean	-
showTime	增加时间选择功能	Object | boolean	TimePicker Options
showTime.defaultValue	设置用户选择日期时默认的时分秒，例子	dayjs	dayjs()
showToday	是否展示“今天”按钮	boolean	true

DatePicker 事件

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

DatePicker[picker=year]

参数	说明	类型	默认值
format	展示的日期格式，配置参考 dayjs	formatType	YYYY

DatePicker[picker=quarter]

参数	说明	类型	默认值
format	展示的日期格式，配置参考 dayjs	formatType	YYYY-\QQ

DatePicker[picker=month]

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

DatePicker[picker=week]

参数	说明	类型	默认值
format	展示的日期格式，配置参考 dayjs	formatType	YYYY-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	展示的日期格式	formatType	YYYY-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|boolean	TimePicker 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])