DatePickerMultiple Component

DatePickerMultiple component allows users to select multiple dates or date ranges. It supports different date formatting options, multiple selection modes, and shortcut options functionality.

Basic Usage

DatePickerMultiple provides two selection modes: date range selection and multiple date selection.

Range Selection Mode

Selected date range: 2025-11-10, 2025-11-17

Multiple Selection Mode

Selected multiple dates: 2025-11-10, 2025-11-13, 2025-11-17

Show Code

Different Modes

The component supports multiple selection modes: date, month, and year.

Date Mode (date)

Selected dates: Not selected

Month Mode (month)

Selected months: Not selected

Year Mode (year)

Selected years: Not selected

Show Code

Different Sizes

The component provides three sizes: small, default, and large.

Small Size (small)

Default Size (default)

Large Size (large)

Show Code

Different States

The component can be set to disabled state, and can also customize disabled specific dates through the disabled-date function.

Disabled State (disabled)

Selected dates: 2025-11-10, 2025-11-17

Disabled Dates (disabledDate)

Selected dates: Not selected

Dates before today are disabled

Show Code

Formatting

You can use value-format and format to control the value format and display format respectively.

Value Formatting (valueFormat: YYYY/MM/DD)

Formatted value: []

Type: -

Display Formatting (format: DD MMM YYYY)

Selected dates: Not selected

Show Code

Date Time Selection

Setting the show-time attribute allows you to select time while selecting dates.

Date Time Selection

Selected date time: Not selected

Show Code

Shortcuts

Through the shortcuts attribute, you can set shortcut options to provide preset date selections.

Date Range Selection with Shortcuts

Selected date range: Not selected

Available shortcuts: Last week, Last month, Last 3 months

Show Code

Custom Position

Through the position attribute, you can set the popup position of the dropdown panel.

Top Popup (top)

Bottom Popup (bottom)

Left Popup (left)

Right Popup (right)

Show Code

Event Handling

DatePickerMultiple provides various events such as change, clear, focus, etc.

Event Handling Example

Current value: Not selected

Event Log:

Show Code

DatePickerMultiple Component API

Attributes

Attribute	Description	Type	Accepted Values	Default
v-model	Binding value	Date[] | string[] | number[]	—	[]
mode	DatePicker mode	string	date / month / year	date
disabled	Whether disabled	boolean	—	false
disabled-date	Unselectable dates	(date: Date) => boolean	—	—
show-time	Whether to show time picker	boolean	—	false
value-format	Value formatting	string	—	—
format	Display formatting	string	—	—
placeholder	Placeholder	string	—	—
clearable	Whether clearable	boolean	—	true
position	Popup position	string	top / bottom / left / right	bottom
size	Size	string	small / default / large	default
is-range	Whether range selection mode	boolean	—	false
shortcuts	Shortcut options list	ShortcutType[]	—	—
is-tip	Whether to show tip	boolean	—	true
tip-text	Tip text	string	—	—
tip-position	Tip position	string	top / bottom / left / right	—

ShortcutType Type

Attribute	Description	Type	Accepted Values	Default
label	Shortcut option label	string	—	—
value	Shortcut option value	DateType[] | (() => DateType[])	—	—

Events

Event Name	Description	Callback Parameters
change	Triggered when date changes	(value: Date[] | string[] | number[])
panel-change	Triggered when panel changes	(mode: 'date | month | year')
clear	Triggered when cleared	—
focus	Triggered when focused	—
blur	Triggered when blurred	—
date-dialog-open	Triggered when date dialog opens	—
date-dialog-close	Triggered when date dialog closes	—

Slots

Slot Name	Description	Scope Parameters
prefix	Input prefix content	—
date	Custom date cell	{ date: Date }
footer	Calendar panel footer area	—

Style Variables

DatePickerMultiple component uses the following style variables, which can be customized through SCSS variables:

Variable Name	Description
$border-color-default	Border color
$bg-color-default	Background color
$theme-color-primary	Theme color
$text-color-default	Text color
$font-size-small	Small font size
$font-size-default	Default font size
$font-size-large	Large font size
$bg-color-hover	Hover background color