diff --git a/components/date-picker/RangePicker.jsx b/components/date-picker/RangePicker.jsx
index 415feb172..f4441f393 100644
--- a/components/date-picker/RangePicker.jsx
+++ b/components/date-picker/RangePicker.jsx
@@ -118,7 +118,7 @@ export default React.createClass({
                   value={start && this.getFormatter().format(start)}
                   placeholder={startPlaceholder}
                   className="ant-calendar-range-picker-input" />
-                <span> ~ </span>
+                <span className="ant-calendar-range-picker-separator"> ~ </span>
                 <input disabled={disabled}
                   onChange={this.handleInputChange}
                   value={end && this.getFormatter().format(end)}
diff --git a/style/components/datepicker/RangePicker.less b/style/components/datepicker/RangePicker.less
index ae7e89dca..183f68616 100644
--- a/style/components/datepicker/RangePicker.less
+++ b/style/components/datepicker/RangePicker.less
@@ -11,18 +11,23 @@
   line-height: 18px;
   outline: 0;
   width: 43%;
+  text-align: center;
 
   &[disabled] {
     cursor: not-allowed;
   }
 }
 
+.@{calendar-prefix-cls}-range-picker-separator {
+  color: #999;
+}
+
 .@{calendar-prefix-cls}-range {
   width: 470px;
   overflow: hidden;
 
   &-part {
-    width: 231px;
+    width: 50%;
     position: relative;
   }
 
@@ -38,26 +43,23 @@
     position: absolute;
     left: 50%;
     width: 20px;
-    margin-left: -147px;
+    margin-left: -132px;
     text-align: center;
     height: @input-box-height;
     line-height: @input-box-height;
+    color: #999;
   }
 
   &-right .@{calendar-prefix-cls}-date-input-wrap {
-    margin-left: -133px;
+    margin-left: -118px;
   }
 
   &.@{calendar-prefix-cls}-time &-middle {
-    margin-left: -45px;
+    margin-left: -29px;
   }
 
   &.@{calendar-prefix-cls}-time &-right .@{calendar-prefix-cls}-date-input-wrap {
-    margin-left: -30px;
-  }
-
-  &.@{calendar-prefix-cls}-time &-right .@{calendar-prefix-cls}-time-picker-wrap {
-    left: 78px;
+    margin-left: -15px;
   }
 
   .@{calendar-prefix-cls}-input-wrap {
diff --git a/style/components/datepicker/TimePicker.less b/style/components/datepicker/TimePicker.less
index a6b8942d2..5ea3de3e9 100644
--- a/style/components/datepicker/TimePicker.less
+++ b/style/components/datepicker/TimePicker.less
@@ -1,18 +1,27 @@
 @import "../../mixins/input";
 
 .@{calendar-prefix-cls}-time {
+  // Change display order in DOM
+  .@{calendar-prefix-cls}-input-wrap {
+    direction: rtl;
+    .@{calendar-prefix-cls}-date-input-wrap,
+    .@{calendar-prefix-cls}-time-picker-wrap {
+      direction: ltr;
+      display: inline-block;
+    }
+    .@{timepicker-prefix-cls}-panel,
+    .@{calendar-prefix-cls}-clear-btn {
+      direction: ltr;
+    }
+  }
   .@{calendar-prefix-cls}-input,
   .@{timepicker-prefix-cls}-input {
     .input;
     height: 22px;
     width: 96px;
+    margin-right: 6px;
   }
   .@{timepicker-prefix-cls}-icon {
     display: none;
   }
-  &-picker-wrap {
-    position: absolute;
-    left: 106px;
-    top: 6px;
-  }
 }