DatePicker

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:"Select activity 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",
        clearable: 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 and time",
        clearable: true,
    }
}

Date Range Selection (daterange)

const rule = {
    type: "DatePicker",
    field: "dateRange",
    title: "Date Range",
    value: null,
    props: {
        type: "daterange",
        format: "yyyy-MM-dd",
        startPlaceholder: "Start Date",
        endPlaceholder: "End Date",
        clearable: 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",
        startPlaceholder: "Start Date Time",
        endPlaceholder: "End Date Time",
        clearable: true,
    }
}

Month Selection (month)

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

Year Selection (year)

const rule = {
    type: "DatePicker",
    field: "year",
    title: "Select Year",
    value: null,
    props: {
        type: "year",
        format: "yyyy",
        placeholder: "Select year",
        clearable: true,
    }
}

Events Examples

Handle Date Changes

const rule = {
    type: "DatePicker",
    field: "date",
    title: "Select Date",
    value: null,
    props: {
        type: "date",
        format: "yyyy-MM-dd",
        placeholder: "Select date",
        clearable: true,
    },
    on: {
        'update:value': (value, formattedValue) => {
            console.log('Date changed:', value, formattedValue);
        },
        blur: () => {
            console.log('Lost focus');
        },
        focus: () => {
            console.log('Gained focus');
        },
    },
}

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: {
            'update:value': ($inject, value) => {
                // Set end date to start date + 7 days
                if (value) {
                    const endDate = value + 7 * 24 * 60 * 60 * 1000;
                    $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: naive-ui_DatePicker

value: String | Array

DatePicker

Props

Name	Type	Default Value	Description	Version
clearable	boolean	false	Whether it supports clearing
default-formatted-value	string | [string, string] | null	undefined	Formatted value of Date Picker
disabled	boolean	false	Whether disabled
first-day-of-week	0 | 1 | 2 | 3 | 4 | 5 | 6	undefined	Start of week on calendar, 0 represents Monday
formatted-value	string | [string, string] | null	undefined	Formatted value	2.24.0
input-readonly	boolean	false	Set input box to readonly (avoid opening virtual keyboard on mobile devices)
placement	'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'bottom-start'	Panel popup position	2.25.0
shortcuts	Record<string, number | (() => number)> | Record<string, [number, number] | (() => [number, number])>	undefined	Custom shortcut buttons
size	'small' | 'medium' | 'large'	'medium'	Size
type	'date' | 'datetime' | 'daterange' | 'datetimerange' | 'month' | 'year' | 'quarter' | 'date'	Type of Date Picker	'quarter' v2.22.0
value-format	string	Follows format property	Format of bound value, see format for details
on-blur	() => void	undefined	Callback executed when user blurs
on-focus	() => void	undefined	Callback executed when user focuses

Date Type Props

Name	Type	Default Value	Description	Version
actions	Array<'clear' | 'now'> | null	['clear', 'now']	Supported operations in Date type Date Picker
format	string	'YYYY-MM-dd'	Time format string, see format for details
is-date-disabled	(current: number) => boolean	undefined	Date disabled validation function
placeholder	string	'Select Date'	Hint message for Date Picker
on-update:formatted-value	(value: string | null, timestampValue: number | null) => void	undefined	Callback function triggered when controlled data updates	2.24.0
on-update:value	(value: number | null, formattedValue: string | null) => void	undefined	Callback function triggered when controlled data updates	formattedValue 2.24.0

DateTime Type Props

Name	Type	Default Value	Description	Version
actions	Array<'clear' | 'now' | 'confirm'> | null	['clear', 'now', 'confirm']	Supported operations in DateTime type Date Picker
default-time	string	undefined	Default time, format is HH:mm:ss	2.22.0
format	string	'YYYY-MM-dd HH:mm:ss'	Time format string, see format for details
is-date-disabled	(current: number) => boolean	undefined	Date disabled validation function
is-time-disabled	(current: number) => { isHourDisabled: boolean, isMinuteDisabled: boolean, isSecondDisabled: boolean }	undefined	Time disabled validation function
placeholder	string	'Select Date Time'	Hint message
update-value-on-close	boolean	false	Whether to update value when closing panel
on-update:formatted-value	(value: string | null, timestampValue: number | null) => void	undefined	Callback function triggered when data updates	2.24.0
on-update:value	(value: number | null, formattedValue: string | null) => void	undefined	Callback function triggered when data updates	formattedValue 2.24.0

DateRange Type Props

Name	Type	Default Value	Description	Version
actions	Array<'clear' | 'confirm'> | null	['clear', 'confirm']	Supported user operations in DateRange type Date Picker
end-placeholder	string	'End Date'	Hint message for end picker in DateRange
format	string	'YYYY-MM-dd'	Time format string, see format for details
is-date-disabled	(current: number, phase: 'start' | 'end', value: [number, number] | null) => boolean	undefined	Date disabled validation function
is-time-disabled	(current: number, phase: 'start' | 'end', value: [number, number] | null) => { isHourDisabled?: () => boolean, isMinuteDisabled?: () => boolean, isSecondDisabled?: () => boolean }	undefined	Time disabled validation function
close-on-select	boolean	false	Whether to automatically close panel after user selects time range
separator	string	'to'	Separator between start picker and end picker
start-placeholder	string	'Start Date'	Hint message for start picker in DateRange
update-value-on-close	boolean	false	Whether to update value when closing panel
on-update:formatted-value	(value: [string, string] | null, timestampValue: [number, number] | null) => void	undefined	Callback function triggered when data updates	2.24.0
on-update:value	(value: [number, number] | null, formattedValue: [string, string] | null) => void	undefined	Callback function triggered when data updates	formattedValue 2.24.0

DateTimeRange Type Props

Name	Type	Default Value	Description	Version
actions	Array<'clear' | 'confirm'> | null	['clear', 'confirm']	Supported user operations in DateTimeRange type Date Picker
default-time	string | Array<string | undefined>	undefined	Default time, format is HH:mm:ss	2.22.0
end-placeholder	string	'End Date Time'	Hint message for end picker in DateTimeRange
format	string	'YYYY-MM-dd HH:mm:ss'	Time format string, see format for details
is-date-disabled	(current: number, phase: 'start' | 'end', value: [number, number] | null) => boolean	undefined	Date disabled validation function
is-time-disabled	(current: number, phase: 'start' | 'end', value: [number, number]) => { isHourDisabled?: () => boolean, isMinuteDisabled?: () => boolean, isSecondDisabled?: () => boolean }	undefined	Time disabled validation function
separator	string	'to'	Separator between start picker and end picker
start-placeholder	string	'Start Date Time'	Hint message for start picker in DateTimeRange
update-value-on-close	boolean	false	Whether to update value when closing panel
on-update:formatted-value	(value: [string, string] | null, timestampValue: [number, number] | null) => void	undefined	Callback function triggered when data updates	2.24.0
on-update:value	(value: [number, number] | null, formattedValue: [string, string] | null) => void	undefined	Callback function triggered when data updates	formattedValue 2.24.0

Month Type Props

Name	Type	Default Value	Description	Version
actions	Array<'clear' | 'now' | 'confirm'> | null	['clear', 'now']	Supported operations in Month type Date Picker
format	string	'YYYY-MM'	Time format string, see format for details
is-date-disabled	(current: number) => boolean	undefined	Month disabled validation function
placeholder	string	'Select Month'	Hint message for Month Picker
on-update:formatted-value	(value: string | null, timestampValue: number | null) => void	undefined	Callback function triggered when controlled data updates	2.24.0
on-update:value	(value: number | null, formattedValue: string | null) => void	undefined	Callback function triggered when controlled data updates	formattedValue 2.24.0

Year Type Props

Name	Type	Default Value	Description	Version
actions	Array<'clear' | 'now'> | null	['clear', 'now']	Supported operations in Year type Date Picker
format	string	'YYYY'	Time format string, see format for details
is-date-disabled	(current: number) => boolean	undefined	Year disabled validation function
placeholder	string	'Select Year'	Hint message for Year Picker
on-update:formatted-value	(value: string | null, timestampValue: number | null) => void	undefined	Callback function triggered when controlled data updates	2.24.0
on-update:value	(value: number | null, formattedValue: string | null) => void	undefined	Callback function triggered when controlled data updates	formattedValue 2.24.0