DatePicker

DatePicker, MonthPicker, RangePicker, and WeekPicker are all generated via datePicker using props.type

Rules

Basic Example

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

Props Configuration Examples

Date Selection (date)

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

Date Time Selection (datetime)

const rule = {
    type: "DatePicker",
    field: "datetime",
    title: "Select Date Time",
    value: null,
    props: {
        type: "datetime",
        format: "YYYY-MM-DD HH:mm:ss",
        placeholder: "Select date time",
        allowClear: true,
    }
}

Date Range Selection (daterange)

const rule = {
    type: "DatePicker",
    field: "dateRange",
    title: "Date Range",
    value: null,
    props: {
        type: "daterange",
        format: "YYYY-MM-DD",
        placeholder: ["Start Date", "End Date"],
        allowClear: true,
    }
}

Date Time Range Selection (datetimerange)

const rule = {
    type: "DatePicker",
    field: "datetimeRange",
    title: "Date Time Range",
    value: null,
    props: {
        type: "datetimerange",
        format: "YYYY-MM-DD HH:mm:ss",
        placeholder: ["Start Date Time", "End Date Time"],
        allowClear: true,
    }
}

Month Selection (month)

const rule = {
    type: "DatePicker",
    field: "month",
    title: "Select Month",
    value: null,
    props: {
        type: "month",
        format: "YYYY-MM",
        placeholder: "Select month",
        allowClear: true,
    }
}

Events Examples

Listen to Date Changes

const rule = {
    type: "DatePicker",
    field: "date",
    title: "Select Date",
    value: null,
    props: {
        type: "date",
        format: "YYYY-MM-DD",
        placeholder: "Select date",
        allowClear: true,
    },
    on: {
        change: (dateString, date) => {
            console.log('Date changed:', dateString, date);
        },
        clear: () => {
            console.log('Date cleared');
        },
    },
}

Linkage Update After Date Selection

const rule = [
    {
        type: "DatePicker",
        field: "startDate",
        title: "Start Date",
        value: null,
        props: {
            type: "date",
            format: "YYYY-MM-DD",
            placeholder: "Select start date",
        },
        inject: true,
        on: {
            change: ($inject, dateString, date) => {
                // Set end date to start date + 7 days
                if (date) {
                    const endDate = new Date(date);
                    endDate.setDate(endDate.getDate() + 7);
                    $inject.api.setValue('endDate', endDate);
                }
            },
        },
    },
    {
        type: "DatePicker",
        field: "endDate",
        title: "End Date",
        value: null,
        props: {
            type: "date",
            format: "YYYY-MM-DD",
            placeholder: "Select end date",
        },
    },
]

Complete configuration items: arco-design_DatePicker

value: String | Array

DatePicker

Props

Parameter	Description	Type	Default	Version
locale	Internationalization configuration, used to override datePicker field in locale	Record<string, any>	-
hide-trigger	No trigger element, only show selection panel	boolean	false
allow-clear	Whether to allow clear	boolean	true
readonly	Whether in readonly mode	boolean	false
error	Whether in error state	boolean	false
size	Size of date picker	`'mini'	'small'	'medium'
shortcuts	Preset time range shortcuts	ShortcutType[]	[]
shortcuts-position	Position of preset range on panel, default is bottom, side is generally used for scenarios with many preset times	`'left'	'bottom'	'right'`
position	Position of popup	`'top'	'tl'	'tr'
popup-visible	Control popup open or close state	boolean	-
default-popup-visible	Default popup open or close state	boolean	false
trigger-props	Parameters that can be passed to Trigger component	Record<string, unknown>	-
unmount-on-close	Whether to destroy DOM structure when hidden	boolean	false
placeholder	Placeholder text	string	-
disabled	Whether disabled	boolean	false
disabled-date	Disabled dates	(current?: Date) => boolean	-
disabled-time	Disabled times	(current: Date) => DisabledTimeProps	-
picker-value (v-model)	Date displayed on panel	`Date	string	number`
default-picker-value	Default date displayed on panel	`Date	string	number`
popup-container	Mount container for popup	`string	HTMLElement	null
value-format	Value format, applies to value defaultValue pickerValue defaultPickerValue and return values in events, supports timestamp, Date and string (refer to String Parsing Format). If not specified, will be formatted as string with same format as format.	`'timestamp'	'Date'	string`

Events

Event Name	Description	Parameters
change	Triggered when component value changes	value: `Date
select	Triggered when selected date changes but component value doesn't change	value: `Date
popup-visible-change	Triggered when popup opens or closes	visible: boolean
ok	Triggered when confirm button is clicked	value: `Date
clear	Triggered when clear button is clicked	-
select-shortcut	Triggered when shortcut is clicked	shortcut: ShortcutType
picker-value-change	Triggered when panel date changes	value: `Date

<date-picker> Props

Parameter	Description	Type	Default
model-value (v-model)	Bound value	`Date	string
default-value	Default value	`Date	string
format	Format for displaying date, refer to String Parsing Format	`string	((current: Date) => string)`
day-start-of-week	First day of week, 0 - Sunday, 1 - Monday. (Default 0)	`0	1`
show-time	Whether to add time selection	boolean	false
timepicker-props	Parameters for time display, refer to TimePickerProps	Partial<TimePickerProps>	-
disabled-time	Disabled times	(current: Date) => DisabledTimeProps	-
show-now-btn	Whether to show button for selecting current time when showTime is enabled	boolean	true

<month-picker> Props

Parameter	Description	Type	Default
model-value (v-model)	Bound value	`Date	string
default-value	Default value	`Date	string
format	Format for displaying date, refer to String Parsing Format	string	'YYYY-MM'

<year-picker> Props

Parameter	Description	Type	Default
model-value (v-model)	Bound value	`Date	string
default-value	Default value	`Date	string
format	Format for displaying date, refer to String Parsing Format	string	'YYYY'

<quarter-picker> Props

Parameter	Description	Type	Default
model-value (v-model)	Bound value	`Date	string
default-value	Default value	`Date	string
format	Format for displaying date, refer to String Parsing Format	string	'YYYY-[Q]Q'

<week-picker> Props

Parameter	Description	Type	Default
model-value (v-model)	Bound value	`Date	string
default-value	Default value	`Date	string
format	Format for displaying date, refer to String Parsing Format	string	'gggg-wo'
day-start-of-week	First day of week, 0 - Sunday, 1 - Monday. (Default 0)	`0	1`

<range-picker> Props

Parameter	Description	Type	Default	Version
mode	Type of range picker	`'date'	'year'	'quarter'
model-value (v-model)	Bound value	`(Date	string	number)[]`
default-value	Default value	`(Date	string	number)[]`
picker-value	Default date displayed on panel	`(Date	string	number)[]`
default-picker-value	Date displayed on panel	`(Date	string	number)[]`
disabled	Whether disabled	`boolean	boolean[]`	false
day-start-of-week	First day of week, 0 - Sunday, 1 - Monday. (Default 0)	`0	1`	0
format	Format for displaying date, refer to String Parsing Format	string	-
value-format	Value format, applies to value defaultValue pickerValue defaultPickerValue and return values in events, supports timestamp, Date and string (refer to String Parsing Format). If not specified, will be formatted as string with same format as format.	`'timestamp'	'Date'	string`
show-time	Whether to add time selection	boolean	false
time-picker-props	Parameters for time display, refer to TimePickerProps	Partial<TimePickerProps>	-
placeholder	Placeholder text	string[]	-
disabled-date	Disabled dates	`(current: Date, type: 'start'	'end') => boolean`	-
disabled-time	Disabled times	`(current: Date, type: 'start'	'end') => DisabledTimeProps`	-
separator	Separator symbol in range picker input box	string	-

<range-picker> Events

Event Name	Description	Parameters
change	Triggered when component value changes	value: `(Date
select	Triggered when selected date changes but component value doesn't change	value: `(Date
popup-visible-change	Triggered when popup opens or closes	visible: boolean
ok	Triggered when confirm button is clicked	value: `Date
clear	Triggered when clear button is clicked	-
select-shortcut	Triggered when shortcut is clicked	shortcut: ShortcutType
picker-value-change	Triggered when panel date changes	value: `Date

String Parsing Format

Format	Output	Description
YY	21	Two-digit year
YYYY	2021	Four-digit year
M	1-12	Month, starting from 1
MM	01-12	Month, two digits
MMM	Jan-Dec	Abbreviated month name
MMMM	January-December	Full month name
D	1-31	Day of month
DD	01-31	Day of month, two digits
d	0-6	Day of week, Sunday is 0
dd	Su-Sa	Shortest day name of week
ddd	Sun-Sat	Abbreviated day name of week
dddd	Sunday-Saturday	Full day name of week
H	0-23	Hour
HH	00-23	Hour, two digits
h	1-12	Hour, 12-hour format
hh	01-12	Hour, 12-hour format, two digits
m	0-59	Minute
mm	00-59	Minute, two digits
s	0-59	Second
ss	00-59	Second, two digits
S	0-9	Hundreds of milliseconds, one digit
SS	00-99	Tens of milliseconds, two digits
SSS	000-999	Milliseconds, three digits
Z	-5:00	UTC offset
ZZ	-0500	UTC offset with leading zero
A	AM PM	-
a	am pm	-
Do	1st... 3st	Day of month with ordinal
X	1410715640.579	Unix timestamp
x	1410715640579	Unix timestamp in milliseconds

|