Datepicker upgrade

components/datepicker/index.jsx

@@ -41,10 +41,10 @@ function createPicker(TheCalendar) {
         locale: {},
         // 自动换方向有很多视觉和交互问题
         // 需求不是很大，和设计师协商后不做
-        placement: {
+        align: {
           points: ['tl', 'tl'],
           overflow: { adjustX: 0, adjustY: 0 },
-          offset: [0, -3],
+          offset: [0, -8],
           targetOffset: [0, 0]
         }
       };
@@ -111,6 +111,7 @@ function createPicker(TheCalendar) {
           disabledDate={this.props.disabledDate}
           locale={getCalendarLocale(this.getLocale().lang)}
           defaultValue={defaultCalendarValue}
+          dateInputPlaceholder={this.props.placeholder}
           showTime={this.props.showTime}
           prefixCls="ant-calendar"
           showOk={this.props.showTime}
@@ -123,16 +124,16 @@ function createPicker(TheCalendar) {
         sizeClass = ' ant-input-sm';
       }
       let defaultValue = this.parseDateFromValue(this.props.defaultValue);
-      return (
+      return <span className="ant-calendar-picker">
         <Datepicker
           transitionName={this.props.transitionName}
           disabled={this.props.disabled}
           calendar={calendar}
           value={this.state.value}
           defaultValue={defaultValue}
-          prefixCls="ant-calendar-picker"
+          prefixCls="ant-calendar-picker-container"
           style={this.props.style}
-          placement={this.props.placement}
+          align={this.props.align}
           onChange={this.handleChange}>
           {
             ({value}) => {
@@ -147,7 +148,7 @@ function createPicker(TheCalendar) {
             }
           }
         </Datepicker>
-      );
+      </span>;
     }
   });
 }

package.json

@@ -38,7 +38,7 @@
     "gregorian-calendar-format": "~3.0.1",
     "object-assign": "~4.0.1",
     "rc-animate": "~2.0.0",
-    "rc-calendar": "4.0.0-alpha6",
+    "rc-calendar": "4.0.0-alpha9",
     "rc-checkbox": "~1.1.1",
     "rc-collapse": "~1.4.0",
     "rc-dialog": "~5.1.0",

style/components/datepicker/Calendar.less

@@ -1,5 +1,4 @@
 .calendarPanelHeader(@calendar-prefix-cls) {
-  padding: 0 10px;
   height: 34px;
   line-height: 34px;
   text-align: center;
@@ -238,7 +237,7 @@
   .@{calendar-prefix-cls}-clear-btn {
     position: absolute;
     right: 6px;
-    text-indent: -99px;
+    text-indent: -76px;
     overflow: hidden;
     width: 20px;
     height: 20px;

style/components/datepicker/Picker.less

@@ -1,12 +1,9 @@
-.@{calendar-prefix-cls}-picker-container .@{calendar-prefix-cls} {
-  &-hidden {
-    display: none;
-  }
-
+.@{calendar-prefix-cls}-picker-container  {
   position: absolute;
-  left: -9999px;
-  top: -9999px;
-  z-index: 1070;
+  .@{calendar-prefix-cls} {
+    position: absolute;
+    z-index: 1070;
+  }
 }
 
 .@{calendar-prefix-cls}-picker {
@@ -39,8 +36,4 @@
       vertical-align: bottom;
     }
   }
-  &-open .@{calendar-prefix-cls},
-  &-container-open .@{calendar-prefix-cls} {
-    display: block;
-  }
 }