Merge RangePicker extra and built-in footers

components/date-picker/RangePicker.tsx

@@ -234,11 +234,11 @@ class RangePicker extends React.Component<any, RangePickerState> {
         </Tag>
       );
     });
-    const rangeNode = (
+    const rangeNode = (operations && operations.length > 0) ? (
       <div className={`${prefixCls}-footer-extra ${prefixCls}-range-quick-selector`} key="range">
         {operations}
       </div>
-    );
+    ) : null;
     return [rangeNode, customFooter];
   }
 

components/date-picker/__tests__/__snapshots__/RangePicker.test.js.snap

@@ -2987,19 +2987,19 @@ exports[`RangePicker switch to corresponding month panel when click presetted ra
         <div
           class="ant-calendar-footer ant-calendar-range-bottom ant-calendar-footer-show-ok"
         >
-          <div
-            class="ant-calendar-footer-extra ant-calendar-range-quick-selector"
-          >
-            <div
-              class="ant-tag ant-tag-blue"
-              data-show="true"
-            >
-              My Birthday
-            </div>
-          </div>
           <div
             class="ant-calendar-footer-btn"
           >
+            <div
+              class="ant-calendar-footer-extra ant-calendar-range-quick-selector"
+            >
+              <div
+                class="ant-tag ant-tag-blue"
+                data-show="true"
+              >
+                My Birthday
+              </div>
+            </div>
             <a
               class="ant-calendar-time-picker-btn"
               role="button"

components/date-picker/style/Calendar.less

@@ -275,10 +275,8 @@
       text-align: center;
       display: block;
     }
-    &-extra + &-btn {
+    &-extra {
-      border-top: @border-width-base @border-style-base @border-color-split;
+      text-align: left;
-      margin: 0 -12px;
-      padding: 0 12px;
     }
   }
 

components/date-picker/style/RangePicker.less

@@ -147,6 +147,10 @@
     }
   }
 
+  .@{calendar-prefix-cls}-footer-extra {
+    float: left;
+  }
+
   // `div` for selector specificity
   div&-quick-selector {
     text-align: left;

package.json

@@ -56,7 +56,7 @@
     "prop-types": "^15.5.7",
     "raf": "^3.4.0",
     "rc-animate": "^2.4.1",
-    "rc-calendar": "~9.7.0",
+    "rc-calendar": "~9.7.2",
     "rc-cascader": "~0.16.0",
     "rc-checkbox": "~2.1.5",
     "rc-collapse": "~1.10.0",