DatePicker 日期选择器

用于选择或输入日期，支持日期、日期时间、日期范围、月份、年份等多种类型。

基础用法

默认为日期选择类型，通过 v-model 绑定日期字符串（YYYY-MM-DD 格式）：

请选择日期

当前值：未选择

日期时间选择

设置 type='datetime'，日期和时间在同一面板中选择，v-model 绑定精确到秒（YYYY-MM-DD HH:mm:ss 格式）：

请选择日期时间

当前值：未选择

日期范围选择

设置 type='daterange'，v-model 绑定 [开始日期, 结束日期] 数组：

开始日期至结束日期

? ~ ?

日期时间范围选择

设置 type='datetimerange'，范围选择完成后可分别设置开始和结束时间，日期和时间在同一面板中：

开始时间至结束时间

? ~ ?

月份选择

设置 type='month'，选择月份，v-model 绑定为该月首日字符串：

请选择月份

当前值：未选择

年份选择

设置 type='year'，选择年份，v-model 绑定为该年首日字符串：

请选择年份

当前值：未选择

快捷选项

通过 shortcuts 设置预设的快捷日期选项，常用于日期范围选择：

开始日期至结束日期

? ~ ?

格式化显示

通过 format 自定义显示格式，支持 YYYY、MM、DD、HH、mm、ss 占位符：

请选择日期

不同尺寸

设置 size 属性使用三种预设尺寸：

小尺寸

中等尺寸

大尺寸

可清空与禁用

clearable 属性使选择器显示清除按钮，disabled 属性禁用选择器：

2026-01-15×

2026-06-01

禁用日期

通过 disabledDate 函数禁用特定日期，返回 true 表示禁用：

不能选择未来日期

API

Props

参数	类型	默认值	说明
`modelValue`	`string \| [string, string]`	`—`	绑定值，daterange/datetimerange 类型为二元数组
`type`	`'date' \| 'datetime' \| 'daterange' \| 'datetimerange' \| 'month' \| 'year'`	`'date'`	选择器类型
`placeholder`	`string`	`'请选择日期'`	未选择时的占位文本
`startPlaceholder`	`string`	`'开始日期'`	日期范围选择的开始占位文本
`endPlaceholder`	`string`	`'结束日期'`	日期范围选择的结束占位文本
`disabled`	`boolean`	`false`	是否禁用
`clearable`	`boolean`	`false`	是否可清空
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	选择器尺寸
`format`	`string`	`—`	显示格式，支持 YYYY、MM、DD、HH、mm、ss 占位符
`disabledDate`	`(date: string) => boolean`	`—`	禁用日期函数，返回 true 禁用
`shortcuts`	`Shortcut[]`	`—`	快捷选项数组

Events

事件名	类型	说明
`update:modelValue`	`(value: string \| [string, string] \| undefined) => void`	值变化时触发
`change`	`(value: string \| [string, string] \| undefined) => void`	确认选择时触发

Shortcuts

属性	类型	说明
`label`	`string`	快捷选项显示文本
`value`	`string \| [string, string]`	快捷选项值，daterange 时为二元数组