输入或选择日期的控件。当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。
交互说明
DatePicker/RangePicker 在交互上增加了操作焦点的设置，意味着，如果某个输入框处于 focus 态，那么当前选择的日期将会作用于该输入框对应的日期。
最基本的用法。可以通过 onChange 监听选中值的变化。
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| label | 输入框内置标签 | ReactNode | - |
| size | 输入框尺寸 可选值: 'small', 'medium', 'large' | Enum | 'medium' |
| state | 输入框状态 可选值: 'success', 'loading', 'error' | Enum | - |
| placeholder | 输入提示 | String | - |
| defaultVisibleMonth | 默认展现的月 签名: Function() => MomentObject 返回值: {MomentObject} 返回包含指定月份的 moment 对象实例 | Function | - |
| value | 日期值（受控）moment 对象 | custom | - |
| defaultValue | 初始日期值，moment 对象 | custom | - |
| format | 日期值的格式（用于限定用户输入和展示） | String | 'YYYY-MM-DD' |
| showTime | 是否使用时间控件，传入 TimePicker 的属性 { defaultValue, format, ... } | Object/Boolean | false |
| resetTime | 每次选择日期时是否重置时间（仅在 showTime 开启时有效） | Boolean | false |
| disabledDate | 禁用日期函数 签名: Function(日期值: MomentObject, view: String) => Boolean 参数: 日期值: {MomentObject} null view: {String} 当前视图类型，year: 年， month: 月, date: 日 返回值: {Boolean} 是否禁用 | Function | () => false |
| footerRender | 自定义面板页脚 签名: Function() => Node 返回值: {Node} 自定义的面板页脚组件 | Function | () => null |
| onChange | 日期值改变时的回调 签名: Function(value: MomentObject/String) => void 参数: value: {MomentObject/String} 日期值 | Function | func.noop |
| onOk | 点击确认按钮时的回调 签名: Function() => MomentObject/String 返回值: {MomentObject/String} 日期值 | Function | func.noop |
| disabled | 是否禁用 | Boolean | - |
| hasClear | 是否显示清空按钮 | Boolean | true |
| visible | 弹层显示状态 | Boolean | - |
| defaultVisible | 弹层默认是否显示 | Boolean | false |
| onVisibleChange | 弹层展示状态变化时的回调 签名: Function(visible: Boolean, type: String) => void 参数: visible: {Boolean} 弹层是否显示 type: {String} 触发弹层显示和隐藏的来源 calendarSelect 表示由日期表盘的选择触发； okBtnClick 表示由确认按钮触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发 | Function | func.noop |
| popupTriggerType | 弹层触发方式 可选值: 'click', 'hover' | Enum | 'click' |
| popupAlign | 弹层对齐方式,具体含义见 OverLay文档 | String | 'tl tl' |
| popupContainer | 弹层容器 | any | - |
| popupStyle | 弹层自定义样式 | Object | - |
| popupClassName | 弹层自定义样式类 | String | - |
| popupProps | 弹层其他属性 | Object | - |
| followTrigger | 是否跟随滚动 | Boolean | - |
| inputProps | 输入框其他属性 | Object | - |
| dateCellRender | 自定义日期渲染函数 签名: Function(value: Object) => ReactNode 参数: value: {Object} 日期值（moment对象） 返回值: {ReactNode} null | Function | - |
| monthCellRender | 自定义月份渲染函数 签名: Function(calendarDate: Object) => ReactNode 参数: calendarDate: {Object} 对应 Calendar 返回的自定义日期对象 返回值: {ReactNode} null | Function | - |
| dateInputAriaLabel | 日期输入框的 aria-label 属性 | String | - |
| timeInputAriaLabel | 时间输入框的 aria-label 属性 | String | - |
| isPreview | 是否为预览态 | Boolean | - |
| renderPreview | 预览态模式下渲染的内容 签名: Function(value: MomentObject) => void 参数: value: {MomentObject} 日期 | Function | - |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| label | 输入框内置标签 | ReactNode | - |
| size | 输入框尺寸 可选值: 'small', 'medium', 'large' | Enum | 'medium' |
| state | 输入框状态 可选值: 'success', 'loading', 'error' | Enum | - |
| placeholder | 输入提示 | String | - |
| defaultVisibleYear | 默认展现的年 签名: Function() => MomentObject 返回值: {MomentObject} 返回包含指定年份的 moment 对象实例 | Function | - |
| value | 日期值（受控）moment 对象 | custom | - |
| defaultValue | 初始日期值，moment 对象 | custom | - |
| format | 日期值的格式（用于限定用户输入和展示） | String | 'YYYY-MM' |
| disabledDate | 禁用日期函数 签名: Function(日期值: MomentObject, view: String) => Boolean 参数: 日期值: {MomentObject} null view: {String} 当前视图类型，year: 年， month: 月, date: 日 返回值: {Boolean} 是否禁用 | Function | () => false |
| footerRender | 自定义面板页脚 签名: Function() => Node 返回值: {Node} 自定义的面板页脚组件 | Function | () => null |
| onChange | 日期值改变时的回调 签名: Function(value: MomentObject/String) => void 参数: value: {MomentObject/String} 日期值 | Function | func.noop |
| disabled | 是否禁用 | Boolean | - |
| hasClear | 是否显示清空按钮 | Boolean | true |
| visible | 弹层显示状态 | Boolean | - |
| defaultVisible | 弹层默认是否显示 | Boolean | - |
| onVisibleChange | 弹层展示状态变化时的回调 签名: Function(visible: Boolean, type: String) => void 参数: visible: {Boolean} 弹层是否显示 type: {String} 触发弹层显示和隐藏的来源 calendarSelect 表示由日期表盘的选择触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发 | Function | func.noop |
| popupTriggerType | 弹层触发方式 可选值: 'click', 'hover' | Enum | 'click' |
| popupAlign | 弹层对齐方式, 具体含义见 OverLay文档 | String | 'tl tl' |
| popupContainer | 弹层容器 | any | - |
| popupStyle | 弹层自定义样式 | Object | - |
| popupClassName | 弹层自定义样式类 | String | - |
| popupProps | 弹层其他属性 | Object | - |
| followTrigger | 是否跟随滚动 | Boolean | - |
| inputProps | 输入框其他属性 | Object | - |
| monthCellRender | 自定义月份渲染函数 签名: Function(calendarDate: Object) => ReactNode 参数: calendarDate: {Object} 对应 Calendar 返回的自定义日期对象 返回值: {ReactNode} null | Function | - |
| dateInputAriaLabel | 日期输入框的 aria-label 属性 | String | - |
| isPreview | 是否为预览态 | Boolean | - |
| renderPreview | 预览态模式下渲染的内容 签名: Function(value: MomentObject) => void 参数: value: {MomentObject} 月份 | Function | - |
| 参数 | 说明 | 类型 | 默认值 | ||||
|---|---|---|---|---|---|---|---|
| size | 输入框尺寸 可选值: 'small', 'medium', 'large' | Enum | 'medium' | ||||
| type | 日期范围类型 可选值: 'date', 'month', 'year' | Enum | 'date' | ||||
| defaultVisibleMonth | 默认展示的起始月份 签名: Function() => MomentObject 返回值: {MomentObject} 返回包含指定月份的 moment 对象实例 | Function | - | ||||
| value | 日期范围值数组 [moment, moment] | Array | - | ||||
| defaultValue | 初始的日期范围值数组 [moment, moment] | Array | - | ||||
| format | 日期格式 | String | - | ||||
| showTime | 是否使用时间控件，支持传入 TimePicker 的属性 | Object/Boolean | false | ||||
| resetTime | 每次选择是否重置时间（仅在 showTime 开启时有效） | Boolean | false | ||||
| disabledDate | 禁用日期函数 签名: Function(日期值: MomentObject, view: String) => Boolean 参数: 日期值: {MomentObject} null view: {String} 当前视图类型，year: 年， month: 月, date: 日 返回值: {Boolean} 是否禁用 | Function | () => false | ||||
| footerRender | 自定义面板页脚 签名: Function() => Node 返回值: {Node} 自定义的面板页脚组件 | Function | () => null | ||||
| onChange | 日期范围值改变时的回调 [ MomentObject | String, MomentObject | String ] 签名: Function(value: Array) => void 参数: value: {Array} 日期值 | Function | func.noop | ||
| onOk | 点击确认按钮时的回调 返回开始时间和结束时间`[ MomentObject | String, MomentObject | String ]` 签名: Function() => Array 返回值: {Array} 日期范围 | Function | func.noop | ||
| label | 输入框内置标签 | ReactNode | - | ||||
| state | 输入框状态 可选值: 'error', 'loading', 'success' | Enum | - | ||||
| disabled | 是否禁用 | Boolean | - | ||||
| hasClear | 是否显示清空按钮 | Boolean | true | ||||
| visible | 弹层显示状态 | Boolean | - | ||||
| defaultVisible | 弹层默认是否显示 | Boolean | false | ||||
| onVisibleChange | 弹层展示状态变化时的回调 签名: Function(visible: Boolean, type: String) => void 参数: visible: {Boolean} 弹层是否显示 type: {String} 触发弹层显示和隐藏的来源 okBtnClick 表示由确认按钮触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发 | Function | func.noop | ||||
| popupTriggerType | 弹层触发方式 可选值: 'click', 'hover' | Enum | 'click' | ||||
| popupAlign | 弹层对齐方式, 具体含义见 OverLay文档 | String | 'tl tl' | ||||
| popupContainer | 弹层容器 | any | - | ||||
| popupStyle | 弹层自定义样式 | Object | - | ||||
| popupClassName | 弹层自定义样式类 | String | - | ||||
| popupProps | 弹层其他属性 | Object | - | ||||
| followTrigger | 是否跟随滚动 | Boolean | - | ||||
| inputProps | 输入框其他属性 | Object | - | ||||
| dateCellRender | 自定义日期单元格渲染 签名: Function() => void | Function | - | ||||
| monthCellRender | 自定义月份渲染函数 签名: Function(calendarDate: Object) => ReactNode 参数: calendarDate: {Object} 对应 Calendar 返回的自定义日期对象 返回值: {ReactNode} null | Function | - | ||||
| startDateInputAriaLabel | 开始日期输入框的 aria-label 属性 | String | - | ||||
| startTimeInputAriaLabel | 开始时间输入框的 aria-label 属性 | String | - | ||||
| endDateInputAriaLabel | 结束日期输入框的 aria-label 属性 | String | - | ||||
| endTimeInputAriaLabel | 结束时间输入框的 aria-label 属性 | String | - | ||||
| isPreview | 是否为预览态 | Boolean | - | ||||
| renderPreview | 预览态模式下渲染的内容 签名: Function(value: Array) => void 参数: value: {Array} 日期区间 | Function | - |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| label | 输入框内置标签 | ReactNode | - |
| size | 输入框尺寸 可选值: 'small', 'medium', 'large' | Enum | 'medium' |
| state | 输入框状态 可选值: 'success', 'loading', 'error' | Enum | - |
| placeholder | 输入提示 | String | - |
| defaultVisibleMonth | 默认展现的月 签名: Function() => MomentObject 返回值: {MomentObject} 返回包含指定月份的 moment 对象实例 | Function | - |
| value | 日期值（受控）moment 对象 | custom | - |
| defaultValue | 初始日期值，moment 对象 | custom | - |
| format | 日期值的格式（用于限定用户输入和展示） | String | 'YYYY-wo' |
| disabledDate | 禁用日期函数 签名: Function(日期值: MomentObject, view: String) => Boolean 参数: 日期值: {MomentObject} null view: {String} 当前视图类型，year: 年， month: 月, date: 日 返回值: {Boolean} 是否禁用 | Function | () => false |
| footerRender | 自定义面板页脚 签名: Function() => Node 返回值: {Node} 自定义的面板页脚组件 | Function | () => null |
| onChange | 日期值改变时的回调 签名: Function(value: MomentObject/String) => void 参数: value: {MomentObject/String} 日期值 | Function | func.noop |
| disabled | 是否禁用 | Boolean | - |
| hasClear | 是否显示清空按钮 | Boolean | true |
| visible | 弹层显示状态 | Boolean | - |
| defaultVisible | 弹层默认是否显示 | Boolean | false |
| onVisibleChange | 弹层展示状态变化时的回调 签名: Function(visible: Boolean, type: String) => void 参数: visible: {Boolean} 弹层是否显示 type: {String} 触发弹层显示和隐藏的来源 calendarSelect 表示由日期表盘的选择触发； okBtnClick 表示由确认按钮触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发 | Function | func.noop |
| popupTriggerType | 弹层触发方式 可选值: 'click', 'hover' | Enum | 'click' |
| popupAlign | 弹层对齐方式,具体含义见 OverLay文档 | String | 'tl tl' |
| popupContainer | 弹层容器 | any | - |
| popupStyle | 弹层自定义样式 | Object | - |
| popupClassName | 弹层自定义样式类 | String | - |
| popupProps | 弹层其他属性 | Object | - |
| followTrigger | 是否跟随滚动 | Boolean | - |
| inputProps | 输入框其他属性 | Object | - |
| dateCellRender | 自定义日期渲染函数 签名: Function(value: Object) => ReactNode 参数: value: {Object} 日期值（moment对象） 返回值: {ReactNode} null | Function | - |
| monthCellRender | 自定义月份渲染函数 签名: Function(calendarDate: Object) => ReactNode 参数: calendarDate: {Object} 对应 Calendar 返回的自定义日期对象 返回值: {ReactNode} null | Function | - |
| isPreview | 是否为预览态 | Boolean | - |
| renderPreview | 预览态模式下渲染的内容 签名: Function(value: MomentObject) => void 参数: value: {MomentObject} 年份 | Function | - |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| label | 输入框内置标签 | ReactNode | - |
| size | 输入框尺寸 可选值: 'small', 'medium', 'large' | Enum | 'medium' |
| state | 输入框状态 可选值: 'success', 'loading', 'error' | Enum | - |
| placeholder | 输入提示 | String | - |
| value | 日期值（受控）moment 对象 | custom | - |
| defaultValue | 初始日期值，moment 对象 | custom | - |
| format | 日期值的格式（用于限定用户输入和展示） | String | 'YYYY' |
| disabledDate | 禁用日期函数 签名: Function(日期值: MomentObject, view: String) => Boolean 参数: 日期值: {MomentObject} null view: {String} 当前视图类型，year: 年， month: 月, date: 日 返回值: {Boolean} 是否禁用 | Function | () => false |
| footerRender | 自定义面板页脚 签名: Function() => Node 返回值: {Node} 自定义的面板页脚组件 | Function | () => null |
| onChange | 日期值改变时的回调 签名: Function(value: MomentObject/String) => void 参数: value: {MomentObject/String} 日期值 | Function | func.noop |
| disabled | 是否禁用 | Boolean | - |
| hasClear | 是否显示清空按钮 | Boolean | true |
| visible | 弹层显示状态 | Boolean | - |
| defaultVisible | 弹层默认是否显示 | Boolean | - |
| onVisibleChange | 弹层展示状态变化时的回调 签名: Function(visible: Boolean, reason: String) => void 参数: visible: {Boolean} 弹层是否显示 reason: {String} 触发弹层显示和隐藏的来源 calendarSelect 表示由日期表盘的选择触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发 | Function | func.noop |
| popupTriggerType | 弹层触发方式 可选值: 'click', 'hover' | Enum | 'click' |
| popupAlign | 弹层对齐方式, 具体含义见 OverLay文档 | String | 'tl tl' |
| popupContainer | 弹层容器 | any | - |
| popupStyle | 弹层自定义样式 | Object | - |
| popupClassName | 弹层自定义样式类 | String | - |
| popupProps | 弹层其他属性 | Object | - |
| followTrigger | 是否跟随滚动 | Boolean | - |
| inputProps | 输入框其他属性 | Object | - |
| dateInputAriaLabel | 日期输入框的 aria-label 属性 | String | - |
| isPreview | 是否为预览态 | Boolean | - |
| renderPreview | 预览态模式下渲染的内容 签名: Function(value: MomentObject) => void 参数: value: {MomentObject} 年份 | Function | - |
可以通过 defaultValue 属性为日期选择器提供初值，所提供的初值必须为 moment 对象。
可以通过 defaultVisibleMonth 属性可以修改面板的默认展现日期。
通过 size 属性可以改变 Input 组件的尺寸，默认为 medium。
可以通过 disabledDate 属性来禁止用户选择或输入某些特定日期。
如果需要同时选择时间，可以通过 showTime 属性开启，showTime 支持传入 TimePickerPanel 的属性，例如 format, defaultValue 等。
当开启 disabled 属性时，选择框处于完全禁用状态。
通过 format 属性可以约束日期选择器的日期格式，该格式同时会限定用户的输入格式。
如果默认的 RangePicker 在交互上无法满足您的使用需求，还可以基于 DatePicker 封装实现类似的功能。 例如，示例中的日期选择可以自由的更改开始或结束日期，而不必每次选择时重置日期。
组件对外透出了 visible, defaultVisible, onVisibleChange, popupTriggerType, popupAlign, popupContainer, popupStyle, popupClassName 等属性用于直接定制弹层。此外，如果这些属性仍然无法满足需求，可以通过 popupProps 进行透传。
可以通过 footerRender 自定义对面板页脚的定制。
与 Field 结合使用，简单示范自定义返回值