Date 日期选择器

选择日期的组件。

何时使用

当用户需要输入一个日期时，可以点击输入框弹出日历面板进行选择。

基础用法

点击输入框弹出日历面板，选择日期后自动关闭。通过 v-model 绑定日期值（格式 YYYY-MM-DD）。

<TDate v-model="date" placeholder="请选择日期" />

预设值

传入预设日期值。

<TDate :model-value="'2026-06-01'" />

限制范围

通过 min 和 max 限制可选日期范围。

<TDate min="2026-01-01" max="2026-06-30" />

自定义禁用日期

通过 disabled-date 函数禁用特定日期（如周末）。

<TDate :disabled-date="(d) => { const day = new Date(d).getDay(); return day === 0 || day === 6 }" />

尺寸

支持 sm、默认、lg 三种尺寸。

<TDate size="sm" placeholder="小尺寸" />
<TDate placeholder="默认尺寸" />
<TDate size="lg" placeholder="大尺寸" />

可清除

设置 clearable，面板底部显示清除按钮。

<TDate :model-value="'2026-06-01'" clearable />

禁用

设置 disabled 禁用日期选择。

<TDate disabled placeholder="禁用状态" />

键盘输入

支持直接输入 YYYY-MM-DD 格式，也支持 MM-DD 自动补齐当前年份。

<TDate placeholder="试试输入 12-25" />

周选择模式

设置 week-select 启用周选择，点击日期选中整周，v-model 值为 ISO 周格式（如 2026-W29）。

<TDate week-select placeholder="点击选择周" />

API

TDate 属性 (Props)

属性名	说明	类型	默认值
model-value	日期值（v-model，格式 YYYY-MM-DD）	string	''
placeholder	占位符文本	string	'选择日期'
disabled	禁用	boolean	false
size	尺寸	'sm' | 'lg'	undefined
clearable	可清除	boolean	false
min	最小可选日期	string	undefined
max	最大可选日期	string	undefined
disabled-date	自定义禁用日期函数	(date: string) => boolean	undefined
week-select	启用周选择模式	boolean	false
week-format	周选择值格式模板	string	'{y}-W{wk}'

TDate 事件 (Emits)

事件名	说明	回调参数
update:model-value	日期值变化时触发	(value: string) => void
change	日期选中时触发	(value: string) => void