fix: #84 initialize picker state with input value

example/calendar.tsx

@@ -149,7 +149,6 @@ class DateTimeForm extends React.Component<any, any> {
           popupPosition='bottom right'
           name='dateTime'
           closable
-          minDate={new Date()}
           clearable={clearable}
           value={this.state.dateTime}
           iconPosition='left'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "semantic-ui-calendar-react",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "date/time picker built from semantic-ui elements",
   "main": "dist/index.js",
   "scripts": {

src/inputs/BaseInput.tsx

@@ -8,6 +8,7 @@ import {
 import {
   TimeFormat,
 } from '../pickers/BasePicker';
+import moment = require('moment');
 
 export interface BaseInputProps {
   [key: string]: any;
@@ -132,6 +133,7 @@ abstract class BaseInput<P extends BaseInputProps,
   S extends BaseInputState> extends React.Component<P, S> {
   public static defaultProps = {
     inline: false,
+    localization: moment.locale(),
   };
 
   private calendarNode: HTMLElement;

src/inputs/DateInput.tsx

@@ -28,9 +28,7 @@ import {
   tick,
 } from '../lib';
 import {
-  chooseValue,
-  dateValueToString,
-  getInitializer,
+  buildValue,
   parseArrayOrValue,
   parseValue,
 } from './parse';
@@ -98,10 +96,10 @@ class DateInput extends BaseInput<DateInputProps, DateInputState> {
    *  - handle underlying picker change
    */
   public static readonly defaultProps = {
+    ...BaseInput.defaultProps,
     dateFormat: 'DD-MM-YYYY',
     startMode: 'day',
     preserveViewMode: true,
-    inline: false,
     icon: 'calendar',
   };
 
@@ -176,11 +174,13 @@ class DateInput extends BaseInput<DateInputProps, DateInputState> {
       PropTypes.arrayOf(CustomPropTypes.dateObject),
     ]),
     markColor: PropTypes.string,
+    /** Moment date localization. */
+    localization: PropTypes.string,
   };
 
   constructor(props: DateInputProps) {
     super(props);
-    const parsedValue = parseValue(props.value, props.dateFormat);
+    const parsedValue = parseValue(props.value, props.dateFormat, props.localization);
     this.state = {
       mode: props.startMode,
       popupIsClosed: true,
@@ -218,8 +218,8 @@ class DateInput extends BaseInput<DateInputProps, DateInputState> {
         icon={isBoolean(icon) && !icon ? undefined : icon}
         onFocus={this.onFocus}
         {...rest}
-        render={(props) => this.getPicker(props)}
-        value={dateValueToString(chooseValue(value, undefined), dateFormat)}
+        renderPicker={() => this.getPicker()}
+        value={value}
       />
     );
   }
@@ -240,7 +240,7 @@ class DateInput extends BaseInput<DateInputProps, DateInputState> {
     }
   }
 
-  private getPicker = ({ tabIndex, pickerWidth, pickerStyle }) => {
+  private getPicker = () => {
     const {
       value,
       initialDate,
@@ -253,6 +253,9 @@ class DateInput extends BaseInput<DateInputProps, DateInputState> {
       marked,
       markColor,
       localization,
+      tabIndex,
+      pickerWidth,
+      pickerStyle,
     } = this.props;
     const pickerProps = {
       isPickerInFocus: this.isPickerInFocus,
@@ -265,15 +268,14 @@ class DateInput extends BaseInput<DateInputProps, DateInputState> {
       pickerStyle,
       onChange: this.handleSelect,
       onHeaderClick: this.switchToPrevMode,
-      initializeWith: getInitializer({ initialDate, dateFormat, dateParams: this.getDateParams(), localization }),
-      value: parseValue(chooseValue(value, initialDate), dateFormat),
-      enable: parseArrayOrValue(enable, dateFormat),
-      minDate: parseValue(minDate, dateFormat),
-      maxDate: parseValue(maxDate, dateFormat),
+      value: buildValue(value, initialDate, localization, dateFormat),
+      enable: parseArrayOrValue(enable, dateFormat, localization),
+      minDate: parseValue(minDate, dateFormat, localization),
+      maxDate: parseValue(maxDate, dateFormat, localization),
       localization,
     };
-    const disableParsed = parseArrayOrValue(disable, dateFormat);
-    const markedParsed = parseArrayOrValue(marked, dateFormat);
+    const disableParsed = parseArrayOrValue(disable, dateFormat, localization);
+    const markedParsed = parseArrayOrValue(marked, dateFormat, localization);
     const { mode } = this.state;
     if (mode === 'year') {
       return (

src/inputs/DateTimeInput.tsx

@@ -30,10 +30,10 @@ import BaseInput, {
 import { tick } from '../lib';
 import {
   chooseValue,
-  getInitializer,
   parseArrayOrValue,
   parseValue,
   TIME_FORMAT,
+  buildValue,
 } from './parse';
 import {
   getDisabledMonths,
@@ -116,13 +116,13 @@ class DateTimeInput extends BaseInput<DateTimeInputProps, DateTimeInputState> {
    *  - handle underlying picker change
    */
   public static readonly defaultProps = {
+    ...BaseInput.defaultProps,
     dateFormat: 'DD-MM-YYYY',
     timeFormat: '24',
     startMode: 'day',
     divider: ' ',
     icon: 'calendar',
     preserveViewMode: true,
-    inline: false,
   };
 
   public static readonly propTypes = {
@@ -193,11 +193,13 @@ class DateTimeInput extends BaseInput<DateTimeInputProps, DateTimeInputState> {
       PropTypes.arrayOf(CustomPropTypes.dateObject),
     ]),
     markColor: PropTypes.string,
+    /** Moment date localization. */
+    localization: PropTypes.string,
   };
 
   constructor(props: DateTimeInputProps) {
     super(props);
-    const parsedValue = parseValue(props.value, props.dateFormat);
+    const parsedValue = parseValue(props.value, props.dateFormat, props.localization);
     this.state = {
       mode: props.startMode,
       year: parsedValue ? parsedValue.year() : undefined,
@@ -239,7 +241,7 @@ class DateTimeInput extends BaseInput<DateTimeInputProps, DateTimeInputState> {
         onMount={this.onInputViewMount}
         {...rest}
         value={value}
-        render={(pickerProps) => this.getPicker(pickerProps)}
+        renderPicker={() => this.getPicker()}
       />
     );
   }
@@ -277,7 +279,7 @@ class DateTimeInput extends BaseInput<DateTimeInputProps, DateTimeInputState> {
     return dateTimeFormat || `${dateFormat}${divider}${TIME_FORMAT[timeFormat]}`;
   }
 
-  private getPicker({ tabIndex, pickerWidth, pickerStyle }): React.ReactNode {
+  private getPicker(): React.ReactNode {
     const {
       value,
       initialDate,
@@ -289,6 +291,9 @@ class DateTimeInput extends BaseInput<DateTimeInputProps, DateTimeInputState> {
       marked,
       markColor,
       localization,
+      tabIndex,
+      pickerStyle,
+      pickerWidth,
     } = this.props;
     const dateTimeFormat = this.getDateTimeFormat();
     const pickerProps = {
@@ -302,15 +307,14 @@ class DateTimeInput extends BaseInput<DateTimeInputProps, DateTimeInputState> {
       closePopup: this.closePopup,
       onChange: this.handleSelect,
       onHeaderClick: this.switchToPrevMode,
-      initializeWith: getInitializer({ initialDate, dateFormat: dateTimeFormat, dateParams: this.getDateParams(), localization }),
-      value: parseValue(chooseValue(value, initialDate), dateTimeFormat),
-      minDate: parseValue(minDate, dateFormat),
-      maxDate: parseValue(maxDate, dateFormat),
-      marked: parseArrayOrValue(marked, dateFormat),
+      value: buildValue(value, initialDate, localization, dateFormat),
+      minDate: parseValue(minDate, dateFormat, localization),
+      maxDate: parseValue(maxDate, dateFormat, localization),
+      marked: parseArrayOrValue(marked, dateFormat, localization),
       markColor,
       localization,
     };
-    const disableParsed = parseArrayOrValue(disable, dateFormat);
+    const disableParsed = parseArrayOrValue(disable, dateFormat, localization);
     const { mode } = this.state;
     if (mode === 'year') {
       return (

src/inputs/DatesRangeInput.tsx

@@ -10,6 +10,7 @@ import {
   parseDatesRange,
   parseValue,
   parseArrayOrValue,
+  buildValue,
 } from './parse';
 
 import DatesRangePicker, {
@@ -22,6 +23,7 @@ import BaseInput, {
   MinMaxValueProps,
   MarkedValuesProps,
 } from './BaseInput';
+import moment = require('moment');
 
 const DATES_SEPARATOR = ' - ';
 
@@ -43,9 +45,9 @@ class DatesRangeInput extends BaseInput<DatesRangeInputProps, BaseInputState> {
    *    string 'start - end')
    */
   public static readonly defaultProps = {
+    ...BaseInput.defaultProps,
     dateFormat: 'DD-MM-YYYY',
     icon: 'calendar',
-    inline: false,
   };
 
   public static readonly propTypes = {
@@ -95,6 +97,8 @@ class DatesRangeInput extends BaseInput<DatesRangeInputProps, BaseInputState> {
       PropTypes.arrayOf(CustomPropTypes.dateObject),
     ]),
     markColor: PropTypes.string,
+    /** Moment date localization. */
+    localization: PropTypes.string,
   };
 
   constructor(props) {
@@ -119,12 +123,6 @@ class DatesRangeInput extends BaseInput<DatesRangeInputProps, BaseInputState> {
       ...rest
     } = this.props;
 
-    const {
-      start,
-      end,
-    } = parseDatesRange(value, dateFormat);
-    const markedParsed = parseArrayOrValue(marked, dateFormat);
-
     return (
       <InputView
         popupIsClosed={this.state.popupIsClosed}
@@ -134,25 +132,52 @@ class DatesRangeInput extends BaseInput<DatesRangeInputProps, BaseInputState> {
         onMount={this.onInputViewMount}
         closePopup={this.closePopup}
         openPopup={this.openPopup}
-        render={(pickerProps) =>
-          (<DatesRangePicker
-            {...pickerProps}
-            isPickerInFocus={this.isPickerInFocus}
-            isTriggerInFocus={this.isTriggerInFocus}
-            inline={this.props.inline}
-            onCalendarViewMount={this.onCalendarViewMount}
-            closePopup={this.closePopup}
-            onChange={this.handleSelect}
-            dateFormat={dateFormat}
-            initializeWith={getInitializer({ initialDate, dateFormat, localization })}
-            start={start}
-            end={end}
-            marked={markedParsed}
-            markColor={markColor}
-            minDate={parseValue(minDate, dateFormat)}
-            maxDate={parseValue(maxDate, dateFormat)}
-            localization={localization} />)
-        }
+        renderPicker={this.getPicker}
+      />
+    );
+  }
+
+  private getPicker = () => {
+    const {
+      value,
+      dateFormat,
+      markColor,
+      marked,
+      initialDate,
+      localization,
+      minDate,
+      maxDate,
+      tabIndex,
+      pickerWidth,
+      pickerStyle,
+    } = this.props;
+    const {
+      start,
+      end,
+    } = parseDatesRange(value, dateFormat);
+    const markedParsed = parseArrayOrValue(marked, dateFormat, localization);
+
+    return (
+      <DatesRangePicker
+        isPickerInFocus={this.isPickerInFocus}
+        isTriggerInFocus={this.isTriggerInFocus}
+        inline={this.props.inline}
+        onCalendarViewMount={this.onCalendarViewMount}
+        closePopup={this.closePopup}
+        onChange={this.handleSelect}
+        dateFormat={dateFormat}
+        initializeWith={buildValue(start, initialDate, localization, dateFormat)}
+        start={start}
+        end={end}
+        marked={markedParsed}
+        markColor={markColor}
+        minDate={parseValue(minDate, dateFormat, localization)}
+        maxDate={parseValue(maxDate, dateFormat, localization)}
+        localization={localization}
+        onHeaderClick={() => undefined}
+        tabIndex={tabIndex}
+        pickerWidth={pickerWidth}
+        pickerStyle={pickerStyle}
       />
     );
   }