fix(datepicker): Validating inserted date on Enter (#11)

Author: arthurdenner

src/components/datepicker.js

@@ -289,6 +289,13 @@ class SemanticDatepicker extends React.Component {
     });
   };
 
+  handleKeyDown = evt => {
+    // If the Enter key was pressed...
+    if (evt.keyCode === 13) {
+      this.handleBlur();
+    }
+  };
+
   onDateSelected = (...args) => {
     if (this.isRangeInput) {
       this.handleRangeInput(...args);
@@ -321,6 +328,7 @@ class SemanticDatepicker extends React.Component {
           onChange={this.handleChange}
           onClear={this.resetState}
           onClick={this.showCalendar}
+          onKeyDown={this.handleKeyDown}
           value={typedValue || selectedDateFormatted}
         />
         {isVisible && (

src/utils.js

@@ -62,23 +62,15 @@ export const parseFormatString = formatString =>
   formatString.replace(/[D, Y]/gi, a => a.toLowerCase());
 
 export const parseOnBlur = (typedValue, formatString, isRangeInput) => {
+  const parsedFormatString = parseFormatString(formatString);
+
   if (isRangeInput) {
     const rangeValues = typedValue.split(' - ');
 
     return rangeValues
-      .map(value =>
-        dateFnsV2.parse(
-          value,
-          parseFormatString(formatString, true),
-          new Date()
-        )
-      )
+      .map(value => dateFnsV2.parse(value, parsedFormatString, new Date()))
       .sort((a, b) => (a > b ? 1 : -1));
   }
 
-  return dateFnsV2.parse(
-    typedValue,
-    parseFormatString(formatString),
-    new Date()
-  );
+  return dateFnsV2.parse(typedValue, parsedFormatString, new Date());
 };

stories/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
+import parse from 'date-fns/parse';
 import { Form } from 'semantic-ui-react';
 import 'semantic-ui-css/semantic.min.css';
 import SemanticDatepicker from '../src';
@@ -91,6 +92,8 @@ storiesOf('Examples', module)
         onDateChange={console.log}
         format="DD/MM/YYYY"
         locale={localePtBr}
+        selected={parse('2018-10-01')}
+        keepOpenOnSelect
       />
     </Content>
   ))