From c65f201d51b24bdc42f4d68560c1a71c5556e1f6 Mon Sep 17 00:00:00 2001
From: RaoHai <surgesoft@gmail.com>
Date: Mon, 23 May 2016 15:58:10 +0800
Subject: [PATCH] DatePicker improvement close #1701

---
 components/date-picker/createPicker.jsx       | 13 ++++++++++-
 components/date-picker/style/Calendar.less    |  1 +
 components/date-picker/style/Picker.less      | 22 +++++++++++++++++++
 components/date-picker/style/RangePicker.less |  8 +++++++
 components/date-picker/style/TimePicker.less  | 18 ++++++++++-----
 5 files changed, 55 insertions(+), 7 deletions(-)

diff --git a/components/date-picker/createPicker.jsx b/components/date-picker/createPicker.jsx
index 411d77cbb2..1a6d4d1ce9 100644
--- a/components/date-picker/createPicker.jsx
+++ b/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>
                 );
diff --git a/components/date-picker/style/Calendar.less b/components/date-picker/style/Calendar.less
index 78526cc48a..27fec19723 100644
--- a/components/date-picker/style/Calendar.less
+++ b/components/date-picker/style/Calendar.less
@@ -246,6 +246,7 @@
   }
 
   .@{calendar-prefix-cls}-clear-btn {
+    display: none;
     position: absolute;
     right: 5px;
     text-indent: -76px;
diff --git a/components/date-picker/style/Picker.less b/components/date-picker/style/Picker.less
index 33c89ccc89..714ad5c288 100644
--- a/components/date-picker/style/Picker.less
+++ b/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;
diff --git a/components/date-picker/style/RangePicker.less b/components/date-picker/style/RangePicker.less
index 03bd22e218..ebb2ad291a 100644
--- a/components/date-picker/style/RangePicker.less
+++ b/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 {
diff --git a/components/date-picker/style/TimePicker.less b/components/date-picker/style/TimePicker.less
index e3181bfa63..23f3b20a68 100644
--- a/components/date-picker/style/TimePicker.less
+++ b/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;
-    border-radius: @border-radius-sm;
-    height: @input-height-sm;
-    width: 96px;
-    margin-right: 6px;
+    // .input;
+  }
+  .@{timepicker-prefix-cls}-input {
+    display: none;
   }
   .@{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;
   }
 }