Add renderExtraFooter for DatePicker

close #6122, close #5188

components/date-picker/RangePicker.tsx

@@ -112,13 +112,17 @@ export default class RangePicker extends React.Component<any, any> {
     }
   }
 
-  renderFooter = () => {
-    const { prefixCls, ranges } = this.props;
-    if (!ranges) {
+  renderFooter = (...args) => {
+    const { prefixCls, ranges, renderExtraFooter } = this.props;
+    if (!ranges && !renderExtraFooter) {
       return null;
     }
-
-    const operations = Object.keys(ranges).map((range) => {
+    const customFooter = renderExtraFooter ? (
+      <div className={`${prefixCls}-footer-extra`} key="extra">
+        {renderExtraFooter(...args)}
+      </div>
+    ) : null;
+    const operations = Object.keys(ranges || {}).map((range) => {
       const value = ranges[range];
       return (
         <a
@@ -131,11 +135,12 @@ export default class RangePicker extends React.Component<any, any> {
         </a>
       );
     });
-    return (
-      <div className={`${prefixCls}-range-quick-selector`}>
+    const rangeNode = (
+      <div className={`${prefixCls}-footer-extra ${prefixCls}-range-quick-selector`} key="range">
         {operations}
       </div>
     );
+    return [rangeNode, customFooter];
   }
 
   render() {

components/date-picker/createPicker.tsx

@@ -49,6 +49,15 @@ export default function createPicker(TheCalendar): any {
       }
     }
 
+    renderFooter = (...args) => {
+      const { prefixCls, renderExtraFooter } = this.props;
+      return renderExtraFooter ? (
+        <div className={`${prefixCls}-footer-extra`}>
+          {renderExtraFooter(...args)}
+        </div>
+      ) : null;
+    }
+
     clearSelection = (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -107,6 +116,7 @@ export default function createPicker(TheCalendar): any {
           format={props.format}
           showToday={props.showToday}
           monthCellContentRender={props.monthCellContentRender}
+          renderFooter={this.renderFooter}
         />
       );
 

components/date-picker/demo/extra-footer.md

@@ -0,0 +1,28 @@
+---
+order: 10
+title:
+  zh-CN: 额外的页脚
+  en-US: Extra Footer
+---
+
+## zh-CN
+
+在浮层中加入额外的页脚，以满足某些定制信息的需求。
+
+## en-US
+
+Render extra footer in panel for customized requirements.
+
+````jsx
+import { DatePicker } from 'antd';
+const { RangePicker } = DatePicker;
+
+ReactDOM.render(
+  <div>
+    <DatePicker renderExtraFooter={() => 'extra footer'} />
+    <DatePicker renderExtraFooter={() => 'extra footer'} showTime />
+    <RangePicker renderExtraFooter={() => 'extra footer'} />
+    <RangePicker renderExtraFooter={() => 'extra footer'} showTime />
+  </div>
+, mountNode);
+````

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

@@ -61,6 +61,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker.
 | showToday    | whether to show "Today" button | boolean | true |
 | disabledTime | to specify the time that cannot be selected | function(date) | - |
 | onOk | callback when click ok button | function() | - |
+| renderExtraFooter | render extra footer in panel | () => React.ReactNode | - |
 
 ### MonthPicker
 
@@ -84,6 +85,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker.
 | showTime.defaultValue | to set default time of selected date, [demo](https://ant.design/components/date-picker/#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)[] | [moment(), moment()] |
 | disabledTime | to specify the time that cannot be selected | function(dates: [moment, moment], partial: `'start'|'end'`) | - |
 | ranges       | preseted ranges for quick selection | { [range: string]: [moment](http://momentjs.com/)[] } | - |
+| renderExtraFooter | render extra footer in panel | () => React.ReactNode | - |
 | onOk | callback when click ok button | function() | - |
 
 <style>

components/date-picker/index.tsx

@@ -23,6 +23,7 @@ export interface PickerProps {
   open?: boolean;
   onOpenChange?: (status: boolean) => void;
   disabledDate?: (current: moment.Moment) => boolean;
+  renderExtraFooter?: () => React.ReactNode;
 }
 
 export interface SinglePickerProps {

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

@@ -62,6 +62,7 @@ moment.locale('zh-cn');
 | showToday    | 是否展示“今天”按钮 | boolean | true |
 | disabledTime | 不可选择的时间 | function(date) | 无 |
 | onOk | 点击确定按钮的回调 | function() | - |
+| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |
 
 ### MonthPicker
 
@@ -85,6 +86,7 @@ moment.locale('zh-cn');
 | showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](https://ant.design/components/date-picker/#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)[] | [moment(), moment()] |
 | disabledTime | 不可选择的时间 | function(dates: [moment, moment], partial: `'start'|'end'`) | 无 |
 | ranges       | 预设时间范围快捷选择 | { [range: string]: [moment](http://momentjs.com/)[] } | 无 |
+| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |
 | onOk | 点击确定按钮的回调 | function() | - |
 
 <style>

components/date-picker/style/Calendar.less

@@ -240,15 +240,19 @@
     border-bottom-right-radius: 4px;
   }
 
-  &-footer-btn {
+  &-footer {
     border-top: @border-width-base @border-style-base @border-color-split;
-    text-align: center;
-    display: block;
     line-height: 38px;
-  }
-
-  &-footer > div {
-    display: inline-block;
+    padding: 0 12px;
+    &-btn {
+      text-align: center;
+      display: block;
+    }
+    &-extra + &-btn {
+      border-top: @border-width-base @border-style-base @border-color-split;
+      margin: 0 -12px;
+      padding: 0 12px;
+    }
   }
 
   .@{calendar-prefix-cls}-today-btn,
@@ -260,6 +264,9 @@
       color: @disabled-color;
       cursor: not-allowed;
     }
+    &:only-child {
+      margin: 0;
+    }
   }
 
   .@{calendar-prefix-cls}-clear-btn {
@@ -295,9 +302,6 @@
     .btn;
     .btn-primary;
     .button-size(@btn-height-sm; @btn-padding-sm; @font-size-base; @border-radius-base);
-    position: absolute;
-    bottom: 8px;
-    right: 9px;
 
     &-disabled {
       .button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);

components/date-picker/style/RangePicker.less

@@ -140,23 +140,12 @@
     }
   }
 
-  &-bottom {
-    text-align: right;
-
-    .@{calendar-prefix-cls}-footer-btn {
-      padding-right: 16px;
-    }
-  }
-
   // `div` for selector specificity
   div&-quick-selector {
-    display: block;
     text-align: left;
-    border-top: @border-width-base @border-style-base @border-color-split;
-    padding: 10.5px 10px;
 
     > a {
-      margin-right: 16px;
+      margin-right: 8px;
     }
   }
 
@@ -201,17 +190,8 @@
         }
       }
     }
-    .@{calendar-prefix-cls}-footer-btn {
-      padding: 9px 12px 9px 0;
-      display: block;
-      .clearfix;
-    }
-    .@{calendar-prefix-cls}-ok-btn {
-      position: static;
-      height: 22px;
-    }
     .@{calendar-prefix-cls}-footer .@{calendar-prefix-cls}-time-picker-btn {
-      margin-right: 12px;
+      margin-right: 8px;
     }
     .@{calendar-prefix-cls}-today-btn {
       margin: 8px 12px;

components/date-picker/style/TimePicker.less

@@ -124,27 +124,22 @@
   }
 
   .@{calendar-prefix-cls}-footer {
-    text-align: right;
     position: relative;
     height: auto;
     line-height: auto;
 
     &-btn {
-      padding: 10px 0;
-      line-height: 1.5;
       text-align: right;
     }
 
     .@{calendar-prefix-cls}-today-btn {
       float: left;
       margin: 0;
-      padding-left: 12px;
     }
 
     .@{calendar-prefix-cls}-time-picker-btn {
       display: inline-block;
-      text-align: center;
-      margin-right: 60px;
+      margin-right: 8px;
 
       &-disabled {
         color: @disabled-color;