USAGE

Install

$ npm i @mistong/eui

demo

import { Calendar } from '@mistong/eui';

...

<Calendar />

Note

目前使用rc-calendar 5.x版本来支持ie8

API

日期类组件目前包含一下两种形式。

• Calendar
• MonthCalendar

共同的API

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | allowClear | 是否显示清除按钮 | boolean | true | | autoFocus | 自动获取焦点 | boolean | false | | className | 选择器 className | string | '' | | dateRender | 自定义日期单元格的内容 | function(currentDate: moment, today: moment) => React.ReactNode | - | | disabled | 禁用 | boolean | false | | disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | 无 | | dropdownClassName | 额外的弹出日历 className | string | - | | getCalendarContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 | | locale | 国际化配置('zh-cn' / 'en-us') | string | 'zh-cn' | | placeholder | 输入框提示文字 | string|RangePicker[] | - | | popupStyle | 额外的弹出日历样式 | object | {} | | style | 自定义输入框样式 | object | {} | | defaultValue | 默认日期 | moment | 无 |

| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | | value | 日期 | moment | 无 | | onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - | | disabledTime | 不可选择的时间 | function(date) | 无 |

共同的方法

| 名称 | 描述 | | --- | --- | | blur() | 移除焦点 | | focus() | 获取焦点 |

DatePicker

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | format | 展示的日期格式，配置参考 moment.js | string | "YYYY-MM-DD" | | mode | 日期面板的状态 | time|date|month|year | 'date' | | onPanelChange | 日期面板变化时的回调 | function(value, mode) | - |

MonthPicker

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | format | 展示的日期格式，配置参考 moment.js | string | "YYYY-MM" | | monthCellContentRender | 自定义的月份内容渲染方法 | function(date, locale): ReactNode | - |