YDatePicker

适用范围：Legacy Admin Kit / Schema 与旧 admin-vue。新 admin-nuxtui 的开发入口见管理端 Nuxt UI 指南。

定位 / Owner

YDatePicker 表达 DateOnly 字符串值，公共 model 使用 YYYY-MM-DD；内部 calendar/portal 实现不是业务合同。

什么时候使用

• 业务自然日、订阅到期日等 DateOnly 场景。
• Dialog/Drawer 中需要正确 nested overlay 与 Escape 层级的日期选择。

不什么时候使用

• 需要精确时间时使用 YDateTimePicker，不要把时间塞进 DateOnly 字符串。
• feature 不要自行把 DateOnly 转成浏览器本地午夜后再当 UTC 提交；业务时区解释由对应 contract owner 处理。

基础用法

<YDatePicker v-model="expiryDate" aria-label="订阅到期日" />

Public API

v-model: string。主要 props：id、ariaLabel、ariaDescribedby、ariaInvalid、disabled、placeholder、compact。

关键交互

• 无值显示 placeholder。
• popup 使用共享 overlay portal target。
• Escape 在 nested overlay 中先关闭日期 popup，不应越级关闭父 Dialog/Drawer。

Production Example

Tenant subscription DateOnly editor。

Live Workbench

Admin Vue 稳定路径：

/frontend-module-demo/component-workbench/date-picker

该路径只标识 live scenario，不固化部署 Host；官方文档站与 Admin Vue 可以独立部署。

Verification / Source

• packages/yoyo-admin/admin-kit/src/ui/components/date-picker/YDatePicker.vue
• Tenant real browser DateOnly interaction
• Live Component Workbench