![](\"https://img.alicdn.com/tps/TB1mYC8KVXXXXaHXXXXXXXXXXXX-566-678.png\")
\n\n![](\"https://img.alicdn.com/tps/TB1KW1HKVXXXXa9aXXXXXXXXXXX-578-694.png\")
\n\n![](\"https://img.alicdn.com/tps/TB1QYqPKVXXXXasXVXXXXXXXXXX-1196-712.png\")
\n\n![](\"https://img.alicdn.com/tps/TB1nAGDKVXXXXXvapXXXXXXXXXX-1206-730.png\")
\n\n## Feature\n\n* support ie9,ie9+,chrome,firefox,safari\n* support date, month, year, decade select panel\n* support week number\n* support en_US and zh_CN locale(UI), use moment.utcOffset to set timezone\n* support aria and keyboard accessibility\n\n### Keyboard\n\n* Previous month (PageUp)\n* Next month (PageDown)\n* tab into hour input: Last hour(Up), Next hour(Down)\n* tab into hour input: Last minute(Up), Next minute(Down)\n* tab into hour input: Last second(Up), Next second(Down)\n* Last year (Control + left)\n* Next year (Control + right)\n\n## install\n\n[](https://npmjs.org/package/rc-calendar)\n\n## Usage\n\n```js\nimport Calendar from 'rc-calendar';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nReactDOM.render(| name | \ntype | \ndefault | \ndescription | \n
|---|---|---|---|
| prefixCls | \nString | \n\n | prefixCls of this component | \n
| className | \nString | \n\n | additional css class of root dom node | \n
| style | \nObject | \n\n | additional style of root dom node | \n
| dateRender | \n(current, value) => React.Node | \n\n | date cell | \n
| renderSidebar | \n() => React.Node | \n\n | side bar | \n
| renderFooter | \n(mode) => React.Node | \n\n | extra footer | \n
| value | \nmoment | \n\n | current value like input's value | \n
| defaultValue | \nmoment | \n\n | defaultValue like input's defaultValue | \n
| locale | \nObject | \nimport from 'rc-calendar/lib/locale/en_US' | \ncalendar locale | \n
| format | \nString | String[] | \ndepends on whether you set timePicker and your locale | \nuse to format/parse date(without time) value to/from input. \n When an array is provided, all values are used for parsing and first value for display. | \n
| disabledDate | \nFunction(current:moment):Boolean | \n\n | whether to disable select of current date | \n
| disabledTime | \nFunction(current:moment):Object | \n\n | a function which return a object with member of disabledHours/disabledMinutes/disabledSeconds according to rc-time-picker | \n
| showDateInput | \nBoolean | \ntrue | \nwhether to show input on top of calendar panel | \n
| showWeekNumber | \nBoolean | \nfalse | \nwhether to show week number of year | \n
| showToday | \nBoolean | \ntrue | \nwhether to show today button | \n
| showOk | \nBoolean | \nauto | \nwhether has ok button in footer | \n
| timePicker | \nReact Element | \n\n | rc-timer-picker/lib/module/panel element | \n
| onSelect | \nFunction(date: moment) | \n\n | called when a date is selected from calendar | \n
| onClear | \nFunction() | \n\n | called when a date is cleared from calendar | \n
| onChange | \nFunction(date: moment) | \n\n | called when a date is changed inside calendar (next year/next month/keyboard) | \n
| onOk | \nFunction(date: moment) | \n\n | called when ok button is pressed, only if it's visible | \n
| dateInputPlaceholder | \nString | \n\n | date input's placeholder | \n
| mode | \nenum('time', 'date', 'month', 'year', 'decade') | \n'date' | \ncontrol which kind of panel should be shown | \n
| onPanelChange | \nFunction(date: moment, mode) | \n\n | called when panel changed | \n
| clearIcon | \nReactNode | \n\n | specific the clear icon. | \n
| name | \ntype | \ndefault | \ndescription | \n
|---|---|---|---|
| prefixCls | \nString | \n\n | prefixCls of this component | \n
| className | \nString | \n\n | additional css class of root dom node | \n
| style | \nObject | \n\n | additional style of root dom node | \n
| renderSidebar | \n() => React.Node | \n\n | side bar | \n
| renderFooter | \n() => React.Node | \n\n | extra footer | \n
| selectedValue | \nmoment[] | \n\n | current selected value range. with two elements. | \n
| defaultSelectedValue | \nmoment[] | \n\n | default selected value range | \n
| locale | \nObject | \nimport from 'rc-calendar/lib/locale/en_US' | \ncalendar locale | \n
| format | \nString | \ndepends on whether you set timePicker and your locale | \nuse to format/parse date(without time) value to/from input | \n
| disabledDate | \nFunction(current:moment):Boolean | \n\n | whether to disable select of current date | \n
| showWeekNumber | \nBoolean | \nfalse | \nwhether to show week number of year | \n
| showToday | \nBoolean | \ntrue | \nwhether to show today button | \n
| showOk | \nBoolean | \nauto | \nwhether has ok button in footer | \n
| showClear | \nBoolean | \nfalse | \nwhether has clear button in header | \n
| timePicker | \nReact Element | \n\n | rc-timer-picker/lib/module/panel element | \n
| onSelect | \nFunction(date: moment[]) | \n\n | called when a date range is selected from calendar | \n
| onInputSelect | \nFunction(date: moment[]) | \n\n | called when a valid date entered in input | \n
| onClear | \nFunction() | \n\n | called when a date range is cleared from calendar | \n
| onChange | \nFunction(date: moment[]) | \n\n | called when a date range is changed inside calendar (next year/next month/keyboard) | \n
| onOk | \nFunction(date: moment) | \n\n | called when ok button is pressed, only if it's visible | \n
| dateInputPlaceholder | \nString[] | \n\n | range date input's placeholders | \n
| disabledTime | \nFunction(current: moment[], type:'start'|'end'):Object | \n\n | a function which return a object with member of disabledHours/disabledMinutes/disabledSeconds according to rc-time-picker | \n
| showDateInput | \nBoolean | \ntrue | \nwhether to show date inputs on top of calendar panels | \n
| type | \nenum('both','start', 'end') | \nboth | \nwhether fix start or end selected value. check start-end-range example | \n
| mode | \nenum('date', 'month', 'year', 'decade')[] | \n['date', 'date'] | \ncontrol which kind of panels should be shown | \n
| onPanelChange | \nFunction(date: moment[], mode) | \n\n | called when panels changed | \n
| hoverValue | \nmoment[] | \n\n | control hover value | \n
| onHoverChange | \nFunction(hoverValue: moment[]) | \n\n | called when hover value change | \n
| clearIcon | \nReactNode | \n\n | specific the clear icon. | \n
| name | \ntype | \ndefault | \ndescription | \n
|---|---|---|---|
| prefixCls | \nString | \n\n | prefixCls of this component | \n
| className | \nString | \n\n | additional css class of root dom node | \n
| style | \nObject | \n\n | additional style of root dom node | \n
| value | \nmoment | \n\n | current value like input's value | \n
| defaultValue | \nmoment | \n\n | defaultValue like input's defaultValue | \n
| locale | \nObject | \nimport from 'rc-calendar/lib/locale/en_US' | \ncalendar locale | \n
| disabledDate | \nFunction(current:moment):Boolean | \n\n | whether to disable select of current month | \n
| onSelect | \nFunction(date: moment) | \n\n | called when a date is selected from calendar | \n
| monthCellRender | \nfunction | \n\n | Custom month cell render method | \n
| dateCellRender | \nfunction | \n\n | Custom date cell render method | \n
| monthCellContentRender | \nfunction | \n\n | Custom month cell content render method,the content will be appended to the cell. | \n
| onChange | \nFunction(date: moment) | \n\n | called when a date is changed inside calendar (next year/next month/keyboard) | \n
| renderFooter | \n() => React.Node | \n\n | extra footer | \n
| name | \ntype | \ndefault | \ndescription | \n
|---|---|---|---|
| prefixCls | \nString | \n\n | prefixCls of this component | \n
| calendar | \nCalendar React Element | \n\n | \n |
| disabled | \nBoolean | \n\n | whether picker is disabled | \n
| placement | \nString|Object | \n\n | one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'] | \n
| align | \nObject: alignConfig of [dom-align](https://github.com/yiminghe/dom-align) | \n\n | value will be merged into placement's align config. | \n
| animation | \nString | \n\n | index.css support 'slide-up' | \n
| transitionName | \nString | \n\n | css class for animation | \n
| value | \nmoment|moment[] | \n\n | current value like input's value | \n
| defaultValue | \nmoment|moment[] | \n\n | defaultValue like input's defaultValue | \n
| onChange | \nFunction | \n\n | called when select a different value | \n
| onOpenChange | \n(open:boolean) => void | \n\n | called when open/close picker | \n
| open | \nBoolean | \n\n | current open state of picker. controlled prop | \n
| getCalendarContainer | \n() => HTMLElement | \n() => {return document.body;} | \ndom node where calendar to be rendered into | \n
| dropdownClassName | \nstring | \n\n | additional className applied to dropdown | \n
| name | \ntype | \ndefault | \ndescription | \n
|---|---|---|---|
| prefixCls | \nString | \n\n | prefixCls of this component | \n
| Select | \nReact Component Class | \n\n | rc-select Component Class | \n
| value | \nmoment | \n\n | current value like input's value | \n
| defaultValue | \nmoment | \n\n | defaultValue like input's defaultValue | \n
| defaultType | \nstring | \ndate | \ndefault panel type: date/month | \n
| type | \nstring | \n\n | panel type: date/month | \n
| onTypeChange | \nfunction(type) | \n\n | called when panel type change | \n
| fullscreen | \nbool | \nfalse | \n\n |
| monthCellRender | \nfunction | \n\n | Custom month cell render method | \n
| dateCellRender | \nfunction | \n\n | Custom date cell render method | \n
| monthCellContentRender | \nfunction | \n\n | Custom month cell content render method,the content will be appended to the cell. | \n
| dateCellContentRender | \nfunction | \n\n | Custom date cell content render method,the content will be appended to the cell. | \n
| onSelect | \nFunction(date: moment) | \n\n | called when a date is selected from calendar | \n
\n\n\n\n\n\n\n\n## Feature\n\n* support ie9,ie9+,chrome,firefox,safari\n* support date, month, year, decade select panel\n* support week number\n* support en_US and zh_CN locale(UI), use moment.utcOffset to set timezone\n* support aria and keyboard accessibility\n\n### Keyboard\n\n* Previous month (PageUp)\n* Next month (PageDown)\n* tab into hour input: Last hour(Up), Next hour(Down)\n* tab into hour input: Last minute(Up), Next minute(Down)\n* tab into hour input: Last second(Up), Next second(Down)\n* Last year (Control + left)\n* Next year (Control + right)\n\n## install\n\n[](https://npmjs.org/package/rc-calendar)\n\n## Usage\n\n```js\nimport Calendar from 'rc-calendar';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nReactDOM.render(| name | \ntype | \ndefault | \ndescription | \n
|---|---|---|---|
| prefixCls | \nString | \n\n | prefixCls of this component | \n
| className | \nString | \n\n | additional css class of root dom node | \n
| style | \nObject | \n\n | additional style of root dom node | \n
| dateRender | \n(current, value) => React.Node | \n\n | date cell | \n
| renderSidebar | \n() => React.Node | \n\n | side bar | \n
| renderFooter | \n(mode) => React.Node | \n\n | extra footer | \n
| value | \nmoment | \n\n | current value like input's value | \n
| defaultValue | \nmoment | \n\n | defaultValue like input's defaultValue | \n
| locale | \nObject | \nimport from 'rc-calendar/lib/locale/en_US' | \ncalendar locale | \n
| format | \nString | String[] | \ndepends on whether you set timePicker and your locale | \nuse to format/parse date(without time) value to/from input. \n When an array is provided, all values are used for parsing and first value for display. | \n
| disabledDate | \nFunction(current:moment):Boolean | \n\n | whether to disable select of current date | \n
| disabledTime | \nFunction(current:moment):Object | \n\n | a function which return a object with member of disabledHours/disabledMinutes/disabledSeconds according to rc-time-picker | \n
| showDateInput | \nBoolean | \ntrue | \nwhether to show input on top of calendar panel | \n
| showWeekNumber | \nBoolean | \nfalse | \nwhether to show week number of year | \n
| showToday | \nBoolean | \ntrue | \nwhether to show today button | \n
| showOk | \nBoolean | \nauto | \nwhether has ok button in footer | \n
| timePicker | \nReact Element | \n\n | rc-timer-picker/lib/module/panel element | \n
| onSelect | \nFunction(date: moment) | \n\n | called when a date is selected from calendar | \n
| onClear | \nFunction() | \n\n | called when a date is cleared from calendar | \n
| onChange | \nFunction(date: moment) | \n\n | called when a date is changed inside calendar (next year/next month/keyboard) | \n
| onOk | \nFunction(date: moment) | \n\n | called when ok button is pressed, only if it's visible | \n
| dateInputPlaceholder | \nString | \n\n | date input's placeholder | \n
| mode | \nenum('time', 'date', 'month', 'year', 'decade') | \n'date' | \ncontrol which kind of panel should be shown | \n
| onPanelChange | \nFunction(date: moment, mode) | \n\n | called when panel changed | \n
| clearIcon | \nReactNode | \n\n | specific the clear icon. | \n
| inputMode | \nstring | \ntext | \nChange the keyboard in mobile device | \n
| name | \ntype | \ndefault | \ndescription | \n
|---|---|---|---|
| prefixCls | \nString | \n\n | prefixCls of this component | \n
| className | \nString | \n\n | additional css class of root dom node | \n
| style | \nObject | \n\n | additional style of root dom node | \n
| renderSidebar | \n() => React.Node | \n\n | side bar | \n
| renderFooter | \n() => React.Node | \n\n | extra footer | \n
| selectedValue | \nmoment[] | \n\n | current selected value range. with two elements. | \n
| defaultSelectedValue | \nmoment[] | \n\n | default selected value range | \n
| locale | \nObject | \nimport from 'rc-calendar/lib/locale/en_US' | \ncalendar locale | \n
| format | \nString | \ndepends on whether you set timePicker and your locale | \nuse to format/parse date(without time) value to/from input | \n
| disabledDate | \nFunction(current:moment):Boolean | \n\n | whether to disable select of current date | \n
| showWeekNumber | \nBoolean | \nfalse | \nwhether to show week number of year | \n
| showToday | \nBoolean | \ntrue | \nwhether to show today button | \n
| showOk | \nBoolean | \nauto | \nwhether has ok button in footer | \n
| showClear | \nBoolean | \nfalse | \nwhether has clear button in header | \n
| timePicker | \nReact Element | \n\n | rc-timer-picker/lib/module/panel element | \n
| onSelect | \nFunction(date: moment[]) | \n\n | called when a date range is selected from calendar | \n
| onInputSelect | \nFunction(date: moment[]) | \n\n | called when a valid date entered in input | \n
| onClear | \nFunction() | \n\n | called when a date range is cleared from calendar | \n
| onChange | \nFunction(date: moment[]) | \n\n | called when a date range is changed inside calendar (next year/next month/keyboard) | \n
| onOk | \nFunction(date: moment) | \n\n | called when ok button is pressed, only if it's visible | \n
| dateInputPlaceholder | \nString[] | \n\n | range date input's placeholders | \n
| disabledTime | \nFunction(current: moment[], type:'start'|'end'):Object | \n\n | a function which return a object with member of disabledHours/disabledMinutes/disabledSeconds according to rc-time-picker | \n
| showDateInput | \nBoolean | \ntrue | \nwhether to show date inputs on top of calendar panels | \n
| type | \nenum('both','start', 'end') | \nboth | \nwhether fix start or end selected value. check start-end-range example | \n
| mode | \nenum('date', 'month', 'year', 'decade')[] | \n['date', 'date'] | \ncontrol which kind of panels should be shown | \n
| onPanelChange | \nFunction(date: moment[], mode) | \n\n | called when panels changed | \n
| hoverValue | \nmoment[] | \n\n | control hover value | \n
| onHoverChange | \nFunction(hoverValue: moment[]) | \n\n | called when hover value change | \n
| clearIcon | \nReactNode | \n\n | specific the clear icon. | \n
| name | \ntype | \ndefault | \ndescription | \n
|---|---|---|---|
| prefixCls | \nString | \n\n | prefixCls of this component | \n
| className | \nString | \n\n | additional css class of root dom node | \n
| style | \nObject | \n\n | additional style of root dom node | \n
| value | \nmoment | \n\n | current value like input's value | \n
| defaultValue | \nmoment | \n\n | defaultValue like input's defaultValue | \n
| locale | \nObject | \nimport from 'rc-calendar/lib/locale/en_US' | \ncalendar locale | \n
| disabledDate | \nFunction(current:moment):Boolean | \n\n | whether to disable select of current month | \n
| onSelect | \nFunction(date: moment) | \n\n | called when a date is selected from calendar | \n
| monthCellRender | \nfunction | \n\n | Custom month cell render method | \n
| monthCellContentRender | \nfunction | \n\n | Custom month cell content render method,the content will be appended to the cell. | \n
| onChange | \nFunction(date: moment) | \n\n | called when a date is changed inside calendar (next year/next month/keyboard) | \n
| renderFooter | \n() => React.Node | \n\n | extra footer | \n
| name | \ntype | \ndefault | \ndescription | \n
|---|---|---|---|
| prefixCls | \nString | \n\n | prefixCls of this component | \n
| calendar | \nCalendar React Element | \n\n | \n |
| disabled | \nBoolean | \n\n | whether picker is disabled | \n
| placement | \nString|Object | \n\n | one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'] | \n
| align | \nObject: alignConfig of [dom-align](https://github.com/yiminghe/dom-align) | \n\n | value will be merged into placement's align config. | \n
| animation | \nString | \n\n | index.css support 'slide-up' | \n
| transitionName | \nString | \n\n | css class for animation | \n
| value | \nmoment|moment[] | \n\n | current value like input's value | \n
| defaultValue | \nmoment|moment[] | \n\n | defaultValue like input's defaultValue | \n
| onChange | \nFunction | \n\n | called when select a different value | \n
| onOpenChange | \n(open:boolean) => void | \n\n | called when open/close picker | \n
| open | \nBoolean | \n\n | current open state of picker. controlled prop | \n
| getCalendarContainer | \n() => HTMLElement | \n() => {return document.body;} | \ndom node where calendar to be rendered into | \n
| dropdownClassName | \nstring | \n\n | additional className applied to dropdown | \n
| name | \ntype | \ndefault | \ndescription | \n
|---|---|---|---|
| prefixCls | \nString | \n\n | prefixCls of this component | \n
| Select | \nReact Component Class | \n\n | rc-select Component Class | \n
| value | \nmoment | \n\n | current value like input's value | \n
| defaultValue | \nmoment | \n\n | defaultValue like input's defaultValue | \n
| defaultType | \nstring | \ndate | \ndefault panel type: date/month | \n
| type | \nstring | \n\n | panel type: date/month | \n
| onTypeChange | \nfunction(type) | \n\n | called when panel type change | \n
| fullscreen | \nbool | \nfalse | \n\n |
| monthCellRender | \nfunction | \n\n | Custom month cell render method | \n
| dateCellRender | \nfunction | \n\n | Custom date cell render method | \n
| monthCellContentRender | \nfunction | \n\n | Custom month cell content render method,the content will be appended to the cell. | \n
| dateCellContentRender | \nfunction | \n\n | Custom date cell content render method,the content will be appended to the cell. | \n
| onSelect | \nFunction(date: moment) | \n\n | called when a date is selected from calendar | \n