DatePicker 日期选择器

用于选择单个日期，支持禁用日期、清除与尺寸控制。

基础用法

使用 v-model 绑定值，默认格式为 YYYY-MM-DD。

占位与清除

可通过 placeholder 设置占位；开启 clearable 支持清除。

禁用过去日期

通过 disabledDate 禁用某些日期，例如：禁用今天之前的日期。

仅允许最近一周（含今天）

通过 disabledDate 仅允许最近 7 天（含今天）：

注：disabledDate(date) 返回 true 表示该日期禁用。

尺寸

通过 size 控制输入框尺寸：small、default、large。

<c-date-picker v-model="date" size="small" />
<c-date-picker v-model="date" />
<c-date-picker v-model="date" size="large" />

日期+时间（showTime）

在 type="date" 下开启 showTime，右侧会出现时间列与“确定”按钮。只有点击“确定”后才会提交值。

说明：

• 开启 showTime 时，默认显示格式为 YYYY-MM-DD HH:mm:ss。
• 点击日期不会立即提交；需在右侧选择时分秒并点击"确定"。
• 可通过 format 自定义显示格式。

不同类型选择

展示 Time/Week/Month/Quarter/Year 不同类别的选择框：

说明：

• type="time" 显示三列时分秒选择，并提供“此刻/确定”。
• type="week" 在日期面板中按周（周一开始）选择与高亮。
• type="month"、type="year" 直接在网格中选择并输出对应格式。
• type="quarter" 提供 Q1-Q4 选择，并支持左右箭头切换年份。

Props

属性名	说明	类型	可选值	默认值
modelValue	绑定值（字符串或 Date）	string | Date | null	—	null
format	显示格式（默认随 type 自动匹配）	string	—	自动
showTime	开启右侧时间选择（仅 type='date'）	boolean	—	false
placeholder	占位文本	string	—	请选择日期
disabled	是否禁用	boolean	—	false
clearable	是否可清除	boolean	—	true
size	尺寸	'small' | 'default' | 'large'	—	default
disabledDate	禁用某些日期的函数	(date: Date) => boolean	—	undefined
popperMatchWidth	弹层是否与输入框同宽	boolean	—	true

Events

事件名	说明	参数类型
update:modelValue	选中值变化（v-model）	string | Date | null
change	选中值变化（同上）	string | Date | null
openChange	面板展开/收起变化	boolean