chore: improve detail

components/date-picker/RangePicker.tsx

@@ -9,6 +9,7 @@ export default class RangePicker extends React.Component<any, any> {
   static defaultProps = {
     prefixCls: 'ant-calendar',
     allowClear: true,
+    showToday: false,
   };
 
   constructor(props) {
@@ -60,7 +61,7 @@ export default class RangePicker extends React.Component<any, any> {
   }
 
   setValue(value) {
-    this.setState({ value });
+    this.handleChange(value);
     if (!this.props.showTime) {
       this.setState({ open: false });
     }
@@ -87,7 +88,7 @@ export default class RangePicker extends React.Component<any, any> {
   render() {
     const props = this.props;
     const {
-      disabledDate, disabledTime, showTime,
+      disabledDate, disabledTime, showTime, showToday,
       ranges, prefixCls, popupStyle,
       style, onOk, locale, format,
     } = props;
@@ -130,6 +131,7 @@ export default class RangePicker extends React.Component<any, any> {
         locale={locale.lang}
         onOk={onOk}
         defaultValue={props.defaultPickerValue || [moment(), moment()]}
+        showToday={showToday}
       />
     );
 

components/date-picker/demo/presetted-ranges.md

@@ -1,19 +1,17 @@
 ---
 order: 8
 title:
-  zh-CN: 日期范围二
-  en-US: Date range, case 2
+  zh-CN: 预设范围
+  en-US: Presetted Ranges
 ---
 
 ## zh-CN
 
-使用 `RangePicker` 实现日期范围选择有更好的交互体验。
+RangePicker 可以设置常用的 预设范围 提高用户体验。
 
 ## en-US
 
-By using `RangePicker` to specify a date range, you can achieve a better interactive experience.
-
-
+We can set presetted ranges to RangePicker to improve user experience.
 
 ````jsx
 import { DatePicker } from 'antd';
@@ -26,19 +24,15 @@ function onChange(dates, dateStrings) {
 }
 ReactDOM.render(
   <div>
-    <RangePicker style={{ width: 200 }} onChange={onChange} />
-    <br />
     <RangePicker
       ranges={{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }}
-      style={{ width: 200 }} onChange={onChange}
+      onChange={onChange}
     />
     <br />
     <RangePicker
       ranges={{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }}
       showTime format="YYYY/MM/DD HH:mm:ss" onChange={onChange}
     />
-    <br />
-    <RangePicker showTime format="YYYY/MM/DD HH:mm:ss" onChange={onChange} />
   </div>,
   mountNode
 );

components/date-picker/index.tsx

@@ -60,7 +60,7 @@ export interface RangePickerProps extends PickerProps {
 }
 
 assign(DatePicker, {
-  RangePicker: wrapPicker(RangePicker, 'YYYY-MM-DD hh:mm:ss'),
+  RangePicker: wrapPicker(RangePicker),
   Calendar,
   MonthPicker,
 });

components/date-picker/style/RangePicker.less

@@ -44,7 +44,7 @@
     float: left;
     .@{calendar-prefix-cls} {
       &-time-picker-inner {
-        border-right: 1px solid @border-color-split;
+        border-right: 2px solid @border-color-split;
       }
     }
   }
@@ -53,8 +53,7 @@
     float: right;
     .@{calendar-prefix-cls} {
       &-time-picker-inner {
-        margin-left: 3%;
-        border-left: 1px solid @border-color-split;
+        border-left: 2px solid @border-color-split;
       }
     }
   }
@@ -158,9 +157,10 @@
     display: block;
     text-align: left;
     border-bottom: 1px solid @border-color-split;
-    padding: 8.5px 10px;
+    padding: 10.5px 10px;
 
     > label {
+      color: @text-color-secondary;
       &:after {
         content: ":";
         margin: 0 8px 0 2px;
@@ -186,7 +186,7 @@
   &.@{calendar-prefix-cls}-time {
     .@{calendar-timepicker-prefix-cls} {
       height: 207px;
-      width: 97%;
+      width: 100%;
       top: 68px;
       z-index: 2; // cover .ant-calendar-range .ant-calendar-in-range-cell > div (z-index: 1)
       &-panel {
@@ -196,23 +196,25 @@
 
       &-inner {
         padding-top: 34px;
-        height: 241px;
+        height: 100%;
         background: none;
       }
 
       &-combobox {
         display: inline-block;
+        height: 100%;
         background-color: white;
         border-top: 1px solid @border-color-split;
       }
       &-select {
+        height: 100%;
         ul {
-          max-height: 206px;
+          max-height: 100%;
         }
       }
     }
     .@{calendar-prefix-cls}-footer-btn {
-      padding-right: 12px;
+      padding: 9px 12px 9px 0;
       display: block;
       .clearfix;
     }
@@ -231,15 +233,9 @@
   }
 
   &-with-ranges.@{calendar-prefix-cls}-time .@{calendar-timepicker-prefix-cls} {
-    height: 243px;
+    height: 247px;
     &-panel {
-      height: 277px;
-    }
-    &-inner {
-      height: 277px;
-    }
-    &-select ul {
-      max-height: 242px;
+      height: 281px;
     }
   }
 }

package.json

@@ -43,7 +43,7 @@
     "object-assign": "~4.1.0",
     "omit.js": "^0.1.0",
     "rc-animate": "~2.3.0",
-    "rc-calendar": "~7.4.1",
+    "rc-calendar": "~7.5.1",
     "rc-cascader": "~0.10.1",
     "rc-checkbox": "~1.4.0",
     "rc-collapse": "~1.6.4",