DatePicker 组件优化

+ DatePicker showTime: 面板上的日期展示输入框统一为一个，格式和外面的输入框同步，并且支持手动修改。面板上的 TimePicker + DatePicker showTime: 输入框不再展示，改造为『选择时间』，点击后不再展开浮层，直接盖住日期区域。 + RangePicker showTime : 只选中开始日期，“确定”和“选择时间”灰置。如未选择日期直接选择时间，开始日期和结束日期默认选中当天。 + RangePicker showTime : 点击框外和确定均为确定操作。 + RangePicker showTime : 在时间页面，开始时间的默认状态为当前时间，结束时间的默认状态跟随开始时间。 + RangePicker showTime : 开始时间的选择范围没有限制，结束时间的选择范围必须大于等于开始时间。 + RangePicker showTime : 当开始时间选择了结束时间之后的时间（发生冲突），结束时间则自动切换到与开始时间相同的时间。
ithanshui · Jul 19, 2016 · 7dd4a01 · 7dd4a01
1 parent 3342aae
commit 7dd4a01
Show file tree

Hide file tree

Showing 9 changed files with 366 additions and 41 deletions.
diff --git a/components/date-picker/RangePicker.tsx b/components/date-picker/RangePicker.tsx
@@ -78,7 +78,9 @@ export default class RangePicker extends React.Component {
       onOk: this.handleChange,
     };
     if (props.timePicker) {
-      pickerChangeHandler = {};
+      pickerChangeHandler.onChange = (value) => {
+        this.handleChange(value);
+      };
     } else {
       calendarHandler = {};
     }
@@ -91,6 +93,7 @@ export default class RangePicker extends React.Component {
     const calendar = (
       <RangeCalendar
         prefixCls="ant-calendar"
+        formatter={props.getFormatter()}
         className={calendarClassName}
         timePicker={props.timePicker}
         disabledDate={disabledDate}

diff --git a/components/date-picker/demo/start-end.md b/components/date-picker/demo/start-end.md
@@ -29,7 +29,7 @@ const DateRange = React.createClass({
     if (!startValue || !this.state.endValue) {
       return false;
     }
-    return startValue.getTime() >= this.state.endValue.getTime();
+    return startValue.getTime() > this.state.endValue.getTime();
   },
   disabledEndDate(endValue) {
     if (!endValue || !this.state.startValue) {
@@ -38,7 +38,6 @@ const DateRange = React.createClass({
     return endValue.getTime() <= this.state.startValue.getTime();
   },
   onChange(field, value) {
-    console.log(field, 'change', value);
     this.setState({
       [field]: value,
     });

diff --git a/components/date-picker/index.tsx b/components/date-picker/index.tsx
@@ -9,7 +9,7 @@ const DatePicker = wrapPicker(createPicker(RcCalendar));
 const MonthPicker = wrapPicker(createPicker(MonthCalendar), 'yyyy-MM');
 
 DatePicker.Calendar = Calendar;
-DatePicker.RangePicker = wrapPicker(RangePicker, 'yyyy-MM-dd');
+DatePicker.RangePicker = wrapPicker(RangePicker);
 DatePicker.MonthPicker = MonthPicker;
 
 export default DatePicker;
diff --git a/components/date-picker/style/Calendar.less b/components/date-picker/style/Calendar.less
@@ -106,7 +106,7 @@
     .calendarPanelHeader(@calendar-prefix-cls);
   }
 
-  &-calendar-body {
+  &-body {
     padding: 4px 8px;
   }
 
@@ -163,6 +163,10 @@
     text-align: center;
     transition: background 0.3s ease;
 
+    &-panel {
+      position: relative;
+    }
+
     &:hover {
       background: tint(@primary-color, 90%);
       cursor: pointer;
@@ -286,6 +290,9 @@
     &-disabled {
       .button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);
       cursor: not-allowed;
+      &:hover {
+        .button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);
+      }
     }
   }
 }
diff --git a/components/date-picker/style/RangePicker.less b/components/date-picker/style/RangePicker.less
@@ -26,16 +26,40 @@
   width: 470px;
   overflow: hidden;
 
+  .@{calendar-prefix-cls}-date-panel {
+    &::after {
+      content: ".";
+      display: block;
+      height: 0;
+      clear: both;
+      visibility: hidden;
+    }
+  }
   &-part {
     width: 50%;
+    position: relative;
   }
 
   &-left {
     float: left;
+    .@{calendar-prefix-cls} {
+      &-time-picker-inner {
+        border-right: 1px solid #e9e9e9;
+      }
+    }
   }
 
   &-right {
     float: right;
+    .@{calendar-prefix-cls} {
+      &-time-picker-inner {
+        margin-left: 21px;
+        border-left: 1px solid #e9e9e9;
+      }
+      &-time-picker-panel {
+        // padding-left: 22px;
+      }
+    }
   }
 
   &-middle {
@@ -74,7 +98,12 @@
     .input;
     border-radius: @border-radius-sm;
     height: @input-height-sm;
-    width: 96px;
+    border: 0;
+    box-shadow: none;
+
+    &:focus {
+      box-shadow: none;
+    }
   }
   .@{timepicker-prefix-cls}-icon {
     display: none;
@@ -132,14 +161,68 @@
   &-bottom {
     text-align: right;
   }
-  .@{calendar-prefix-cls}-ok-btn {
-    position: static;
-    height: 22px;
-    margin: 8px;
+
+  .@{calendar-prefix-cls} {
+    &-header {
+      border-bottom: 0;
+    }
+    &-body {
+      border-top: 1px solid #e9e9e9;
+    }
   }
-  .@{calendar-prefix-cls}-today-btn {
-    margin: 8px 12px;
-    height: 22px;
-    line-height: 22px;
+
+  &.@{calendar-prefix-cls}-time {
+
+    .@{timepicker-prefix-cls} {
+      height: 207px;
+      top: 68px;
+      z-index: 2; // in order to cover .ant-calendar-range .ant-calendar-in-range-cell > div (z-index: 1)
+      &-panel {
+        height: 241px;
+        margin-top: -34px;
+      }
+
+      &-inner {
+        padding-top: 34px;
+        height: 241px;
+        background: none;
+      }
+
+      &-combobox {
+        display: inline-block;
+        background-color: white;
+        border-top: 1px solid #e9e9e9;
+      }
+      &-select {
+        width: 71px;
+
+        ul {
+          max-height: 206px;
+        }
+      }
+    }
+    .@{calendar-prefix-cls}-footer-btn {
+      padding-right: 12px;
+      display: block;
+      &::after {
+        content: 'x';
+        height: 0;
+        font-size: 0;
+        overflow: hidden;
+        clear: both;
+      }
+    }
+    .@{calendar-prefix-cls}-ok-btn {
+      position: static;
+      height: 22px;
+    }
+    .@{calendar-prefix-cls}-footer .@{calendar-prefix-cls}-time-picker-btn {
+      margin-right: 12px;
+    }
+    .@{calendar-prefix-cls}-today-btn {
+      margin: 8px 12px;
+      height: 22px;
+      line-height: 22px;
+    }
   }
 }