diff --git a/docs/calendar/index.en-us.md b/docs/calendar/index.en-us.md
index 5589d0224c..69c09c8779 100644
--- a/docs/calendar/index.en-us.md
+++ b/docs/calendar/index.en-us.md
@@ -38,6 +38,7 @@ moment.locale('zh-cn');
| showOtherMonth | Show dates of other month in current date | Boolean | true |
| defaultVisibleMonth | Default visible month of panel
**signature**:
Function() => void | Function | - |
| onSelect | Callback when select a date
**signature**:
Function(value: Object) => void
**parameter**:
_value_: {Object} date object | Function | func.noop |
+| onModeChange | Callback when change mode
**签名**:
Function(mode: string) => void
**参数**:
_mode_: {string} mode type: date month year | Function | func.noop |
| dateCellRender | Render function for date cell
**signature**:
Function(value: Object) => ReactNode
**parameter**:
_value_: {Object} date object
**return**:
{ReactNode} null
| Function | (value) => value.date() |
| monthCellRender | Render function for month cell
**signature**:
Function(calendarDate: Object) => ReactNode
**parameter**:
_calendarDate_: {Object} current date object
**return**:
{ReactNode} null
| Function | - |
| disabledDate | Function to disable dates
**signature**:
Function(calendarDate: Object) => Boolean
**parameter**:
_calendarDate_: {Object} current date object
_view_: {Enum} current view type: 'year', 'month', 'date'
**return**:
{Boolean} null
| Function | - |
diff --git a/docs/calendar/index.md b/docs/calendar/index.md
index c78639778e..5173c834fa 100644
--- a/docs/calendar/index.md
+++ b/docs/calendar/index.md
@@ -34,9 +34,11 @@ moment.locale('zh-cn');
| defaultValue | 默认选中的日期（moment 对象） | custom | - |
| shape | 展现形态
**可选值**:
'card', 'fullscreen', 'panel' | Enum | 'fullscreen' |
| value | 选中的日期值 (moment 对象) | custom | - |
+| mode | 面板模式
**可选值**:
'date', 'month', 'year' | Enum | - |
| showOtherMonth | 是否展示非本月的日期 | Boolean | true |
| defaultVisibleMonth | 默认展示的月份
**签名**:
Function() => void | Function | - |
| onSelect | 选择日期单元格时的回调
**签名**:
Function(value: Object) => void
**参数**:
_value_: {Object} 对应的日期值 (moment 对象) | Function | func.noop |
+| onModeChange | 面板模式变化时的回调
**签名**:
Function(mode: String) => void
**参数**:
_mode_: {String} 对应面板模式 date month year | Function | func.noop |
| onVisibleMonthChange | 展现的月份变化时的回调
**签名**:
Function(value: Object, reason: String) => void
**参数**:
_value_: {Object} 显示的月份 (moment 对象)
_reason_: {String} 触发月份改变原因 | Function | func.noop |
| dateCellRender | 自定义日期渲染函数
**签名**:
Function(value: Object) => ReactNode
**参数**:
_value_: {Object} 日期值（moment对象）
**返回值**:
{ReactNode} null
| Function | value => value.date() |
| monthCellRender | 自定义月份渲染函数
**签名**:
Function(calendarDate: Object) => ReactNode
**参数**:
_calendarDate_: {Object} 对应 Calendar 返回的自定义日期对象
**返回值**:
{ReactNode} null
| Function | - |
diff --git a/src/calendar/calendar.jsx b/src/calendar/calendar.jsx
index 582f9037cf..237b9ec6ea 100644
--- a/src/calendar/calendar.jsx
+++ b/src/calendar/calendar.jsx
@@ -36,8 +36,10 @@ class Calendar extends Component {
* 选中的日期值 (moment 对象)
*/
value: checkMomentObj,
- // 面板模式
- mode: PropTypes.oneOf(CALENDAR_MODES),
+ /**
+ * 面板模式
+ */
+ mode: PropTypes.oneOf(CALENDAR_MODES), // 生成 API 文档需要手动改回 ['date', 'month', 'year']
// 面板可变化的模式列表，仅初始化时接收一次
modes: PropTypes.array,
// 日期值的格式（用于日期title显示的格式）
@@ -59,6 +61,11 @@ class Calendar extends Component {
* @param {Object} value 对应的日期值 (moment 对象)
*/
onSelect: PropTypes.func,
+ /**
+ * 面板模式变化时的回调
+ * @param {Object} mode 对应面板模式 date month year
+ */
+ onModeChange: PropTypes.func,
/**
* 展现的月份变化时的回调
* @param {Object} value 显示的月份 (moment 对象)
@@ -103,6 +110,7 @@ class Calendar extends Component {
format: 'YYYY-MM-DD',
onSelect: func.noop,
onVisibleMonthChange: func.noop,
+ onModeChange: func.noop,
dateCellRender: value => value.date(),
locale: nextLocale.Calendar,
showOtherMonth: true,
@@ -165,6 +173,7 @@ class Calendar extends Component {
nextMode !== this.state.mode
) {
this.setState({ mode: nextMode });
+ this.props.onModeChange(nextMode);
}
};
diff --git a/test/calendar/index-spec.js b/test/calendar/index-spec.js
index a54d2a6ccc..6997ffcb78 100644
--- a/test/calendar/index-spec.js
+++ b/test/calendar/index-spec.js
@@ -1,4 +1,5 @@
import React from 'react';
+import sinon from 'sinon';
import Enzyme, { mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import assert from 'power-assert';
@@ -154,13 +155,16 @@ describe('Calendar', () => {
describe('action', () => {
it('should change mode', () => {
- wrapper = mount();
+ const onModeChange = sinon.spy();
+
+ wrapper = mount();
wrapper
.find('.next-radio-wrapper input')
.at(1)
.simulate('change', { target: { checked: true } });
assert(wrapper.find('td').length === 12);
assert(wrapper.find('td[title="1月"]').length === 1);
+ assert(onModeChange.calledOnce);
});
it('should change panel mode to month', () => {