DatePicker 日期选择器
用于选择或输入日期的控件。支持日期、周、月、年、季度及其范围选择，具有极致的视觉美感与流畅的交互体验。
展示模式
DatePicker 支持多种时间单位的面板直接展示，这种模式常用于自定义布局或仪表盘中。
选择模式:
单元格形状:
已选：未选择
全功能展示
基础用法
通过 type 属性，可以快捷切换日期、月份、年份的选择模式。
基础用法
高级配置
DatePicker 提供了丰富的属性来满足精细化的定制需求，如自定义图标、特殊显示格式等。
高级配置项
单元格形状
外观样式不仅支持现代感十足的圆形（默认），还支持经典稳重的方形。
形状切换
自定义单元格内容
通过 cell-render 属性或 date-cell 插槽，可以自定义日期单元格的显示内容，例如添加农历、节日、节气或业务标记。
节日与节气
禁用与只读
使用 disabled 属性禁用组件，使用 readonly 属性设置为只读。
状态演示
不同的尺寸
组件提供了 large、default、small 三种尺寸，以适应不同的页面空间。
尺寸演示
快捷预设
通过 presets 属性可以配置快捷选项，极大提升用户选择效率。
快捷选项
禁用特定日期
通过 disabled-date 函数可以自定义哪些日期不可被选择。
日期过滤
范围选择
设置 type 为 *range 即可开启范围选择模式。
-
-
范围模式
在 Nuxt 中使用
DatePicker 组件完美支持 Nuxt 3/4 的 SSR 渲染。在 Nuxt 项目中使用时，组件及其依赖（如样式、Hooks）会自动导入，无需手动注册。
Nuxt 中使用
SSR 说明
DatePicker 内部已对 Hydration 进行了优化，确保在 SSR 场景下服务端与客户端生成的 DOM 结构完全一致。
API
Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model / model-value | 绑定值 | Date | string | number | Array | — |
| type | 显示类型 | DatePickerType | 'date' |
| cell-shape | 单元格形状 | 'round' | 'square' | 'round' |
| disabled | 是否禁用 | boolean | false |
| readonly | 是否只读 | boolean | false |
| clearable | 是否显示清空按钮 | boolean | true |
| size | 尺寸 | 'large' | 'default' | 'small' | 'default' |
| placeholder | 非范围选择时的占位内容 | string | '请选择日期' |
| start-placeholder | 范围选择时的开始占位内容 | string | '开始日期' |
| end-placeholder | 范围选择时的结束占位内容 | string | '结束日期' |
| format | 显示在输入框中的格式 | string | — |
| value-format | 绑定值的格式 | string | — |
| date-format | 面板显示的日期格式 | string | 'YYYY-MM-DD' |
| time-format | 面板显示的时间格式 | string | 'HH:mm:ss' |
| range-separator | 选择范围时的分隔符 | string | '-' |
| first-day-of-week | 第一天是星期几 (1-7) | number | 7 |
| disabled-date | 禁用日期函数 | (date: Date) => boolean | — |
| presets | 快捷选项 | DatePickerPreset[] | [] |
| preset-position | 快捷选项的位置 | 'left' | 'right' | 'top' | 'bottom' | 'bottom' |
| show-footer | 是否显示底部操作栏 | boolean | true |
| status | 输入框状态 | 'success' | 'warning' | 'error' | — |
| order-on-confirm | 范围选择时是否自动排序 | boolean | false |
| prefix-icon | 自定义前缀图标 | string | Component | — |
| clear-icon | 自定义清除图标 | string | Component | — |
| default-value | 选择器打开时默认显示的日期 | Date | Date[] | — |
| default-time | 默认时间（datetime 模式下） | Date | Date[] | — |
| panel-only | 是否内联显示（只显示面板） | boolean | false |
| cell-render | 自定义单元格渲染函数 | (date: Date) => string | { text: string; className?: string } | — |
| teleported | 是否将面板插入到 body | boolean | true |
| popper-class | 下拉框类名 | string | — |
| validate-event | 是否触发表单验证 | boolean | true |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| update:modelValue | 绑定值更新时触发 | (value: DateValue | DateRangeValue) => void |
| change | 值改变时触发 | (value: DateValue | DateRangeValue) => void |
| focus | 获取焦点时触发 | (event: FocusEvent) => void |
| blur | 失去焦点时触发 | (event: FocusEvent) => void |
| clear | 点击清空按钮时触发 | () => void |
| confirm | 点击确认按钮时触发 | (value: DateValue | DateRangeValue) => void |
| panel-change | 面板视图切换时触发 | (value: Date, mode: PanelView) => void |
| visible-change | 面板显示/隐藏时触发 | (visible: boolean) => void |
Slots
| 插槽名 | 说明 |
|---|---|
| prefix-icon | 自定义输入框前缀图标 |
| clear-icon | 自定义清除图标 |
| extra | 面板中的额外内容 |
| date-cell | 自定义日期单元格 (Scope: { cell: CalendarCell }) |
| footer | 自定义底部区域 |
主题变量
所有颜色变量已与全局主题系统对接，自动支持暗黑模式：
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-date-picker-width | 普通输入框宽度 | 220px |
--yh-date-picker-range-width | 范围输入框宽度 | 400px |
--yh-date-picker-primary | 主题主颜色 | var(--yh-color-primary) |
--yh-date-picker-text-main | 主要文字颜色 | var(--yh-text-color-primary) |
--yh-date-picker-text-secondary | 次要文字颜色 | var(--yh-text-color-secondary) |
--yh-date-picker-border | 边框颜色 | var(--yh-border-color) |
--yh-date-picker-panel-width | 面板物理宽度 | 380px |
--yh-date-picker-panel-bg | 面板背景颜色 | var(--yh-bg-color-overlay) |
--yh-date-picker-panel-shadow | 面板阴影 | var(--yh-shadow-lg) |
--yh-date-picker-item-hover | 悬停背景颜色 | var(--yh-fill-color-light) |
--yh-date-picker-range-bg | 范围选择背景 | var(--yh-color-primary-light-9) |