fix (DateInput, DateTimeInput): update internal *Input date when value changed (#142)

* typo(readme): remove duplicated stirng

* fix(DateInput): reflect changed input value in internal date

* fix(DateTimeInput): reflect input value change in internal date

* fix lint errors

Author: arfedulov

README.md

@@ -228,7 +228,6 @@ You can also set locale for *Input component locally using ``localization`` prop
 | ``minDate`` | {string\|moment} Minimum date that can be selected |
 | ``inlineLabel`` | {bool} A field can have its label next to instead of above it. |
 | ``closeOnMouseLeave`` | {bool} Should close when cursor leaves calendar popup. Default: ``true`` |
-| ``timeFormat`` | {string} One of ["24", "AMPM", "ampm"]. Default: ``"24"`` |
 | ``preserveViewMode`` | {bool} Preserve last mode (`day`, `hour`, `minute`) each time user opens dialog. Default ``true`` |
 | ``mountNode`` | {any} The node where the picker should mount. |
 | ``onClear`` | {func} Called after clear icon has clicked. |

src/inputs/DateInput.tsx

@@ -193,6 +193,20 @@ class DateInput extends BaseInput<DateInputProps, DateInputState> {
     };
   }
 
+  public componentDidUpdate = (prevProps: DateInputProps) => {
+    // update internal date if ``value`` prop changed and successuffly parsed
+    if (prevProps.value !== this.props.value) {
+      const parsed = parseValue(this.props.value, this.props.dateFormat, this.props.localization);
+      if (parsed) {
+        this.setState({
+          year: parsed.year(),
+          month: parsed.month(),
+          date: parsed.date(),
+        });
+      }
+    }
+  }
+
   public render() {
     const {
       value,

src/inputs/DateTimeInput.tsx

@@ -201,7 +201,7 @@ class DateTimeInput extends BaseInput<DateTimeInputProps, DateTimeInputState> {
 
   constructor(props: DateTimeInputProps) {
     super(props);
-    const parsedValue = parseValue(props.value, props.dateFormat, props.localization);
+    const parsedValue = parseValue(props.value, this.getDateTimeFormat(), props.localization);
     this.state = {
       mode: props.startMode,
       year: parsedValue ? parsedValue.year() : undefined,
@@ -213,6 +213,22 @@ class DateTimeInput extends BaseInput<DateTimeInputProps, DateTimeInputState> {
     };
   }
 
+  public componentDidUpdate = (prevProps: DateTimeInputProps) => {
+    // update internal date if ``value`` prop changed and successuffly parsed
+    if (prevProps.value !== this.props.value) {
+      const parsed = parseValue(this.props.value, this.getDateTimeFormat(), this.props.localization);
+      if (parsed) {
+        this.setState({
+          year: parsed.year(),
+          month: parsed.month(),
+          date: parsed.date(),
+          hour: parsed.hour(),
+          minute: parsed.minute(),
+        });
+      }
+    }
+  }
+
   public render() {
     const {
       value,

src/inputs/DatesRangeInput.tsx

@@ -161,9 +161,9 @@ class DatesRangeInput extends BaseInput<DatesRangeInputProps, BaseInputState> {
     const markedParsed = parseArrayOrValue(marked, dateFormat, localization);
     const minDateParsed = parseValue(minDate, dateFormat, localization);
     const maxDateParsed = parseValue(maxDate, dateFormat, localization);
-    
+     
     let initializeWith;
-    
+
     if (!initialDate && minDateParsed || maxDateParsed) {
       initializeWith = minDateParsed || maxDateParsed;
     } else {

tslint.json

@@ -23,6 +23,7 @@
     "quotemark": [true, "single"],
     "object-literal-sort-keys": false,
     "max-classes-per-file": false,
+    "no-trailing-whitespace": [ true, "ignore-blank-lines"],
     "trailing-comma": [
       true,
       {