# date-picker-panel-pro (w-date-picker-panel-pro)

- **Import**: `WDatePickerPanelPro` from `win-design-next`
- **Tag**: `<w-date-picker-panel-pro>`
- **说明**: Pro 日期选择器面板
- **分类**: date-time
- **Skill 版本**: V1.1.0
- **适配组件库**: win-design-next 1.2.2
- **API 来源**: `docs/zh-CN/component/date-picker-panel-pro.md`

## API

## API

### 属性

| 名称                  | 说明                                                                                                 | 类型                                                                                                                                                            | 默认值     |
| --------------------- | ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
| model-value / v-model | 绑定值；范围类型为长度 2 的数组                                                                      | ^[Date] / ^[array]`Date[]` / ^[string] / ^[number]                                                                                                              | —          |
| type                  | 选择器类型                                                                                           | ^[enum]`'year' \| 'years' \| 'month' \| 'months' \| 'date' \| 'dates' \| 'week' \| 'datetime' \| 'datetimerange' \| 'daterange' \| 'monthrange' \| 'yearrange'` | date       |
| border                | 面板是否显示边框                                                                                     | ^[boolean]                                                                                                                                                      | true       |
| disabled              | 是否禁用                                                                                             | ^[boolean]                                                                                                                                                      | false      |
| editable              | 是否可编辑                                                                                           | ^[boolean]                                                                                                                                                      | true       |
| clearable             | 范围 `datetimerange` 等是否可清除                                                                    | ^[boolean]                                                                                                                                                      | true       |
| format                | 显示格式                                                                                             | ^[string]                                                                                                                                                       | —          |
| value-format          | 绑定值格式                                                                                           | ^[string]                                                                                                                                                       | —          |
| date-format           | 面板内日期格式                                                                                       | ^[string]                                                                                                                                                       | —          |
| time-format           | 面板内时间格式                                                                                       | ^[string]                                                                                                                                                       | —          |
| default-value         | 打开时默认日期                                                                                       | ^[Date] / ^[array]`[Date, Date]`                                                                                                                                | —          |
| default-time          | 范围默认时刻                                                                                         | ^[Date] / ^[array]`[Date, Date]`                                                                                                                                | —          |
| disabled-date         | 禁用日期函数                                                                                         | ^[Function]`(date: Date) => boolean`                                                                                                                            | —          |
| cell-class-name       | 单元格类名                                                                                           | ^[Function]`(data: Date) => string`                                                                                                                             | —          |
| shortcuts             | 快捷选项                                                                                             | ^[array]                                                                                                                                                        | []         |
| arrow-control         | 时间箭头控制                                                                                         | ^[boolean]                                                                                                                                                      | false      |
| show-week-number      | 显示周数                                                                                             | ^[boolean]                                                                                                                                                      | false      |
| show-footer           | 显示页脚                                                                                             | ^[boolean]                                                                                                                                                      | true       |
| show-confirm          | 显示确定                                                                                             | ^[boolean]                                                                                                                                                      | true       |
| show-now              | 显示「此刻」                                                                                         | ^[boolean]                                                                                                                                                      | true       |
| calendar-range        | 面板年份窗口 `[startYear, endYear]`，列表数据直接取自该区间；手动输入年份超出时自动钳制到最小/最大年 | ^[array]`[number, number]`                                                                                                                                      | 当前年 ±10 |
| disabled-hours        | 禁用小时（`datetime` / `datetimerange`）                                                             | ^[Function]`(role, comparingDate?) => number[]`                                                                                                                 | —          |
| disabled-minutes      | 禁用分钟（`datetime` / `datetimerange`）                                                             | ^[Function]`(hour, role, comparingDate?) => number[]`                                                                                                           | —          |
| disabled-seconds      | 禁用秒（`datetime` / `datetimerange`）                                                               | ^[Function]`(hour, minute, role, comparingDate?) => number[]`                                                                                                   | —          |

### 事件

| 名称              | 说明                     | 类型                                               |
| ----------------- | ------------------------ | -------------------------------------------------- |
| update:modelValue | 绑定值变化               | ^[Function]`(value) => void`                       |
| calendar-change   | 日历日期更改（范围类型） | ^[Function]`(value: [Date, Date \| null]) => void` |
| panel-change      | 面板视图切换             | ^[Function]`(value, mode, view?) => void`          |
| visible-change    | 可见性变化               | ^[Function]`(visible: boolean) => void`            |

### 插槽

不支持 `prev-month` / `next-month` / `prev-year` / `next-year` 导航插槽（与 [DatePicker Pro](/zh-CN/component/date-picker-pro) 一致）。

| 名称    | 说明               |
| ------- | ------------------ |
| default | 自定义单元格内容   |
| sidebar | 侧边栏快捷选项区域 |
