Feature: Allow the user to type a date into the input

.all-contributorsrc

@@ -44,6 +44,15 @@
         "doc",
         "example"
       ]
+    },
+    {
+      "login": "rallysson",
+      "name": "Rallysson",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/12260324?v=4",
+      "profile": "https://github.com/rallysson",
+      "contributions": [
+        "doc"
+      ]
     }
   ]
 }

README.md

@@ -4,7 +4,7 @@ Datepickers built with [Semantic UI for React][semantic-ui-react] and [Dayzed][d
 
 [![version][version-badge]][package]
 [![MIT License][license-badge]][license]
-[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors)
+[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors)
 
 ## Overview
 
@@ -69,18 +69,18 @@ More examples [here](https://react-semantic-ui-datepickers.now.sh).
 
 ### Own Props
 
-| property         | type     | required | default                                                                                                 | description                                                                                                     |
-| ---------------- | -------- | -------- | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
-| clearable        | boolean  | no       | true                                                                                                    | Allows the user to clear the value                                                                              |
-| format           | string   | no       | 'YYYY-MM-DD'                                                                                            | Specifies how the date will be formatted using the [date-fns' format](https://date-fns.org/v1.29.0/docs/format) |
-| keepOpenOnClear  | boolean  | no       | false                                                                                                   | Keeps the datepicker open (or opens it if it's closed) when the clear icon is clicked                           |
-| keepOpenOnSelect | boolean  | no       | false                                                                                                   | Keeps the datepicker open when a date is selected                                                               |
-| locale           | object   | no       | [en-US](https://github.com/arthurdenner/react-semantic-ui-datepickers/blob/master/src/locales/en-US.js) | Object with the labels to be used on the library PS: Feel free to submit PR's with more locales!                |
-| onDateChange     | function | yes      |                                                                                                         | Callback fired when the value changes                                                                           |
-| type             | string   | no       | basic                                                                                                   | Type of input to render. Available options: 'basic' and 'range'                                                 |
-| filterDate       | function | no       | () => true                                                                                              | Function that receives each date and returns a boolean to indicate whether it is enabled or not                 |
-|selected   | Date, arrayOf(Date)    | no |  | Default date selected |
-| pointing | string | no | 'left' | Location to render the component around input. Available options: 'left', 'right', 'top left', 'top right' |
+| property         | type                | required | default                                                                                                 | description                                                                                                     |
+| ---------------- | ------------------- | -------- | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| clearable        | boolean             | no       | true                                                                                                    | Allows the user to clear the value                                                                              |
+| format           | string              | no       | 'YYYY-MM-DD'                                                                                            | Specifies how the date will be formatted using the [date-fns' format](https://date-fns.org/v1.29.0/docs/format) |
+| keepOpenOnClear  | boolean             | no       | false                                                                                                   | Keeps the datepicker open (or opens it if it's closed) when the clear icon is clicked                           |
+| keepOpenOnSelect | boolean             | no       | false                                                                                                   | Keeps the datepicker open when a date is selected                                                               |
+| locale           | object              | no       | [en-US](https://github.com/arthurdenner/react-semantic-ui-datepickers/blob/master/src/locales/en-US.js) | Object with the labels to be used on the library PS: Feel free to submit PR's with more locales!                |
+| onDateChange     | function            | yes      |                                                                                                         | Callback fired when the value changes                                                                           |
+| type             | string              | no       | basic                                                                                                   | Type of input to render. Available options: 'basic' and 'range'                                                 |
+| filterDate       | function            | no       | () => true                                                                                              | Function that receives each date and returns a boolean to indicate whether it is enabled or not                 |
+| selected         | Date, arrayOf(Date) | no       |                                                                                                         | Default date selected                                                                                           |
+| pointing         | string              | no       | 'left'                                                                                                  | Location to render the component around input. Available options: 'left', 'right', 'top left', 'top right'      |
 
 ### Form.Input Props
 
@@ -134,8 +134,8 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
 <!-- prettier-ignore -->
-| [<img src="https://avatars0.githubusercontent.com/u/13774309?v=4" width="100px;"/><br /><sub><b>Arthur Denner</b></sub>](https://github.com/arthurdenner)<br />[💻](https://github.com/arthurdenner/react-semantic-ui-datepickers/commits?author=arthurdenner "Code") [🎨](#design-arthurdenner "Design") [📖](https://github.com/arthurdenner/react-semantic-ui-datepickers/commits?author=arthurdenner "Documentation") [💡](#example-arthurdenner "Examples") [🤔](#ideas-arthurdenner "Ideas, Planning, & Feedback") | [<img src="https://avatars2.githubusercontent.com/u/10627086?v=4" width="100px;"/><br /><sub><b>Emerson Laurentino</b></sub>](https://twitter.com/elaurent_)<br />[💻](https://github.com/arthurdenner/react-semantic-ui-datepickers/commits?author=emersonlaurentino "Code") [🤔](#ideas-emersonlaurentino "Ideas, Planning, & Feedback") [📖](https://github.com/arthurdenner/react-semantic-ui-datepickers/commits?author=emersonlaurentino "Documentation") [💡](#example-emersonlaurentino "Examples") | [<img src="https://avatars2.githubusercontent.com/u/12260334?v=4" width="100px;"/><br /><sub><b>Lucas Borges</b></sub>](https://github.com/lucasnsborges)<br />[💻](https://github.com/arthurdenner/react-semantic-ui-datepickers/commits?author=lucasnsborges "Code") [📖](https://github.com/arthurdenner/react-semantic-ui-datepickers/commits?author=lucasnsborges "Documentation") [💡](#example-lucasnsborges "Examples") |
-| :---: | :---: | :---: |
+| [<img src="https://avatars0.githubusercontent.com/u/13774309?v=4" width="100px;"/><br /><sub><b>Arthur Denner</b></sub>](https://github.com/arthurdenner)<br />[💻](https://github.com/arthurdenner/react-semantic-ui-datepickers/commits?author=arthurdenner "Code") [🎨](#design-arthurdenner "Design") [📖](https://github.com/arthurdenner/react-semantic-ui-datepickers/commits?author=arthurdenner "Documentation") [💡](#example-arthurdenner "Examples") [🤔](#ideas-arthurdenner "Ideas, Planning, & Feedback") | [<img src="https://avatars2.githubusercontent.com/u/10627086?v=4" width="100px;"/><br /><sub><b>Emerson Laurentino</b></sub>](https://twitter.com/elaurent_)<br />[💻](https://github.com/arthurdenner/react-semantic-ui-datepickers/commits?author=emersonlaurentino "Code") [🤔](#ideas-emersonlaurentino "Ideas, Planning, & Feedback") [📖](https://github.com/arthurdenner/react-semantic-ui-datepickers/commits?author=emersonlaurentino "Documentation") [💡](#example-emersonlaurentino "Examples") | [<img src="https://avatars2.githubusercontent.com/u/12260334?v=4" width="100px;"/><br /><sub><b>Lucas Borges</b></sub>](https://github.com/lucasnsborges)<br />[💻](https://github.com/arthurdenner/react-semantic-ui-datepickers/commits?author=lucasnsborges "Code") [📖](https://github.com/arthurdenner/react-semantic-ui-datepickers/commits?author=lucasnsborges "Documentation") [💡](#example-lucasnsborges "Examples") | [<img src="https://avatars3.githubusercontent.com/u/12260324?v=4" width="100px;"/><br /><sub><b>Rallysson</b></sub>](https://github.com/rallysson)<br />[📖](https://github.com/arthurdenner/react-semantic-ui-datepickers/commits?author=rallysson "Documentation") |
+| :---: | :---: | :---: | :---: |
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 

date-fns-v2/index.js

@@ -0,0 +1,3 @@
+import parse from 'date-fns/parse';
+
+export default { parse };

date-fns-v2/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "date-fns-v2",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "date-fns": "^2.0.0-alpha.24"
+  }
+}

date-fns-v2/yarn.lock

@@ -0,0 +1,8 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+date-fns@^2.0.0-alpha.24:
+  version "2.0.0-alpha.24"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.0.0-alpha.24.tgz#2988c137c72275af29d7d21cc53eb52b3a8c2586"
+  integrity sha512-jpLzKHKSq0nTcZ3K5ZnTelxWmUwPepuoEaXkATwIUnc1tc+/rIooAvDMR+zdAGnwQ35eVWiyn5dikoLHjhEYeA==

package.json

@@ -34,6 +34,7 @@
     "classnames": "^2.2.5",
     "date-fns": "^1.29.0",
     "dayzed": "^2.2.0",
+    "format-string-by-pattern": "^1.0.0",
     "react-fast-compare": "^2.0.1"
   },
   "devDependencies": {

src/__tests__/utils.test.js

@@ -8,6 +8,7 @@ import {
   isSelectable,
   moveElementsByN,
   omit,
+  parseFormatString,
   pick,
 } from '../utils';
 
@@ -143,3 +144,11 @@ describe('formatSelectedDate', () => {
     );
   });
 });
+
+describe('parseFormatString', () => {
+  it('should change the case of letters D and Y', () => {
+    expect(parseFormatString('YYYY-MM-DD')).toBe('yyyy-MM-dd');
+
+    expect(parseFormatString('DD/MM/yyyy')).toBe('dd/MM/yyyy');
+  });
+});

src/components/datepicker.js

@@ -1,7 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import isEqual from 'react-fast-compare';
-import { formatSelectedDate, moveElementsByN, omit, pick } from '../utils';
+import isValid from 'date-fns/is_valid';
+import formatStringByPattern from 'format-string-by-pattern';
+import {
+  formatSelectedDate,
+  moveElementsByN,
+  omit,
+  parseOnBlur,
+  pick,
+} from '../utils';
 import localeEn from '../locales/en-US';
 import BasicDatePicker from '../pickers/basic';
 import RangeDatePicker from '../pickers/range';
@@ -96,6 +104,7 @@ class SemanticDatepicker extends React.Component {
       isVisible: false,
       selectedDate: selected || initialSelectedDate,
       selectedDateFormatted: formatSelectedDate(selected, format),
+      typedValue: null,
     };
   }
 
@@ -193,6 +202,7 @@ class SemanticDatepicker extends React.Component {
     const newState = {
       selectedDate: newDates,
       selectedDateFormatted: formatSelectedDate(newDates, format),
+      typedValue: null,
     };
 
     this.setState(newState, () => {
@@ -217,13 +227,68 @@ class SemanticDatepicker extends React.Component {
       isVisible: keepOpenOnSelect,
       selectedDate: newDate,
       selectedDateFormatted: formatSelectedDate(newDate, format),
+      typedValue: null,
     };
 
     this.setState(newState, () => {
       onDateChange(newDate);
     });
   };
 
+  handleBlur = () => {
+    const { format } = this.props;
+    const { typedValue } = this.state;
+
+    if (!typedValue) {
+      return;
+    }
+
+    const parsedValue = parseOnBlur(typedValue, format, this.isRangeInput);
+
+    if (this.isRangeInput) {
+      const areDatesValid = parsedValue.every(isValid);
+
+      if (areDatesValid) {
+        this.handleRangeInput(parsedValue);
+        return;
+      }
+    } else {
+      const isDateValid = isValid(parsedValue);
+
+      if (isDateValid) {
+        this.handleBasicInput(parsedValue);
+        return;
+      }
+    }
+
+    this.setState({ typedValue: null });
+  };
+
+  handleChange = (evt, { value }) => {
+    const { format, onDateChange } = this.props;
+    const formatString = this.isRangeInput ? `${format} - ${format}` : format;
+
+    if (!value) {
+      const newState = {
+        selectedDate: this.isRangeInput ? [] : null,
+        selectedDateFormatted: '',
+        typedValue: null,
+      };
+
+      this.setState(newState, () => {
+        onDateChange(null);
+      });
+
+      return;
+    }
+
+    this.setState({
+      selectedDate: this.isRangeInput ? [] : null,
+      selectedDateFormatted: '',
+      typedValue: formatStringByPattern(formatString, value),
+    });
+  };
+
   onDateSelected = (...args) => {
     if (this.isRangeInput) {
       this.handleRangeInput(...args);
@@ -233,7 +298,12 @@ class SemanticDatepicker extends React.Component {
   };
 
   render() {
-    const { isVisible, selectedDate, selectedDateFormatted } = this.state;
+    const {
+      isVisible,
+      selectedDate,
+      selectedDateFormatted,
+      typedValue,
+    } = this.state;
     const { clearable, locale, pointing, filterDate } = this.props;
 
     return (
@@ -247,9 +317,11 @@ class SemanticDatepicker extends React.Component {
         <Input
           {...this.inputProps}
           isClearIconVisible={Boolean(clearable && selectedDateFormatted)}
+          onBlur={this.handleBlur}
+          onChange={this.handleChange}
           onClear={this.resetState}
           onClick={this.showCalendar}
-          value={selectedDateFormatted}
+          value={typedValue || selectedDateFormatted}
         />
         {isVisible && (
           <this.Component

src/components/input.js

@@ -20,7 +20,6 @@ const CustomInput = ({
       />
     }
     onClick={onClick}
-    readOnly
     value={value}
   />
 );

src/utils.js

@@ -1,6 +1,7 @@
 import format from 'date-fns/format';
 import isBefore from 'date-fns/is_before';
 import startOfDay from 'date-fns/start_of_day';
+import dateFnsV2 from '../date-fns-v2';
 
 export const isSelectable = (date, minDate, maxDate) => {
   if (
@@ -56,3 +57,28 @@ export const formatSelectedDate = (selectedDate, dateFormat) => {
     ? selectedDate.map(date => formatDate(date, dateFormat)).join(' - ')
     : formatDate(selectedDate, dateFormat);
 };
+
+export const parseFormatString = formatString =>
+  formatString.replace(/[D, Y]/gi, a => a.toLowerCase());
+
+export const parseOnBlur = (typedValue, formatString, isRangeInput) => {
+  if (isRangeInput) {
+    const rangeValues = typedValue.split(' - ');
+
+    return rangeValues
+      .map(value =>
+        dateFnsV2.parse(
+          value,
+          parseFormatString(formatString, true),
+          new Date()
+        )
+      )
+      .sort((a, b) => (a > b ? 1 : -1));
+  }
+
+  return dateFnsV2.parse(
+    typedValue,
+    parseFormatString(formatString),
+    new Date()
+  );
+};