Calendar

Rule

Basic Example

const rule = {
    type: 'calendar',
    title: 'Date Selection',
    field: 'date',
    value: '2024-06-11',
    props: {
        placeholder: 'Select',
    }
}

Props Configuration Examples

Single Date Selection (single)

const rule = {
    type: 'calendar',
    title: 'Event Date',
    field: 'date',
    value: '2024-06-11',
    props: {
        type: 'single',
        placeholder: 'Please select date',
        minDate: new Date(2024, 0, 1),
        maxDate: new Date(2024, 11, 31),
    }
}

Multiple Date Selection (multiple)

const rule = {
    type: 'calendar',
    title: 'Multiple Date Selection',
    field: 'dates',
    value: ['2024-06-11', '2024-07-11', '2024-07-12'],
    props: {
        type: 'multiple',
        placeholder: 'Please select multiple dates',
        minDate: new Date(2024, 5, 10),
    }
}

Date Range Selection (range)

const rule = {
    type: 'calendar',
    title: 'Date Range',
    field: 'dateRange',
    value: ['2024-06-11', '2024-07-11'],
    props: {
        type: 'range',
        placeholder: 'Please select date range'
    }
}

Month Switch Mode

const rule = {
    type: 'calendar',
    title: 'Date Selection',
    field: 'date',
    value: '2024-06-11',
    props: {
        switchMode: 'month',
        placeholder: 'Please select date',
    }
}

Limit Date Range

const rule = {
    type: 'calendar',
    title: 'Appointment Date',
    field: 'date',
    value: '',
    props: {
        placeholder: 'Please select date',
        minDate: new Date(),
        maxDate: new Date(2025, 11, 31),
    }
}

Events Examples

Listen to Date Changes

const rule = {
    type: 'calendar',
    title: 'Event Date',
    field: 'date',
    value: '',
    props: {
        placeholder: 'Please select date',
    },
    on: {
        select: (value) => {
            console.log('Date selected:', value);
        },
        confirm: (value) => {
            console.log('Selection confirmed:', value);
        },
        open: () => {
            console.log('Calendar opened');
        },
        close: () => {
            console.log('Calendar closed');
        },
    },
}

Date Range Linkage Validation

const rule = [
    {
        type: 'calendar',
        title: 'Start Date',
        field: 'startDate',
        value: '',
        props: {
            type: 'single',
            placeholder: 'Please select start date',
        },
        inject: true,
        on: {
            confirm: ($inject, value) => {
                // Ensure end date is after start date
                const endDate = $inject.api.getValue('endDate');
                if (endDate && new Date(value) >= new Date(endDate)) {
                    $inject.api.setFieldError('endDate', 'End date must be later than start date');
                } else {
                    $inject.api.clearFieldError('endDate');
                }
            },
        },
    },
    {
        type: 'calendar',
        title: 'End Date',
        field: 'endDate',
        value: '',
        props: {
            type: 'single',
            placeholder: 'Please select end date',
        },
        inject: true,
        on: {
            confirm: ($inject, value) => {
                // Ensure end date is not earlier than start date
                const startDate = $inject.api.getValue('startDate');
                if (startDate && new Date(value) <= new Date(startDate)) {
                    $inject.api.setFieldError('endDate', 'End date must be later than start date');
                } else {
                    $inject.api.clearFieldError('endDate');
                }
            },
        },
    },
]

Complete configuration items:Vant_Calendar

value :String|String[]

Props

Parameter	Description	Type	Default Value
type	Selection type: single means select single date, multiple means select multiple dates, range means select date range	string	single
switch-mode v4.9.0	Switch mode: none displays all months flat, no switch buttons, month supports month switching, shows previous/next month buttons, year-month supports year switching, also supports month switching, shows previous/next year, previous/next month buttons	string	none
title	Calendar title	string	Date Selection
color	Theme color, applies to bottom button and selected date	string	#1989fa
disabled	Whether to disable input	boolean	false
min-date	Minimum selectable date	Date	Current date when switch-mode is none
max-date	Maximum selectable date	Date	Six months after current date when switch-mode is none
default-date	Default selected date, array when type is multiple or range, pass null to default to no selection	Date | Date[] | null	Today
row-height	Date row height	number | string	64
formatter	Date formatting function	(day: Day) => Day	-
poppable	Whether to display calendar as popup	boolean	true
lazy-render	Whether to only render visible area content	boolean	true
show-mark	Whether to show month background watermark	boolean	true
show-title	Whether to show calendar title	boolean	true
show-subtitle	Whether to show calendar subtitle (year/month)	boolean	true
show-confirm	Whether to show confirm button	boolean	true
readonly	Whether it is in readonly state, cannot select dates in readonly state	boolean	false
confirm-text	Confirm button text	string	Confirm
confirm-disabled-text	Text when confirm button is in disabled state	string	Confirm
first-day-of-week	Set week start day	0-6	0

Events

Event Name	Description	Callback Parameters
select	Triggered when any date is clicked and selected	value: Date | Date[]
confirm	Triggered when date selection is completed, if show-confirm is true, triggered after clicking confirm button	value: Date | Date[]
open	Triggered when popup is opened	-
close	Triggered when popup is closed	-
opened	Triggered when popup is opened and animation ends	-
closed	Triggered when popup is closed and animation ends	-
unselect	Triggered when date is unselected when calendar component's type is multiple	value: Date
month-show	Triggered when a month enters the visible area	{ date: Date, title: string }
over-range	Triggered when range selection exceeds maximum selectable days	-
click-subtitle	Triggered when calendar subtitle is clicked	event: MouseEvent
click-disabled-date v4.7.0	Triggered when disabled date is clicked	value: Date | Date[]
panel-change	Triggered when calendar panel switches	{ date: Date }