DatePickerPanel 日期选择器面板 beta
DatePickerPanel 是 DatePicker 的核心组件，可以单独使用，将日期选择器直接嵌入到页面中。
ts
import { createApp } from 'vue'
import { ElDatePickerPanel } from '@szhn/dh-design-pc'
const app = createApp()
app.use(ElDatePickerPanel)规范
- 支持年、月、日、时间四种粒度的单选与范围选择。
- 范围选择时，结束日期不得早于起始日期；非组合场景由组件自动拦截非法范围。
- 日期时间类面板可通过
show-footer、show-now、show-confirm展示底部操作区（「此刻」「清除」「确定」）；年/月/日范围面板点选即生效，示例默认不展示底部。 - 通过
app.use(DhDesignPc)安装后，组件内置文案（月份、星期、面板按钮等）默认使用zh-cn。
选择某一天
以「日」为基本单位，基础的日期选择控件；右侧为 type="daterange" 的日期范围选择。
选择月份
通过 type="month" 选择月份；右侧为 type="monthrange" 的月份范围选择。
选择年份
通过 type="year" 选择年份；右侧为 type="yearrange" 的年份范围选择。
选择日期时间
通过 type="datetime" 选择日期与时间；右侧为 type="datetimerange" 的日期时间范围选择。
API
Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 选中项绑定值 | Date / Date[] / string / number | — |
| type | 显示类型 | 'date' | 'datetime' | 'week' | 'month' | 'year' | 'dates' | 'months' | 'years' | 'daterange' | 'datetimerange' | 'monthrange' | 'yearrange' | date |
| is-range | 是否为范围选择 | boolean | false |
| value-format | 可选，绑定值的格式 | string | — |
| date-format | 可选，日期显示格式 | string | — |
| time-format | 可选，时间显示格式 | string | — |
| default-value | 可选，默认选中的值 | Date / [Date, Date] | — |
| default-time | 可选，范围选择的默认时间 | Date / [Date, Date] | — |
| disabled | 是否禁用 | boolean | false |
| disabled-date | 禁用日期的函数 | Function | — |
| cell-class-name | 为日期单元格自定义类名 | Function | — |
| shortcuts | 设置快捷选项 | Array | — |
| show-now | 是否显示"此刻"按钮 | boolean | true |
| show-confirm | 是否显示"确定"按钮 | boolean | false |
| show-footer | 是否显示底部 | boolean | false |
| show-week-number | 是否显示周数 | boolean | false |
| arrow-control | 是否使用箭头控制时间面板 | boolean | false |
| unlink-panels | 范围选择时是否禁用两个面板联动 | boolean | false |
| clearable | 是否可以清空 | boolean | true |
| border | 是否显示边框 | boolean | true |
| editable | 文本框是否可编辑 | boolean | true |
Events
| 事件名 | 说明 | 类型 |
|---|---|---|
| update:modelValue | 当绑定值变化时触发 | Function |
| change | 选中值变化时触发 | Function |