@include 'common'

# Datepicker-2

输入或选择日期的控件。当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。

## 从 DatePicker 升级到 DatePicker2

1.22 版本增加当前组件

功能变化：

交互重构，面板和输入框分离，优化底部扩展等
使用 dayjs 日期库替换了 moment
新增 WeekPicker 和 QuarterPicker 选择器
新增了 preset 属性，支持预设日期
API 变化：

移除了 defaultVisibleMonth 属性，请使用 defaultPanelValue 替代（仅名字替换）
移除了 footerRender 属性，请使用 extraFooterRender 替代
showTime 之前属性类型既支持 Boolean 也支持 Object；现升级为仅支持 Boolean 类型，使用 timePanelProps 来传入时分秒的时间选择属性
onChange 和 onOk 等事件返回日期对象为 Dayjs 类型
输入或选择日期的控件。当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。

## 代码演示

### 1. 基本

最基本的用法。可以通过 onChange 监听选中值的变化。
@include 'demo1'

### 2. 范围选择

指定范围选择器类型。
@include 'demo2'

### 3. 禁用

选择框的不可用状态。你也可以通过数组单独禁用 RangePicker 的其中一项。
@include 'demo3'

### 4. 禁止选择某些日期

可以通过 disabledDate 属性来禁止用户选择或输入某些特定日期。
@include 'demo4'

### 5. 格式化

使用 format 属性，可以自定义日期显示格式。
@include 'demo5'

### 6.日期时间选择

如果需要同时选择时间，可以通过 showTime 属性开启，timePanelProps 支持传入 TimePickerPanel 的属性，例如 format, defaultValue 等。
@include 'demo6'

### 7. 预设时间快捷选择

通过 preset 预设时间快捷选择。
@include 'demo7'

### 8. 面板的默认展现日期

可以通过 defaultPanelValue 属性可以修改面板的默认展现日期。
@include 'demo8'

### 9. 无边框

无边框样式。
@include 'demo9'

### 10. 尺寸大小

通过 size 属性设置输入框大小，默认 medium。
@include 'demo10'

### 11. 自定义面板页脚

可以通过 extraFooterRender 自定义对面板页脚的定制。
@include 'demo11'