Merge pull request #1032 from ant-design/calendar

optimize calendar

components/date-picker/RangePicker.jsx

@@ -15,8 +15,10 @@ export default React.createClass({
       endPlaceholder: '结束日期',
       transitionName: 'slide-up',
       popupStyle: {},
-      onChange() {},
-      onOk() {},
+      onChange() {
+      },
+      onOk() {
+      },
       locale: {},
       align: {
         offset: [0, -9],
@@ -48,7 +50,9 @@ export default React.createClass({
   },
   handleChange(value) {
     if (!('value' in this.props)) {
-      this.setState({ value });
+      this.setState({
+        value
+      });
     }
     const startTime = value[0] ? new Date(value[0].getTime()) : null;
     const endTime = value[1] ? new Date(value[1].getTime()) : null;
@@ -63,22 +67,39 @@ export default React.createClass({
     defaultCalendarValue.setTime(Date.now());
 
     const { disabledDate, showTime, size, startPlaceholder, endPlaceholder, getCalendarContainer,
-            transitionName, disabled, popupStyle, align, style, onOk } = this.props;
+      transitionName, disabled, popupStyle, align, style, onOk } = this.props;
     const state = this.state;
 
-    const timePicker = showTime
-      ? <TimePicker prefixCls="ant-time-picker"
+    let timePicker = null;
+
+    if (showTime) {
+      timePicker = (<TimePicker
+        prefixCls="ant-time-picker"
         placeholder={locale.lang.timePlaceholder}
-        transitionName="slide-up" />
-      : null;
+        transitionName="slide-up"/>);
+    }
 
     const calendarClassName = classNames({
       ['ant-calendar-time']: this.props.showTime,
     });
 
+    let pickerChangeHandler = {
+      onChange: this.handleChange,
+    };
+
+    let calendarHandler = {
+      onOk: this.handleChange,
+    };
+
+    if (timePicker) {
+      pickerChangeHandler = {};
+    } else {
+      calendarHandler = {};
+    }
+
     const calendar = (
-      <RangeCalendar prefixCls="ant-calendar"
-        formatter={this.getFormatter()}
+      <RangeCalendar
+        prefixCls="ant-calendar"
         className={calendarClassName}
         timePicker={timePicker}
         disabledDate={disabledDate}
@@ -86,7 +107,9 @@ export default React.createClass({
         locale={locale.lang}
         onOk={onOk}
         defaultValue={[defaultCalendarValue, defaultCalendarValue]}
-        showClear />
+        showClear
+        {...calendarHandler}
+      />
     );
 
     const pickerClass = classNames({
@@ -113,25 +136,28 @@ export default React.createClass({
         getCalendarContainer={getCalendarContainer}
         onOpen={this.toggleOpen}
         onClose={this.toggleOpen}
-        onChange={this.handleChange}>
+        {...pickerChangeHandler}
+      >
         {
           ({ value }) => {
             const start = value[0];
             const end = value[1];
             return (
               <span className={pickerInputClass} disabled={disabled}>
-                <input disabled={disabled}
+                <input
+                  disabled={disabled}
                   onChange={this.handleInputChange}
                   value={start && this.getFormatter().format(start)}
                   placeholder={startPlaceholder}
-                  className="ant-calendar-range-picker-input" />
+                  className="ant-calendar-range-picker-input"/>
                 <span className="ant-calendar-range-picker-separator"> ~ </span>
-                <input disabled={disabled}
+                <input
+                  disabled={disabled}
                   onChange={this.handleInputChange}
                   value={end && this.getFormatter().format(end)}
                   placeholder={endPlaceholder}
-                  className="ant-calendar-range-picker-input" />
-                <span className="ant-calendar-picker-icon" />
+                  className="ant-calendar-range-picker-input"/>
+                <span className="ant-calendar-picker-icon"/>
               </span>
             );
           }

components/date-picker/demo/time.md

@@ -2,7 +2,7 @@
 
 - order: 4
 
-增加选择时间功能。
+增加选择时间功能。不要修改时间的格式 `HH:mm:ss`。
 
 ---
 

components/date-picker/index.jsx

@@ -16,8 +16,10 @@ function createPicker(TheCalendar, defaultFormat) {
         format: defaultFormat || 'yyyy-MM-dd',
         transitionName: 'slide-up',
         popupStyle: {},
-        onChange() {},
-        onOk() {},
+        onChange() {
+        },
+        onOk() {
+        },
         locale: {},
         align: {
           offset: [0, -9],
@@ -40,7 +42,9 @@ function createPicker(TheCalendar, defaultFormat) {
     },
     handleChange(value) {
       if (!('value' in this.props)) {
-        this.setState({ value });
+        this.setState({
+          value,
+        });
       }
       const timeValue = value ? new Date(value.getTime()) : null;
       this.props.onChange(timeValue);
@@ -56,10 +60,10 @@ 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" />
+      const timePicker = this.props.showTime ? (<TimePicker
+        prefixCls="ant-time-picker"
+        placeholder={locale.lang.timePlaceholder}
+        transitionName="slide-up"/>)
         : null;
 
       const disabledTime = this.props.showTime ? this.props.disabledTime : null;
@@ -69,9 +73,22 @@ function createPicker(TheCalendar, defaultFormat) {
         ['ant-calendar-month']: MonthCalendar === TheCalendar,
       });
 
+      let pickerChangeHandler = {
+        onChange: this.handleChange,
+      };
+
+      let calendarHandler = {
+        onOk: this.handleChange,
+      };
+
+      if (this.props.showTime) {
+        pickerChangeHandler = {};
+      } else {
+        calendarHandler = {};
+      }
+
       const calendar = (
         <TheCalendar
-          formatter={this.getFormatter()}
           disabledDate={this.props.disabledDate}
           disabledTime={disabledTime}
           locale={locale.lang}
@@ -80,9 +97,8 @@ function createPicker(TheCalendar, defaultFormat) {
           dateInputPlaceholder={placeholder}
           prefixCls="ant-calendar"
           className={calendarClassName}
-          showOk={this.props.showTime}
-          onOk={this.props.onOk}
-          showClear />
+          {...calendarHandler}
+          showClear/>
       );
 
       let sizeClass = '';
@@ -96,10 +112,10 @@ function createPicker(TheCalendar, defaultFormat) {
       if (this.state.open) {
         pickerClass += ' ant-calendar-picker-open';
       }
-
       return (
         <span className={pickerClass}>
-          <DatePicker transitionName={this.props.transitionName}
+          <DatePicker
+            transitionName={this.props.transitionName}
             disabled={this.props.disabled}
             calendar={calendar}
             value={this.state.value}
@@ -109,12 +125,14 @@ function createPicker(TheCalendar, defaultFormat) {
             getCalendarContainer={this.props.getCalendarContainer}
             onOpen={this.toggleOpen}
             onClose={this.toggleOpen}
-            onChange={this.handleChange}>
+            {...pickerChangeHandler}
+          >
             {
               ({ value }) => {
                 return (
                   <span>
-                    <input disabled={this.props.disabled}
+                    <input
+                      disabled={this.props.disabled}
                       onChange={this.handleInputChange}
                       value={value && this.getFormatter().format(value)}
                       placeholder={placeholder}

package.json

@@ -39,7 +39,7 @@
     "gregorian-calendar-format": "~4.1.0",
     "object-assign": "~4.0.1",
     "rc-animate": "~2.0.2",
-    "rc-calendar": "~5.3.0",
+    "rc-calendar": "~5.4.0",
     "rc-cascader": "~0.8.1",
     "rc-checkbox": "~1.2.0",
     "rc-collapse": "~1.4.4",

style/components/datepicker/Calendar.less

@@ -278,7 +278,7 @@
     .btn-primary;
     .button-size(@btn-padding-sm; @font-size-base; @border-radius-sm);
     position: absolute;
-    bottom: 9px;
+    bottom: 8px;
     right: 9px;
   }
 }