improve rangepicker and add showTime prop

components/date-picker/RangePicker.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import GregorianCalendar from 'gregorian-calendar';
 import RangeCalendar from 'rc-calendar/lib/RangeCalendar';
-import Datepicker from 'rc-calendar/lib/Picker';
+import DatePicker from 'rc-calendar/lib/Picker';
-import Timepicker from 'rc-time-picker';
+import TimePicker from 'rc-time-picker';
 import classNames from 'classnames';
 import PickerMixin from './PickerMixin';
 
@@ -10,7 +10,7 @@ export default React.createClass({
   getDefaultProps() {
     return {
       defaultValue: [],
-      format: 'yyyy-MM-dd HH:mm:ss',
+      format: 'yyyy-MM-dd',
       startPlaceholder: '开始时间',
       endPlaceholder: '结束时间',
       transitionName: 'slide-up',
@@ -46,8 +46,9 @@ export default React.createClass({
     }
   },
   handleChange(value) {
-    this.setState({value});
+    if (!('value' in this.props)) {
-
+      this.setState({ value });
+    }
     const startTime = value[0] ? new Date(value[0].getTime()) : null;
     const endTime = value[1] ? new Date(value[1].getTime()) : null;
     this.props.onChange([startTime, endTime]);
@@ -64,14 +65,23 @@ export default React.createClass({
            transitionName, disabled, popupStyle, align, style} = this.props;
     const state = this.state;
 
-    const calendar = (<RangeCalendar prefixCls="ant-calendar"
+    const timePicker = showTime
-                        timePicker={<Timepicker prefixCls="ant-time-picker" />}
+      ? <TimePicker prefixCls="ant-time-picker"
+          placeholder={locale.lang.timePlaceholder}
+          transitionName="slide-up" />
+      : null;
+
+    const calendarClassName = classNames({
+      ['ant-calendar-time']: this.props.showTime,
+    });
+
+    const calendar = <RangeCalendar prefixCls="ant-calendar"
+                        className={calendarClassName}
+                        timePicker={timePicker}
                         disabledDate={disabledDate}
                         locale={locale.lang}
                         defaultValue={defaultCalendarValue}
-                        showTime={showTime}
+                        showClear />;
-                        showOk={showTime}
-                        showClear />);
 
     const pickerClass = classNames({
       'ant-calendar-picker': true,
@@ -79,13 +89,14 @@ export default React.createClass({
     });
 
     const pickerInputClass = classNames({
+      'ant-calendar-range-picker': true,
       'ant-input': true,
       'ant-input-lg': size === 'large',
-      'ant-input-sm': size === 'small'
+      'ant-input-sm': size === 'small',
     });
 
-    return (<span className={pickerClass}>
+    return (<span className={pickerClass} style={style}>
-      <Datepicker
+      <DatePicker
         transitionName={transitionName}
         disabled={disabled}
         calendar={calendar}
@@ -100,25 +111,25 @@ export default React.createClass({
           ({value}) => {
             const start = value[0];
             const end = value[1];
-            return (<span className={pickerInputClass} disabled={disabled}>
+            return (
-              <input disabled={disabled}
+              <span className={pickerInputClass} disabled={disabled}>
-                onChange={this.handleInputChange}
+                <input disabled={disabled}
-                value={start && this.getFormatter().format(start)}
+                  onChange={this.handleInputChange}
-                placeholder={startPlaceholder}
+                  value={start && this.getFormatter().format(start)}
-                style={style}
+                  placeholder={startPlaceholder}
-                className="ant-calendar-range-picker-input"/>
+                  className="ant-calendar-range-picker-input" />
-              <span> ~ </span>
+                <span> ~ </span>
-              <input disabled={disabled}
+                <input disabled={disabled}
-                onChange={this.handleInputChange}
+                  onChange={this.handleInputChange}
-                value={end && this.getFormatter().format(end)}
+                  value={end && this.getFormatter().format(end)}
-                placeholder={endPlaceholder}
+                  placeholder={endPlaceholder}
-                style={style}
+                  className="ant-calendar-range-picker-input" />
-                className="ant-calendar-range-picker-input"/>
+                <span className="ant-calendar-picker-icon" />
-              <span className="ant-calendar-picker-icon"/>
+              </span>
-            </span>);
+            );
           }
         }
-      </Datepicker>
+      </DatePicker>
     </span>);
   }
 });

components/date-picker/demo/basic.md

@@ -9,7 +9,11 @@
 ````jsx
 import { DatePicker } from 'antd';
 
+function onChange(value) {
+  console.log(value);
+}
+
 ReactDOM.render(
-  <DatePicker defaultValue="2015-12-12" />
+  <DatePicker onChange={onChange} />
 , document.getElementById('components-date-picker-demo-basic'));
 ````

components/date-picker/demo/disabled-date.md

@@ -0,0 +1,22 @@
+# 指定不可选择日期
+
+- order: 6
+
+设置 `disabledDate` 方法，来确定不可选时段。
+
+如上例：不可选择今天之后的日期。
+
+---
+
+````jsx
+import { DatePicker } from 'antd';
+
+const disabledDate = function(current, value) {
+  // can not select days after today
+  return current && current.getTime() > Date.now();
+};
+
+ReactDOM.render(
+  <DatePicker disabledDate={disabledDate} />
+, document.getElementById('components-date-picker-demo-disabled-date'));
+````

components/date-picker/demo/locale.md

@@ -1,6 +1,6 @@
 # 国际化
 
-- order: 9
+- order: 10
 
 通过 `locale` 配置时区、语言等, 默认支持 en_US, zh_CN
 

components/date-picker/demo/month-picker.md

@@ -2,7 +2,7 @@
 
 - order: 9
 
-使用 MonthPicker 实现月选择器.
+使用 `MonthPicker` 实现月选择器.
 
 ---
 

components/date-picker/demo/range.md

@@ -1,22 +1,21 @@
-# 指定不可选择日期
+# 日期范围二
 
-- order: 6
+- order: 8
 
-设置 `disabledDate` 方法，来确定不可选时段。
+使用 `RangePicker` 实现日期范围选择有更好的交互体验。
-
-如上例：不可选择今天之后的日期。
 
 ---
 
 ````jsx
 import { DatePicker } from 'antd';
+const RangePicker = DatePicker.RangePicker;
 
-const disabledDate = function(current, value) {
+function onChange(value) {
-  // can not select days after today
+  console.log('From: ', value[0], ', to: ', value[1]);
-  return current && current.getTime() > Date.now();
+}
-};
+ReactDOM.render(<div>
-
+  <RangePicker style={{width: 184}} onChange={onChange} />
-ReactDOM.render(
+  <br />
-  <DatePicker disabledDate={disabledDate} />
+  <RangePicker showTime format="yyyy-MM-dd HH:mm:ss" onChange={onChange} />
-, document.getElementById('components-date-picker-demo-range'));
+</div>, document.getElementById('components-date-picker-demo-range'));
 ````

components/date-picker/demo/select.md

@@ -1,24 +0,0 @@
-# 选择日期
-
-- order: 2
-
-通过设置选择日期的回调事件 `onChange`，完成交互行为。
-
----
-
-````jsx
-import { DatePicker } from 'antd';
-
-const Picker = React.createClass({
-  handleChange: function(value) {
-    console.log(new Date(value.getTime()));
-  },
-  render: function() {
-    return <DatePicker onChange={this.handleChange} />;
-  }
-});
-
-ReactDOM.render(
-  <Picker />
-, document.getElementById('components-date-picker-demo-select'));
-````

components/date-picker/demo/start-end.md

@@ -1,8 +1,8 @@
-# 日期范围选择
+# 日期范围一
 
 - order: 7
 
-设置 `disabledDate` 方法，来约束开始和结束日期。
+可以设置 `disabledDate` 方法，来约束开始和结束日期。
 
 ---
 

components/date-picker/demo/time-range.md

@@ -1,18 +0,0 @@
-# 时间范围选择
-
-- order: 7
-
-使用 RangePicker 实现范围选择器。
-
----
-
-````jsx
-import { DatePicker } from 'antd';
-const RangePicker = DatePicker.RangePicker;
-
-function log(value) {
-  console.log('From: ', value[0], ', to: ', value[1]);
-}
-ReactDOM.render(<RangePicker defaultValue={['2011-11-11 11:11:11', '']} onChange={log} />
-, document.getElementById('components-date-picker-demo-time-range'));
-````

components/date-picker/demo/time.md

@@ -2,51 +2,18 @@
 
 - order: 4
 
-和 [时间选择框](/components/timepicer) 配合使用。
+增加选择时间功能。
 
 ---
 
 ````jsx
-import { DatePicker, TimePicker } from 'antd';
+import { DatePicker } from 'antd';
 
-const DateTimePicker = React.createClass({
+function onChange(value) {
-  handleChange(from, value) {
-    this.result = this.result || new Date();
-    if (!value) {
-      if (from === 'date') {
-        this.selectedDate = false;
-      } else {
-        this.selectedTime = false;
-      }
-      return;
-    }
-    if (from === 'date') {
-      this.result.setFullYear(value.getFullYear());
-      this.result.setMonth(value.getMonth());
-      this.result.setDate(value.getDate());
-      this.selectedDate = true;
-    } else {
-      this.result.setHours(value.getHours());
-      this.result.setMinutes(value.getMinutes());
-      this.result.setSeconds(value.getSeconds());
-      this.selectedTime = true;
-    }
-    if (this.selectedDate && this.selectedTime) {
-      this.props.onSelect(this.result);
-    }
-  },
-  render() {
-    return <div>
-      <DatePicker onChange={this.handleChange.bind(null, 'date')} />
-      <TimePicker onChange={this.handleChange.bind(null, 'time')} />
-    </div>;
-  }
-});
-
-function onSelect(value) {
   console.log('选择了时间：', value);
 }
 
-ReactDOM.render(<DateTimePicker onSelect={onSelect} />
+ReactDOM.render(
+<DatePicker showTime format="yyyy-MM-dd HH:mm:ss" onChange={onChange} style={{width: 160}} />
 , document.getElementById('components-date-picker-demo-time'));
 ````

components/date-picker/index.jsx

@@ -5,7 +5,9 @@ import DatePicker from 'rc-calendar/lib/Picker';
 import GregorianCalendar from 'gregorian-calendar';
 import CalendarLocale from 'rc-calendar/lib/locale/zh_CN';
 import AntRangePicker from './RangePicker';
-import PickerMixin from './Pickermixin';
+import PickerMixin from './PickerMixin';
+import TimePicker from 'rc-time-picker';
+import classNames from 'classnames';
 
 function createPicker(TheCalendar, defaultFormat) {
   return React.createClass({
@@ -61,14 +63,26 @@ function createPicker(TheCalendar, defaultFormat) {
 
       const placeholder = ('placeholder' in this.props)
         ? this.props.placeholder : locale.lang.placeholder;
+
+      const timePicker = this.props.showTime
+        ? <TimePicker prefixCls="ant-time-picker"
+            placeholder={locale.lang.timePlaceholder}
+            transitionName="slide-up" />
+        : null;
+
+      const calendarClassName = classNames({
+        ['ant-calendar-time']: this.props.showTime,
+      });
+
       const calendar = (
         <TheCalendar
           disabledDate={this.props.disabledDate}
           locale={locale.lang}
+          timePicker={timePicker}
           defaultValue={defaultCalendarValue}
           dateInputPlaceholder={placeholder}
-          showTime={this.props.showTime}
           prefixCls="ant-calendar"
+          className={calendarClassName}
           showOk={this.props.showTime}
           showClear />
       );
@@ -100,7 +114,7 @@ function createPicker(TheCalendar, defaultFormat) {
           {
             ({value}) => {
               return (
-              <span>
+                <span>
                   <input disabled={this.props.disabled}
                          onChange={this.handleInputChange}
                          value={value && this.getFormatter().format(value)}
@@ -109,7 +123,7 @@ function createPicker(TheCalendar, defaultFormat) {
                          className={'ant-calendar-picker-input ant-input' + sizeClass}/>
                   <span className="ant-calendar-picker-icon"/>
                 </span>
-                );
+              );
             }
           }
         </DatePicker>

components/date-picker/index.md

@@ -35,6 +35,7 @@
 | popupStyle   | 格外的弹出日历样式   | object     | {}   |
 | size         | 输入框大小，`large` 高度为 32px，`small` 为 22px，默认是 28px | string   | 无  |
 | locale       | 国际化配置 | object   | [默认配置](https://github.com/ant-design/ant-design/issues/424)  |
+| showTime     | 增加时间选择功能 | bool | false  |
 
 ### RangePicker
 
@@ -45,7 +46,7 @@
 | format       | 展示的日期格式  | string    | "yyyy-MM-dd HH:mm:ss" |
 | onChange     | 时间发生变化的回调，发生在用户选择时间时 | function([Date start, Date end]) | 无           |
 
-`disabled` `style` `popupStyle` `size` `locale` 属性与 DatePicker 的一致。
+`disabled` `style` `popupStyle` `size` `locale` `showTime` 属性与 DatePicker 的一致。
 
 <style>
 .code-box-demo .ant-calendar-picker {

components/date-picker/locale/zh_CN.js

@@ -5,7 +5,8 @@ import CalendarLocale from 'rc-calendar/lib/locale/zh_CN';
 // 统一合并为完整的 Locale
 let locale = objectAssign({}, GregorianCalendarLocale);
 locale.lang = objectAssign({
-  placeholder: '请选择日期'
+  placeholder: '请选择日期',
+  timePlaceholder: '请选择时间',
 }, CalendarLocale);
 
 // All settings at:

package.json

@@ -58,7 +58,7 @@
     "rc-switch": "~1.3.1",
     "rc-table": "~3.6.2",
     "rc-tabs": "~5.5.0",
-    "rc-time-picker": "1.0.0-alpha9",
+    "rc-time-picker": "~1.0.0",
     "rc-tooltip": "~3.3.0",
     "rc-tree": "~0.19.0",
     "rc-trigger": "~1.0.6",

style/components/datepicker.less

@@ -11,7 +11,6 @@
 @import "datepicker/Calendar";
 @import "datepicker/RangePicker";
 @import "datepicker/Time";
-@import "datepicker/TimePanel";
 @import "datepicker/MonthPanel";
 @import "datepicker/YearPanel";
 @import "datepicker/DecadePanel";

style/components/datepicker/Calendar.less

@@ -81,6 +81,7 @@
   line-height: @line-height-base;
 
   &-input-wrap {
+    height: 34px;
     padding: 6px;
     border-bottom: 1px solid @border-color-split;
   }
@@ -90,6 +91,7 @@
     width: 100%;
     cursor: auto;
     outline: 0;
+    height: 22px;
   }
 
   &-week-number {
@@ -250,7 +252,7 @@
     height: 20px;
     text-align: center;
     line-height: 20px;
-    top: 6px;
+    top: 7px;
     margin: 0;
   }
 

style/components/datepicker/RangePicker.less

@@ -1,11 +1,16 @@
-@input-box-height: 35px;
+@input-box-height: 34px;
+
+.@{calendar-prefix-cls}-range-picker.ant-input {
+  padding-right: 26px;
+}
 
 .@{calendar-prefix-cls}-range-picker-input {
   background-color: transparent;
   border: 0;
   height: 18px;
   line-height: 18px;
-  width: 44%;
+  outline: 0;
+  width: 43%;
 
   &[disabled] {
     cursor: not-allowed;
@@ -33,23 +38,26 @@
     position: absolute;
     left: 50%;
     width: 20px;
-    margin-left: -10px;
+    margin-left: -147px;
     text-align: center;
     height: @input-box-height;
     line-height: @input-box-height;
   }
 
-  .@{calendar-prefix-cls}-date-input-wrap,
+  &-right .@{calendar-prefix-cls}-date-input-wrap {
-  .@{calendar-prefix-cls}-time-picker-wrap {
+    margin-left: -133px;
-    width: 47%;
   }
 
-  .@{calendar-prefix-cls}-time-picker-wrap {
+  &.@{calendar-prefix-cls}-time &-middle {
-    position: absolute;
+    margin-left: -45px;
-    left: 50%;
   }
-  .@{css-prefix}time-picker-input {
+
-    width: 100%;
+  &.@{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;
   }
 
   .@{calendar-prefix-cls}-input-wrap {

style/components/datepicker/Time.less

@@ -1,20 +1,18 @@
 @import "../../mixins/input";
 
 .@{calendar-prefix-cls}-time {
-  > span {
+  .@{calendar-prefix-cls}-input,
-    margin: 0 2px;
+  .@{timepicker-prefix-cls}-input {
+    .input;
+    height: 22px;
+    width: 96px;
   }
-  ~ .@{calendar-prefix-cls}-footer-btn {
+  .@{timepicker-prefix-cls}-icon {
-    display: inline;
+    display: none;
-    text-align: left;
+  }
+  &-picker-wrap {
+    position: absolute;
+    left: 108px;
+    top: 6px;
   }
 }
-
-.@{calendar-prefix-cls}-time-input {
-  .input;
-  margin: 0;
-  width: 30px;
-  height: 26px;
-  padding: 0;
-  text-align: center;
-}

style/components/datepicker/TimePanel.less

@@ -1,72 +0,0 @@
-.@{calendar-prefix-cls}-time-panel {
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  background: #fff;
-  z-index: 10;
-  position: absolute;
-  outline: none;
-  border-radius: @border-radius-base;
-}
-
-.@{calendar-prefix-cls}-time-panel-header {
-  padding: 0 10px;
-  height: 34px;
-  line-height: 34px;
-  position: relative;
-  text-align: center;
-  user-select: none;
-  border-bottom: 1px solid @border-color-split;
-}
-
-.@{calendar-prefix-cls}-time-panel-body {
-  padding: 2px 10px;
-}
-
-.@{calendar-prefix-cls}-time-panel-title {
-  width: 180px;
-  font-weight: bold;
-  display: inline-block;
-  padding: 4px 5px;
-  text-align: center;
-  height: 30px;
-  line-height: 22px;
-  border-radius: 4px;
-}
-
-.@{calendar-prefix-cls}-time-panel-table {
-  table-layout: fixed;
-  width: 100%;
-  border-collapse: separate;
-}
-
-.@{calendar-prefix-cls}-time-panel-cell {
-  text-align: center;
-  height: 40px;
-  vertical-align: middle;
-}
-
-.@{calendar-prefix-cls}-time-panel-time {
-  line-height: 24px;
-  display: block;
-  border-radius: 4px;
-  margin: 0 auto;
-  color: #666;
-  transition: background 0.3s ease;
-
-  &:hover {
-    background: tint(@primary-color, 90%);
-    cursor: pointer;
-  }
-}
-
-.@{calendar-prefix-cls}-time-panel-selected-cell .@{calendar-prefix-cls}-time-panel-time {
-  background: @primary-color;
-  color: #fff;
-
-  &:hover {
-    background: @primary-color;
-    color: #fff;
-  }
-}