Fix DatePicker[showTime] default width

ant-design · Dec 11, 2016 · b912f1c · b912f1c
1 parent 86a2cf3
commit b912f1c
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 15 deletions.
diff --git a/components/date-picker/RangePicker.tsx b/components/date-picker/RangePicker.tsx
@@ -3,6 +3,7 @@ import moment from 'moment';
 import RangeCalendar from 'rc-calendar/lib/RangeCalendar';
 import RcDatePicker from 'rc-calendar/lib/Picker';
 import classNames from 'classnames';
+import assign from 'object-assign';
 import Icon from '../icon';
 
 export default class RangePicker extends React.Component<any, any> {
@@ -144,6 +145,12 @@ export default class RangePicker extends React.Component<any, any> {
       />
     );
 
+    // default width for showTime
+    const pickerStyle = {} as any;
+    if (props.showTime) {
+      pickerStyle.minWidth = 300;
+    }
+
     const clearIcon = (!props.disabled && props.allowClear && state.value && (state.value[0] || state.value[1]))
       ? <Icon
         type="cross-circle"
@@ -177,19 +184,21 @@ export default class RangePicker extends React.Component<any, any> {
       );
     };
 
-    return (<span className={props.pickerClass} style={style}>
-      <RcDatePicker
-        {...props}
-        {...pickerChangeHandler}
-        calendar={calendar}
-        value={state.value}
-        open={state.open}
-        onOpenChange={this.handleOpenChange}
-        prefixCls={`${prefixCls}-picker-container`}
-        style={popupStyle}
-      >
-        {input}
-      </RcDatePicker>
-    </span>);
+    return (
+      <span className={props.pickerClass} style={assign({}, style, pickerStyle)}>
+        <RcDatePicker
+          {...props}
+          {...pickerChangeHandler}
+          calendar={calendar}
+          value={state.value}
+          open={state.open}
+          onOpenChange={this.handleOpenChange}
+          prefixCls={`${prefixCls}-picker-container`}
+          style={popupStyle}
+        >
+          {input}
+        </RcDatePicker>
+      </span>
+    );
   }
 }
diff --git a/components/date-picker/createPicker.tsx b/components/date-picker/createPicker.tsx
@@ -4,6 +4,7 @@ import MonthCalendar from 'rc-calendar/lib/MonthCalendar';
 import RcDatePicker from 'rc-calendar/lib/Picker';
 import classNames from 'classnames';
 import omit from 'omit.js';
+import assign from 'object-assign';
 import Icon from '../icon';
 
 export interface PickerProps {
@@ -135,6 +136,12 @@ export default function createPicker(TheCalendar) {
         />
       );
 
+      // default width for showTime
+      const pickerStyle = {} as any;
+      if (props.showTime) {
+        pickerStyle.minWidth = 154;
+      }
+
       const clearIcon = (!props.disabled && props.allowClear && this.state.value) ?
         <Icon
           type="cross-circle"
@@ -157,7 +164,7 @@ export default function createPicker(TheCalendar) {
       );
 
       return (
-        <span className={props.pickerClass} style={props.style}>
+        <span className={props.pickerClass} style={assign({}, props.style, pickerStyle)}>
           <RcDatePicker
             {...props}
             {...pickerChangeHandler}