DatePicker improvement

close #1701

components/date-picker/createPicker.jsx

@@ -3,6 +3,7 @@ import MonthCalendar from 'rc-calendar/lib/MonthCalendar';
 import RcDatePicker from 'rc-calendar/lib/Picker';
 import GregorianCalendar from 'gregorian-calendar';
 import classNames from 'classnames';
+import Icon from '../icon';
 
 export default function createPicker(TheCalendar) {
   return class CalenderWrapper extends React.Component {
@@ -21,7 +22,12 @@ export default function createPicker(TheCalendar) {
         });
       }
     }
-
+    clearSelection = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this.setState({ value: null });
+      this.handleChange(null);
+    }
     handleChange = (value) => {
       const props = this.props;
       if (!('value' in props)) {
@@ -89,6 +95,10 @@ export default function createPicker(TheCalendar) {
         pickerStyle.width = 180;
       }
 
+      const clearIcon = (!props.disabled && this.state.value) ?
+        <Icon type="cross-circle"
+          className="ant-calendar-picker-clear"
+          onClick={this.clearSelection} /> : null;
       return (
         <span className={props.pickerClass} style={{ ...pickerStyle, ...props.style }}>
           <RcDatePicker
@@ -114,6 +124,7 @@ export default function createPicker(TheCalendar) {
                       value={value ? props.getFormatter().format(value) : ''}
                       placeholder={placeholder}
                       className={props.pickerInputClass} />
+                    {clearIcon}
                     <span className="ant-calendar-picker-icon" />
                   </span>
                 );

components/date-picker/style/Calendar.less

@@ -246,6 +246,7 @@
   }
 
   .@{calendar-prefix-cls}-clear-btn {
+    display: none;
     position: absolute;
     right: 5px;
     text-indent: -76px;

components/date-picker/style/Picker.less

@@ -37,7 +37,29 @@
   > input {
     outline: none;
   }
+  &-clear {
+    opacity: 0;
+    position: absolute;
+    right: 8px;
+    z-index: 1;
+    background: #fff;
+    top: 50%;
+    font-size: 12px;
+    color: #ccc;
+    width: 12px;
+    height: 12px;
+    margin-top: -6px;
+    line-height: 12px;
+    cursor: pointer;
+    transition: color 0.3s ease, opacity 0.15s ease;
+    &:hover {
+      color: #999;
+    }
+  }
 
+  &:hover &-clear {
+    opacity: 1;
+  }
   &-icon {
     position: absolute;
     user-select: none;

components/date-picker/style/RangePicker.less

@@ -57,11 +57,19 @@
     margin-left: -29px;
   }
 
+  .@{calendar-prefix-cls}-time-picker-wrap {
+    left: 115px;
+  }
+  &-right .@{calendar-prefix-cls}-time-picker-wrap {
+    left: 100px;
+  }
+
   &.@{calendar-prefix-cls}-time &-right .@{calendar-prefix-cls}-date-input-wrap {
     margin-left: -15px;
   }
 
   .@{calendar-prefix-cls}-input-wrap {
+    position: relative;
     height: @input-box-height;
   }
   .@{calendar-prefix-cls}-input {

components/date-picker/style/TimePicker.less

@@ -11,14 +11,17 @@
     .@{calendar-prefix-cls}-clear-btn {
       direction: ltr;
     }
+    .@{calendar-prefix-cls}-time-picker-wrap {
+      position: absolute;
+      right: 0;
+    }
   }
   .@{calendar-prefix-cls}-input,
   .@{timepicker-prefix-cls}-input {
-    .input;
+    // .input;
-    border-radius: @border-radius-sm;
+  }
-    height: @input-height-sm;
+  .@{timepicker-prefix-cls}-input {
-    width: 96px;
+    display: none;
-    margin-right: 6px;
   }
   .@{calendar-prefix-cls}-input {
     padding-right: 21px;
@@ -27,6 +30,9 @@
     min-width: 168px;
   }
   .@{timepicker-prefix-cls}-icon {
-    display: none;
+    font-family: "anticon" !important;
+    position: relative;
+    content: "\E643";
+    display: inline;
   }
 }