0.1.6 • Published 5 years ago
@mistong/eui-calendar v0.1.6
USAGE
Install
$ npm i @mistong/euidemo
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 | - |