EuiSuperDatePicker handle invalid start and end property values (#1544)

* EuiSuperDatePicker handle invalid start and end property values

* change log

CHANGELOG.md

@@ -7,6 +7,7 @@
 
 - Fixed `EuiSearchBar.Query` match_all query string must be `*` ([#1521](https://github.com/elastic/eui/pull/1521))
 - Fixed `EuiSuperDatePicker` crashing with negative relative value ([#1537](https://github.com/elastic/eui/pull/1537))
+- Fixed `EuiSuperDatePicker` crashing with invalid start and end prop values ([#1544](https://github.com/elastic/eui/pull/1544))
 - Make TSLint issues be warnings, not errors, when running `src-docs` ([#1537](https://github.com/elastic/eui/pull/1537))
 
 ## [`6.10.0`](https://github.com/elastic/eui/tree/v6.10.0)

src-docs/src/views/date_picker/super_date_picker.js

@@ -36,6 +36,18 @@ export default class extends Component {
     }, this.startLoading);
   }
 
+  onStartInputChange = e => {
+    this.setState({
+      start: e.target.value,
+    });
+  };
+
+  onEndInputChange = e => {
+    this.setState({
+      end: e.target.value,
+    });
+  };
+
   startLoading = () => {
     setTimeout(
       this.stopLoading,
@@ -74,17 +86,19 @@ export default class extends Component {
       <Fragment>
         <EuiFormRow
           label="start"
+          helpText="EuiSuperDatePicker should be resilient to invalid start values. Try to break it with unexpected values"
         >
           <EuiFieldText
-            readOnly
+            onChange={this.onStartInputChange}
             value={this.state.start}
           />
         </EuiFormRow>
         <EuiFormRow
           label="end"
+          helpText="EuiSuperDatePicker should be resilient to invalid end values. Try to break it with unexpected values"
         >
           <EuiFieldText
-            readOnly
+            onChange={this.onEndInputChange}
             value={this.state.end}
           />
         </EuiFormRow>

src/components/date_picker/super_date_picker/date_popover/absolute_tab.js

@@ -16,7 +16,7 @@ export class EuiAbsoluteTab extends Component {
     super(props);
 
     const parsedValue = dateMath.parse(props.value, { roundUp: props.roundUp });
-    const valueAsMoment = parsedValue ? parsedValue : moment();
+    const valueAsMoment = parsedValue && parsedValue.isValid() ? parsedValue : moment();
     this.state = {
       valueAsMoment,
       textInputValue: valueAsMoment.format(INPUT_DATE_FORMAT),

src/components/date_picker/super_date_picker/date_popover/relative_tab.js

@@ -55,7 +55,10 @@ export class EuiRelativeTab extends Component {
 
   render() {
     const isInvalid = this.state.count < 0;
-    const formatedValue = isInvalid ? '' : dateMath.parse(this.props.value).format(this.props.dateFormat);
+    const parsedValue = dateMath.parse(this.props.value);
+    const formatedValue = isInvalid || !parsedValue || !parsedValue.isValid()
+      ? ''
+      : parsedValue.format(this.props.dateFormat);
     return (
       <EuiForm className="euiDatePopoverContent__padded">
         <EuiFlexGroup gutterSize="s" responsive={false}>

src/components/date_picker/super_date_picker/quick_select_popover/quick_select.js

@@ -83,8 +83,8 @@ export class EuiQuickSelect extends Component {
     const startMoment = dateMath.parse(this.props.start);
     const endMoment = dateMath.parse(this.props.end, { roundUp: true });
     return {
-      min: startMoment ? startMoment : moment().subtract(15, 'minute'),
-      max: endMoment ? endMoment : moment(),
+      min: startMoment && startMoment.isValid() ? startMoment : moment().subtract(15, 'minute'),
+      max: endMoment && endMoment.isValid() ? endMoment : moment(),
     };
   }
 

src/components/date_picker/super_date_picker/super_date_picker.js

@@ -23,7 +23,7 @@ function isRangeInvalid(start, end) {
 
   const startMoment = dateMath.parse(start);
   const endMoment = dateMath.parse(end, { roundUp: true });
-  if (!startMoment || !endMoment) {
+  if (!startMoment || !endMoment || !startMoment.isValid() || !endMoment.isValid()) {
     return true;
   }
   if (startMoment.isAfter(endMoment)) {