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

- **Import**: `WDatePickerPanel` from `win-design-next`
- **Tag**: `<w-date-picker-panel>`
- **说明**: 日期选择器面板
- **分类**: date-time
- **Skill 版本**: V1.1.0
- **适配组件库**: win-design-next 1.2.2
- **API 来源**: `docs/zh-CN/component/date-picker-panel.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             | 范围模式下是否显示清除             | ^[boolean]                                                                                                                                                      | true   |
| format                | 显示格式（推导时间列等）           | ^[string]                                                                                                                                                       | —      |
| value-format          | 绑定值格式；不指定则为 Date        | ^[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]`Array`                                                                                                                                                 | []     |
| unlink-panels         | 范围选择器取消左右面板联动         | ^[boolean]                                                                                                                                                      | false  |
| arrow-control         | 时间是否使用箭头切换               | ^[boolean]                                                                                                                                                      | false  |
| show-week-number      | 是否显示周数                       | ^[boolean]                                                                                                                                                      | false  |
| show-footer           | 是否显示页脚                       | ^[boolean]                                                                                                                                                      | —      |
| show-confirm          | 是否显示确定按钮                   | ^[boolean]                                                                                                                                                      | —      |
| show-now              | 是否显示「此刻」按钮               | ^[boolean]                                                                                                                                                      | true   |

### 事件

| 名称              | 说明                         | 类型                                               |
| ----------------- | ---------------------------- | -------------------------------------------------- |
| 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`            |

### 插槽

| 名称    | 说明               |
| ------- | ------------------ |
| sidebar | 侧边栏快捷选项区域 |
