DatePicker Component

DatePicker component allows users to select dates or date ranges. It supports different date formatting options and multiple selection modes.

Basic Usage

Use v-model to bind the date value. By default, the value is a Date object.

Basic Date Picker:

Current value: Mon Nov 10 2025 16:31:35 GMT+0800 (中国标准时间)

Show Code

Different Sizes

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

Small size:

Default size:

Large size:

Show Code

Different States

The component can be set to different states such as disabled, readonly, and non-clearable.

Disabled State:

Readonly State:

Not Clearable:

With Prefix Icon:

Show Code

Formatting

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

Default Date Format:

Custom Display Format:

Value Formatted as String:

Current value: string 2023-06-15

Value Formatted as Timestamp:

Current value: number 1686816000000

Show Code

Different Modes

DatePicker supports multiple selection modes: date, month, and year.

Date Mode (Default):

Month Mode:

Year Mode:

Value Format Example:

Current value: 2023-06

Show Code

Date Time Selection

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

Date Time Picker:

With Default Time:

With Formatting:

Current value: 2023-06-15 09:30:00

Show Code

Disabled Dates

Through the disabled-date function, you can customize which dates are not selectable.

Disable Past Dates:

Disable Future Dates:

Limit Date Range Selection:

Selection Range:

Disable Specific Dates:

Hint: This example disables all weekends and 2023-06-20

Show Code

Custom Position

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

Panel Position Control:

Top Popup:

Right Popup:

Bottom Popup (Default):

Left Popup:

Tips:

1. You can control the popup position of the date picker panel through the position attribute

2. When there is insufficient space, it will automatically adjust to a suitable position

Show Code

Event Handling

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

Event Listening:

Event Log (Latest 5):

Show Code