DatePicker: show extra footer in all mode

components/date-picker/__tests__/DatePicker.test.js

@@ -163,4 +163,39 @@ describe('DatePicker', () => {
 
     expect(wrapper.render()).toMatchSnapshot();
   });
+
+  it('extra footer works', () => {
+    const wrapper = mount(
+      <DatePicker renderExtraFooter={mode => <span className="extra-node">{mode}</span>} />,
+    );
+    openPanel(wrapper);
+
+    let extraNode = wrapper.find('.extra-node');
+    expect(extraNode.length).toBe(1);
+    expect(extraNode.text()).toBe('date');
+
+    wrapper
+      .find('.ant-calendar-month-select')
+      .hostNodes()
+      .simulate('click');
+    extraNode = wrapper.find('.ant-calendar-month-panel .extra-node');
+    expect(extraNode.length).toBe(1);
+    expect(extraNode.text()).toBe('month');
+
+    wrapper
+      .find('.ant-calendar-year-select')
+      .hostNodes()
+      .simulate('click');
+    extraNode = wrapper.find('.ant-calendar-year-panel .extra-node');
+    expect(extraNode.length).toBe(1);
+    expect(extraNode.text()).toBe('year');
+
+    wrapper
+      .find('.ant-calendar-year-panel-decade-select')
+      .hostNodes()
+      .simulate('click');
+    extraNode = wrapper.find('.ant-calendar-decade-panel .extra-node');
+    expect(extraNode.length).toBe(1);
+    expect(extraNode.text()).toBe('decade');
+  });
 });

components/date-picker/index.en-US.md

@@ -82,7 +82,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
 | defaultPickerValue | to set default picker date | [moment](http://momentjs.com/) | - |
 | disabledTime | to specify the time that cannot be selected | function(date) | - |
 | format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-MM-DD" |
-| renderExtraFooter | render extra footer in panel | () => React.ReactNode | - |
+| renderExtraFooter | render extra footer in panel | (mode) => React.ReactNode | - |
 | showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](/components/time-picker/#API) |
 | showTime.defaultValue | to set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/) | moment() |
 | showToday | whether to show "Today" button | boolean | true |

components/date-picker/index.zh-CN.md

@@ -84,7 +84,7 @@ moment.locale('zh-cn');
 | disabledTime | 不可选择的时间 | function(date) | 无 |
 | format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [moment.js](http://momentjs.com/) | string \| string[] | "YYYY-MM-DD" |
 | mode | 日期面板的状态 | `time|date|month|year` | 'date' |
-| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |
+| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - |
 | showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#API) |
 | showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/) | moment() |
 | showToday | 是否展示“今天”按钮 | boolean | true |

components/date-picker/style/DecadePanel.less

@@ -1,5 +1,7 @@
 .@{calendar-prefix-cls}-decade-panel {
   position: absolute;
+  display: flex;
+  flex-direction: column;
   top: 0;
   right: 0;
   bottom: 0;
@@ -19,7 +21,14 @@
 }
 
 .@{calendar-prefix-cls}-decade-panel-body {
-  height: ~'calc(100% - 40px)';
+  flex: 1;
+}
+
+.@{calendar-prefix-cls}-decade-panel-footer {
+  border-top: @border-width-base @border-style-base @border-color-split;
+  .@{calendar-prefix-cls}-footer-extra {
+    padding: 0 12px;
+  }
 }
 
 .@{calendar-prefix-cls}-decade-panel-table {

components/date-picker/style/MonthPanel.less

@@ -12,6 +12,8 @@
   > div {
     // TODO: this is a useless wrapper, and we need to remove it in rc-calendar
     height: 100%;
+    display: flex;
+    flex-direction: column;
   }
 }
 
@@ -24,7 +26,14 @@
 }
 
 .@{calendar-prefix-cls}-month-panel-body {
-  height: ~'calc(100% - 40px)';
+  flex: 1;
+}
+
+.@{calendar-prefix-cls}-month-panel-footer {
+  border-top: @border-width-base @border-style-base @border-color-split;
+  .@{calendar-prefix-cls}-footer-extra {
+    padding: 0 12px;
+  }
 }
 
 .@{calendar-prefix-cls}-month-panel-table {

components/date-picker/style/YearPanel.less

@@ -12,6 +12,8 @@
   > div {
     // TODO: this is a useless wrapper, and we need to remove it in rc-calendar
     height: 100%;
+    display: flex;
+    flex-direction: column;
   }
 }
 
@@ -24,7 +26,14 @@
 }
 
 .@{calendar-prefix-cls}-year-panel-body {
-  height: ~'calc(100% - 40px)';
+  flex: 1;
+}
+
+.@{calendar-prefix-cls}-year-panel-footer {
+  border-top: @border-width-base @border-style-base @border-color-split;
+  .@{calendar-prefix-cls}-footer-extra {
+    padding: 0 12px;
+  }
 }
 
 .@{calendar-prefix-cls}-year-panel-table {