DatePicker

DatePicker, MonthPicker, RangePicker, and WeekPicker components are all generated through datePicker. Use props.type to generate different components.

Rules

Basic Example

const rule = {
    type: "DatePicker",
    field: "section_day",
    title: "Activity Date",
    value: ['2018-02-20 12:12:12', '2018-03-20 12:12:12'],
    props: {
        type: "datetimerange",
        placeholder:"Please select activity date",
    }
}

Props Configuration Examples

Date Selection

const rule = {
    type: "DatePicker",
    field: "date",
    title: "Activity Date",
    value: "",
    props: {
        type: "date",
        format: "YYYY-MM-DD",
        placeholder: "Please select date",
        allowClear: true,
    }
}

Date Time Selection

const rule = {
    type: "DatePicker",
    field: "datetime",
    title: "Activity Time",
    value: "",
    props: {
        type: "date",
        showTime: true,
        format: "YYYY-MM-DD HH:mm:ss",
        placeholder: "Please select date and time",
    }
}

Date Range Selection

const rule = {
    type: "DatePicker",
    field: "dateRange",
    title: "Activity Period",
    value: [],
    props: {
        type: "range",
        format: "YYYY-MM-DD",
        placeholder: ["Start Date", "End Date"],
    }
}

Limit Date Range

const rule = {
    type: "DatePicker",
    field: "date",
    title: "Appointment Date",
    value: "",
    props: {
        type: "date",
        format: "YYYY-MM-DD",
        disabledDate: (current) => {
            // Disable dates before today
            return current && current < dayjs().startOf('day');
        },
        placeholder: "Please select date",
    }
}

Events Examples

Listen to Date Changes

const rule = {
    type: "DatePicker",
    field: "date",
    title: "Activity Date",
    value: "",
    props: {
        type: "date",
        format: "YYYY-MM-DD",
        placeholder: "Please select date",
    },
    on: {
        change: (date, dateString) => {
            console.log('Date changed:', date, dateString);
        },
        ok: (value) => {
            console.log('Clicked OK:', value);
        },
    },
}

Reference: Ant-design-vue_DatePicker

value: String | Array

Props

The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicker.

Parameter	Description	Type	Default
type	Component type	'date', 'month', 'week', 'range'	'date'
allowClear	Whether to show clear button	boolean	true
autofocus	Auto focus	boolean	false
bordered	Whether to have border	boolean	true
dateRender	Custom date cell content	v-slot:dateRender="{current, today}"	-
disabled	Disabled	boolean	false
disabledDate	Dates that cannot be selected	(currentDate: dayjs) => boolean	-
format	Set date format, supports multiple format matching when array, display uses first one. Configuration reference dayjs, supports custom format	formatType	YYYY-MM-DD
popupClassName	Additional popup calendar className	string	-
getPopupContainer	Define popup container, default creates new div on body	function(trigger)	-
inputReadOnly	Set input box to read-only (avoid opening virtual keyboard on mobile devices)	boolean	false
locale	Internationalization configuration	object	Default config
mode	State of date panel	time | date | year | decade	-
nextIcon	Custom next icon	slot	-
open	Control whether popup is expanded	boolean	-
picker	Set picker type	date | week | quarter | year	date
placeholder	Input box hint text	string | [string, string]	-
placement	Position where selector pops up	bottomLeft bottomRight topLeft topRight	bottomLeft
popupStyle	Additional popup calendar style	CSSProperties	{}
prevIcon	Custom previous icon	slot	-
presets	Preset time range quick selection	{ label: slot, value: dayjs }[]	-
size	Input box size, large height is 40px, small is 24px, default is 32px	large | middle | -
status	Set validation status	'error' | 'warning'	-
suffixIcon	Custom suffix icon for selector	v-slot:suffixIcon	-
superNextIcon	Custom << switch icon	slot	-
superPrevIcon	Custom >> switch icon	slot	-
valueFormat	Optional, format of bound value, affects value, defaultValue, defaultPickerValue. If not specified, bound value is dayjs object	string, Specific format	-

Common Events

Event Name	Description	Callback Parameters
openChange	Callback when popup calendar opens and closes	function(status)
panelChange	Callback when date panel changes	function(value, mode)	-

DatePicker

Parameter	Description	Type	Default
defaultPickerValue	Default panel date	dayjs	-
disabledTime	Time that cannot be selected	function(date)	-
format	Display date format, configuration reference dayjs	formatType	YYYY-MM-DD
renderExtraFooter	Add extra footer in panel	v-slot:renderExtraFooter="mode"	-
showNow	When showTime is set, whether panel displays "Now" button	boolean	-
showTime	Add time selection function	Object | boolean	TimePicker Options
showTime.defaultValue	Set default hour, minute, second when user selects date, example	dayjs	dayjs()
showToday	Whether to display "Today" button	boolean	true

DatePicker Events

Event Name	Description	Callback Parameters
change	Callback when time changes	function(date: dayjs | string, dateString: string)
ok	Callback when clicking OK button	function(date: dayjs | string)

DatePicker[picker=year]

Parameter	Description	Type	Default
format	Display date format, configuration reference dayjs	formatType	YYYY

DatePicker[picker=quarter]

Parameter	Description	Type	Default
format	Display date format, configuration reference dayjs	formatType	YYYY-\QQ

DatePicker[picker=month]

Parameter	Description	Type	Default
format	Display date format, configuration reference dayjs	formatType	YYYY-MM
monthCellRender	Custom month content render method	v-slot:monthCellRender="{current, locale}"	-

DatePicker[picker=week]

Parameter	Description	Type	Default
format	Display date format, configuration reference dayjs	formatType	YYYY-wo

RangePicker

Parameter	Description	Type	Default
allowEmpty	Allow start item to be partially empty	[boolean, boolean]	[false, false]
dateRender	Custom date cell content.	v-slot:dateRender="{current: dayjs, today: dayjs, info: { range: start |end }}"
defaultPickerValue	Default panel date	dayjs[]	-
disabled	Disable start item	[boolean, boolean]	-
disabledTime	Time that cannot be selected	function(date: dayjs, partial: start | end)
format	Display date format	formatType	YYYY-MM-DD HH:mm:ss
presets	Preset time range quick selection	{ label: slot, value: dayjs[] }[]	-
ranges	Preset time range quick selection	{ [range: string]: dayjs[] } | { [range: string]: () => dayjs[] }	-
renderExtraFooter	Add extra footer in panel	v-slot:renderExtraFooter="mode"	-
separator	Set separator	string | v-slot:separator	<SwapRightOutlined />
showTime	Add time selection function	Object|boolean	TimePicker Options
showTime.defaultValue	Set default hour, minute, second when user selects date, example	dayjs[]	[dayjs(), dayjs()]

RangePicker Events

Event Name	Description	Callback Parameters
calendarChange	Callback when pending date changes	function(dates: [dayjs, dayjs] | [string, string], dateStrings: [string, string], info: { range:start|end })
change	Callback when date range changes	function(dates: [dayjs, dayjs] | [string, string], dateStrings: [string, string])
ok	Callback when clicking OK button	function(dates: [dayjs, dayjs] | [string, string])