日期组件
@beisen-phoenix/date-picker
简介
日期组件，有多种日期格式可选
- year
- month
- date
DatePicker 参数
| 参数 | 说明 | 类型 | 默认值 | 是否必传 | 备注 |
|---|---|---|---|---|---|
| extraCls | 根节点的自定义className,一般用来自定义样式使用 | string | - | 否 | |
| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 moment.js | string/string[] | "YYYY-MM-DD" | 否 | |
| value | 日期 | string 或moment (http://momentjs.com/) 受控模式下使用 |
- | 否 | |
| defaultValue | 日期 | string 或moment (http://momentjs.com/) 非受控模式下使用 |
- | 否 | |
| showDateInput | 是否显示日期输入框 | Boolean | true | 否 | |
| showWeekNumber | 是否展示第几周 | boolean | true | 否 | |
| showToday | 是否展示“今天”按钮 | boolean | true | 否 | |
| showOk | 是否展示“确定”按钮 | boolean | true | 否 | |
| valueControllSelected | selectedValue是否受控于value | boolean | false | 否 | |
| dateInputPlaceholder | 输入框提示文字 | string | 请输入日期 | 否 | |
| dateRender | 自定义日期单元格的内容 | function(currentDate: moment, value: moment) => React.ReactNode | - | 否 | |
| renderSidebar | 在面板中添加额外的页头 | (mode) => React.Node | - | 否 | |
| renderFooter | 在面板中添加额外的页脚 | (mode) => React.Node | - | 否 | |
| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | 无 | 否 | |
| onSelect | 选择日期变化时的回调 | function(date: moment) | 无 | 否 | |
| onClear | 日期清空时的回调 | function() | 无 | 否 | |
| onChange | 内部日期变化时的回调（前后一个月，前后一年等） | function(date: moment) | 无 | 否 | |
| onPanelChange | 日历面板切换的回调 | function(value, mode) | - | 否 | |
| onOk | 点击确定按钮的回调 | function(date: moment) | - | 否 | |
| clearIcon | 自定义的清除图标 | () => React.ReactNode | - | 否 | |
| lang | 当前语言环境(zh_CN,en_US,zh_TW) | string | zh_CN | 否 | 否 |
| locale | 自定义语言包（低版本兼容） | object | - | 否 | |
| translation | 自定义语言包，详情见下方 | object | - | 否 | 否 |
| visible | 组件是否可见 | boolean | - | 否 | 否 |
| autoFocus | 是否自动获取焦点 | boolean | - | 否 | 否 |
| mondayIsFirst | 是否固定周一为日历行起始日期 | boolean | - | 否 | 否 |
DateRangePicker 参数
| 参数 | 说明 | 类型 | 默认值 | 是否必传 | 备注 |
|---|---|---|---|---|---|
| extraCls | 根节点的自定义className,一般用来自定义样式使用 | string | - | 否 | |
| format | 设置日期格式 | Moment[] | string[] | 否 | |
| value | 日期 | Moment[] | string[] | 无 | 否 |
| defaultValue | 日期 | Moment[] | string[] | 无 | 否 |
| showDateInput | 是否显示日期输入框 | Boolean | true | 否 | |
| showWeekNumber | 是否展示第几周 | boolean | true | 否 | |
| showToday | 是否展示“今天”按钮 | boolean | true | 否 | |
| showOk | 是否展示“确定”按钮 | boolean | true | 否 | |
| dateInputPlaceholder | 输入框提示文字 | string/string[] | 请输入日期 | 否 | |
| showClear | 是否显示清除按钮，当输入框中有值且该参数为true时显示清除按钮 | boolean | true | 否 | |
| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | 无 | 否 | |
| renderSidebar | 在面板中添加额外的页头 | (mode) => React.Node | - | 否 | |
| renderFooter | 在面板中添加额外的页脚 | (mode) => React.Node | - | 否 | |
| onClear | 日期清空时的回调 | function() | 无 | 否 | |
| onSelect | 选择日期变化时的回调 | function(date: moment[]) | 无 | 否 | |
| onOk | 点击确定按钮的回调 | function(date: moment) | - | 否 | |
| onChange | 内部日期变化时的回调（前后一个月，前后一年等） | function(date: moment[]) | 无 | 否 | |
| onPanelChange | 日历面板切换的回调 | function(value:moment[], mode) | - | 否 | |
| clearIcon | 自定义的清除图标 | () => React.ReactNode | - | 否 | |
| lang | 当前语言环境(zh_CN,en_US,zh_TW) | string | zh_CN | 否 | 否 |
| locale | 自定义语言包（低版本兼容） | object | - | 否 | |
| translation | 自定义语言包，详情见下方 | object | - | 否 | 否 |
| visible | 组件是否可见 | boolean | - | 否 | 否 |
| autoFocus | 是否自动获取焦点 | boolean | - | 否 | 否 |
MonthPicker 参数
| 参数 | 说明 | 类型 | 默认值 | 是否必传 | 备注 |
|---|---|---|---|---|---|
| extraCls | 根节点的自定义className,一般用来自定义样式使用 | string | - | 否 | |
| value | 日期 | string 或moment (http://momentjs.com/) 受控模式下使用 |
无 | 否 | |
| defaultValue | 日期 | string 或moment (http://momentjs.com/) 非受控模式下使用 |
无 | 否 | |
| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | 无 | 否 | |
| renderFooter | 在面板中添加额外的页脚 | (mode) => React.Node | - | 否 | |
| onChange | 内部日期变化时的回调（前后一个月，前后一年等） | function(date: moment) | 无 | 否 | |
| onSelect | 选择日期变化时的回调 | function(date: moment) | 无 | 否 | |
| lang | 当前语言环境(zh_CN,en_US,zh_TW) | string | zh_CN | 否 | 否 |
| locale | 自定义语言包（低版本兼容） | object | - | 否 | |
| translation | 自定义语言包，详情见下方 | object | - | 否 | 否 |
| visible | 组件是否可见 | boolean | - | 否 | 否 |
| autoFocus | 是否自动获取焦点 | boolean | - | 否 | 否 |
相关说明
多语言 translation
内置了多语言包，只需要传递 lang 参数选择语言包，同时可以传递 translation 参数自定义语言包。
注意： 请保证 value 的语言包和 lang 对应的语言包是一致的。
import { Locale } from '@beisen-phoenix/rc-calendar';
const translation = {
...Locale.zh_CN,
// 覆盖已有字段
ok: '确定',
backToToday: '回到今天',
// 新增字段
lang:'zh-cn',
placeholder: '请输入',
rangePlaceholder: ['开始日期', '结束日期'],
backToCurrentMonth: '本月',
backToCurrentYear: '今年'
};