日期选择器组件

日期选择器组件允许用户选择日期或日期范围。支持不同的日期格式化选项和多种选择模式。

基础用法

使用 v-model 绑定日期值，默认情况下值为 Date 对象。

基础日期选择器：

当前值: Mon Nov 10 2025 16:31:35 GMT+0800 (中国标准时间)

显示代码

不同尺寸

组件提供了三种尺寸：small、default、large。

小尺寸：

默认尺寸：

大尺寸：

显示代码

不同状态

组件可以设置为禁用、只读、不可清除等不同状态。

禁用状态：

只读状态：

不可清除：

带图标前缀：

显示代码

格式化

可以使用 value-format 和 format 分别控制值的格式和显示格式。

默认日期格式：

自定义显示格式：

值格式化为字符串：

当前值: string 2023-06-15

值格式化为时间戳：

当前值: number 1686816000000

显示代码

不同模式

日期选择器支持多种选择模式：日期、月份和年份。

日期模式（默认）：

月份模式：

年份模式：

值格式化示例：

当前值: 2023-06

显示代码

日期时间选择

设置 show-time 属性可以在选择日期的同时选择时间。

日期时间选择器：

带默认时间：

带格式化：

当前值: 2023-06-15 09:30:00

显示代码

禁用日期

通过 disabled-date 函数可以自定义哪些日期不可选择。

禁用过去的日期：

禁用未来的日期：

限制选择日期范围：

选择范围：

至

禁用特定日期：

提示：本示例中禁用了所有周末和 2023-06-20

显示代码

自定义位置

通过 position 属性可以设置下拉面板的弹出位置。

面板位置控制：

上方弹出：

右侧弹出：

下方弹出（默认）：

左侧弹出：

提示：

1. 可以通过 position 属性控制日期选择器面板的弹出位置

2. 当空间不足时，会自动调整到合适的位置

显示代码

事件处理

日期选择器提供了多种事件，如 change、clear、focus 等。

事件监听：

事件记录 (最近5条):

显示代码