react-date-picker - npm Package Compare versions

Comparing version 8.3.6 to 8.4.0

dist/DateInput.js

 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
@@ -56,5 +56,5 @@ Object.defineProperty(exports, "__esModule", {
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
@@ -362,4 +362,4 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
       })) {
-        var year = parseInt(values.year, 10);
-        var monthIndex = parseInt(values.month, 10) - 1 || 0;
+        var year = parseInt(values.year, 10) || new Date().getFullYear();
+        var monthIndex = parseInt(values.month || 1, 10) - 1;
         var day = parseInt(values.day || 1, 10);
@@ -395,3 +395,4 @@ var proposedValue = new Date();
       }, _this.commonInputProps, {
-        ariaLabel: dayAriaLabel,
+        ariaLabel: dayAriaLabel // eslint-disable-next-line jsx-a11y/no-autofocus
+        ,
         autoFocus: index === 0 && autoFocus,
@@ -426,3 +427,4 @@ inputRef: _this.dayInput,
         }, _this.commonInputProps, {
-          ariaLabel: monthAriaLabel,
+          ariaLabel: monthAriaLabel // eslint-disable-next-line jsx-a11y/no-autofocus
+          ,
           autoFocus: index === 0 && autoFocus,
@@ -442,3 +444,4 @@ inputRef: _this.monthInput,
       }, _this.commonInputProps, {
-        ariaLabel: monthAriaLabel,
+        ariaLabel: monthAriaLabel // eslint-disable-next-line jsx-a11y/no-autofocus
+        ,
         autoFocus: index === 0 && autoFocus,
@@ -462,3 +465,4 @@ inputRef: _this.monthInput,
       }, _this.commonInputProps, {
-        ariaLabel: yearAriaLabel,
+        ariaLabel: yearAriaLabel // eslint-disable-next-line jsx-a11y/no-autofocus
+        ,
         autoFocus: index === 0 && autoFocus,
@@ -640,10 +644,10 @@ inputRef: _this.yearInput,
       var className = this.props.className;
-      /* eslint-disable jsx-a11y/click-events-have-key-events */
-
-      /* eslint-disable jsx-a11y/no-static-element-interactions */
-
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: className,
-        onClick: this.onClick
-      }, this.renderNativeInput(), this.renderCustomInputs());
+      return (
+        /*#__PURE__*/
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+        _react["default"].createElement("div", {
+          className: className,
+          onClick: this.onClick
+        }, this.renderNativeInput(), this.renderCustomInputs())
+      );
     }
@@ -681,4 +685,4 @@ }], [{
       if ( // Toggling calendar visibility resets values
-      nextState.isCalendarOpen // Flag was toggled
-      || datesAreDifferent.apply(void 0, _toConsumableArray(values.map(function (value) {
+      nextState.isCalendarOpen || // Flag was toggled
+      datesAreDifferent.apply(void 0, _toConsumableArray(values.map(function (value) {
         return getDetailValueFrom({
@@ -685,0 +689,0 @@ value: value,

dist/DateInput/Input.js

 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
@@ -5,0 +5,0 @@ Object.defineProperty(exports, "__esModule", {

dist/DatePicker.js

 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
@@ -57,5 +57,5 @@ Object.defineProperty(exports, "__esModule", {
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
@@ -277,2 +277,3 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
       }, /*#__PURE__*/_react["default"].createElement(_DateInput["default"], _extends({}, ariaLabelProps, placeholderProps, {
+        // eslint-disable-next-line jsx-a11y/no-autofocus
         autoFocus: autoFocus,
@@ -329,3 +330,9 @@ className: "".concat(baseClassName, "__inputGroup"),
       return /*#__PURE__*/_react["default"].createElement(_reactFit["default"], null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _mergeClassNames["default"])(className, "".concat(className, "--").concat(isOpen ? 'open' : 'closed'))
+        ref: function ref(_ref) {
+          if (_ref && !isOpen) {
+            _ref.removeAttribute('style');
+          }
+        },
+        className: (0, _mergeClassNames["default"])(className, "".concat(className, "--").concat(isOpen ? 'open' : 'closed')),
+        style: isOpen ? undefined : {}
       }, /*#__PURE__*/_react["default"].createElement(_reactCalendar["default"], _extends({
@@ -355,8 +362,8 @@ className: calendarClassName,
         onFocus: this.onFocus,
-        ref: function ref(_ref) {
-          if (!_ref) {
+        ref: function ref(_ref2) {
+          if (!_ref2) {
             return;
           }
 
-          _this3.wrapper = _ref;
+          _this3.wrapper = _ref2;
         }
@@ -363,0 +370,0 @@ }), this.renderInputs(), this.renderCalendar());

dist/entry.nostyle.d.ts

@@ -1,4 +0,4 @@
-declare module "react-date-picker/dist/entry.nostyle" {
-    import * as picker from "react-date-picker";
-    export = picker;
+declare module 'react-date-picker/dist/entry.nostyle' {
+  import * as picker from 'react-date-picker';
+  export = picker;
 }

dist/shared/dateFormatter.js

@@ -6,4 +6,4 @@ "use strict";
 });
+exports.formatShortMonth = exports.formatMonth = void 0;
 exports.getFormatter = getFormatter;
-exports.formatShortMonth = exports.formatMonth = void 0;
 
@@ -14,5 +14,19 @@ var _getUserLocale = _interopRequireDefault(require("get-user-locale"));
 
+var formatterCache = new Map();
+
 function getFormatter(options) {
   return function (locale, date) {
-    return date.toLocaleString(locale || (0, _getUserLocale["default"])(), options);
+    var localeWithDefault = locale || (0, _getUserLocale["default"])();
+
+    if (!formatterCache.has(localeWithDefault)) {
+      formatterCache.set(localeWithDefault, new Map());
+    }
+
+    var formatterCacheLocale = formatterCache.get(localeWithDefault);
+
+    if (!formatterCacheLocale.has(options)) {
+      formatterCacheLocale.set(options, new Intl.DateTimeFormat(localeWithDefault, options).format);
+    }
+
+    return formatterCacheLocale.get(options)(date);
   };
@@ -19,0 +33,0 @@ }

dist/shared/propTypes.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.isRef = exports.isMaxDate = exports.isMinDate = exports.isValueType = void 0;
+exports.isValueType = exports.isRef = exports.isMinDate = exports.isMaxDate = void 0;
 
@@ -13,3 +13,3 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
@@ -80,3 +80,2 @@ function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 var isRef = _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].shape({
-  // eslint-disable-next-line react/forbid-prop-types
   current: _propTypes["default"].any
@@ -83,0 +82,0 @@ })]);

dist/shared/utils.js

@@ -7,4 +7,4 @@ "use strict";
 exports.between = between;
+exports.safeMax = safeMax;
 exports.safeMin = safeMin;
-exports.safeMax = safeMax;
 
@@ -11,0 +11,0 @@ function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

index.d.ts

@@ -1,4 +0,4 @@
-import { CalendarProps } from "react-calendar";
+import { CalendarProps } from 'react-calendar';
 
-declare module "react-date-picker" {
+declare module 'react-date-picker' {
   export default function DatePicker(props: DatePickerProps): JSX.Element;
@@ -30,5 +30,5 @@
     showLeadingZeros?: boolean;
-    yearAriaLabel?: string
+    yearAriaLabel?: string;
     yearPlaceholder?: string;
   }
 }

package.json

 {
   "name": "react-date-picker",
-  "version": "8.3.6",
+  "version": "8.4.0",
   "description": "A date picker for your React app.",
@@ -16,3 +16,2 @@ "main": "dist/entry.js",
     "jest": "jest",
-    "jest-coverage": "jest --coverage",
     "lint": "eslint sample/ src/ test/ --ext .jsx,.js",
@@ -75,3 +74,3 @@ "prepack": "yarn clean && yarn build",
     "react-calendar": "^3.3.1",
-    "react-fit": "^1.0.3",
+    "react-fit": "^1.4.0",
     "update-input-width": "^1.2.2"
@@ -85,8 +84,10 @@ },
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.0",
-    "babel-eslint": "^10.0.0",
     "enzyme": "^3.10.0",
-    "eslint": "~7.19.0",
-    "eslint-config-wojtekmaj": "^0.5.0",
+    "eslint": "^8.5.0",
+    "eslint-config-wojtekmaj": "^0.6.5",
+    "husky": "^7.0.0",
     "jest": "^27.0.0",
     "less": "^4.0.0",
+    "prettier": "^2.5.0",
+    "pretty-quick": "^3.1.0",
     "react": "^17.0.0",
@@ -97,4 +98,4 @@ "react-dom": "^17.0.0",
   "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0-0",
-    "react-dom": "^16.3.0 || ^17.0.0-0"
+    "react": "^16.3.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0"
   },
@@ -105,7 +106,5 @@ "resolutions": {
   "files": [
-    "LICENSE",
-    "README.md",
-    "index.d.ts",
-    "dist/",
-    "src/"
+    "dist",
+    "src",
+    "index.d.ts"
   ],
@@ -112,0 +111,0 @@ "repository": {

README.md

@@ -7,11 +7,12 @@ [![npm](https://img.shields.io/npm/v/react-date-picker.svg)](https://www.npmjs.com/package/react-date-picker) ![downloads](https://img.shields.io/npm/dt/react-date-picker.svg) [![CI](https://github.com/wojtekmaj/react-date-picker/workflows/CI/badge.svg)](https://github.com/wojtekmaj/react-date-picker/actions) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)
 
-* Pick days, months, years, or even decades
-* Supports virtually any language
-* No moment.js needed
+- Pick days, months, years, or even decades
+- Supports virtually any language
+- No moment.js needed
 
 ## tl;dr
-* Install by executing `npm install react-date-picker` or `yarn add react-date-picker`.
-* Import by adding `import DatePicker from 'react-date-picker'`.
-* Use by adding `<DatePicker />`. Use `onChange` prop for getting new values.
 
+- Install by executing `npm install react-date-picker` or `yarn add react-date-picker`.
+- Import by adding `import DatePicker from 'react-date-picker'`.
+- Use by adding `<DatePicker />`. Use `onChange` prop for getting new values.
+
 ## Demo
@@ -34,5 +35,5 @@
 | React version | Newest compatible React-Date-Picker version |
-|-------|--------|
-| ≥16.3 | latest |
-| ≥16.0 | 7.x    |
+| ------------- | ------------------------------------------- |
+| ≥16.3         | latest                                      |
+| ≥16.0         | 7.x                                         |
 
@@ -62,6 +63,3 @@ [React-Calendar](https://github.com/wojtekmaj/react-calendar), on which React-Date-Picker relies heavily, uses modern web technologies. That's why it's so fast, lightweight and easy to style. This, however, comes at a cost of [supporting only modern browsers](https://caniuse.com/#feat=internationalization).
     <div>
-      <DatePicker
-        onChange={onChange}
-        value={value}
-      />
+      <DatePicker onChange={onChange} value={value} />
     </div>
@@ -86,37 +84,37 @@ );
 
-|Prop name|Description|Default value|Example values|
-|----|----|----|----|
-|autoFocus|Automatically focuses the input on mount.|n/a|`true`|
-|calendarAriaLabel|`aria-label` for the calendar button.|n/a|`"Toggle calendar"`|
-|calendarClassName|Class name(s) that will be added along with `"react-calendar"` to the main React-Calendar `<div>` element.|n/a|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>|
-|calendarIcon|Content of the calendar button. Setting the value explicitly to `null` will hide the icon.|(default icon)|<ul><li>String: `"Calendar"`</li><li>React element: `<CalendarIcon />`</li></ul>|
-|className|Class name(s) that will be added along with `"react-date-picker"` to the main React-Date-Picker `<div>` element.|n/a|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>|
-|clearAriaLabel|`aria-label` for the clear button.|n/a|`"Clear value"`|
-|clearIcon|Content of the clear button. Setting the value explicitly to `null` will hide the icon.|(default icon)|<ul><li>String: `"Clear"`</li><li>React element: `<ClearIcon />`</li></ul>|
-|closeCalendar|Whether to close the calendar on value selection.|`true`|`false`|
-|dayAriaLabel|`aria-label` for the day input.|n/a|`"Day"`|
-|dayPlaceholder|`placeholder` for the day input.|`"--"`|`"dd"`|
-|disabled|Whether the date picker should be disabled.|`false`|`true`|
-|disableCalendar|When set to `true`, will remove the calendar and the button toggling its visibility.|`false`|`true`|
-|format|Input format based on [Unicode Technical Standard #35](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table). Supported values are: `y`, `M`, `MM`, `MMM`, `MMMM`, `d`, `dd`.|n/a|`"y-MM-dd"`|
-|isOpen|Whether the calendar should be opened.|`false`|`true`|
-|locale|Locale that should be used by the date picker and the calendar. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag).|User's browser settings|`"hu-HU"`|
-|maxDate|Maximum date that the user can select. Periods partially overlapped by maxDate will also be selectable, although React-Date-Picker will ensure that no later date is selected.|n/a|Date: `new Date()`|
-|maxDetail|The most detailed calendar view that the user shall see. View defined here also becomes the one on which clicking an item in the calendar will select a date and pass it to onChange. Can be `"month"`, `"year"`, `"decade"` or `"century"`.|`"month"`|`"year"`|
-|minDate|Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-Date-Picker will ensure that no earlier date is selected.|n/a|Date: `new Date()`|
-|minDetail|The least detailed calendar view that the user shall see. Can be `"month"`, `"year"`, `"decade"` or `"century"`.|`"century"`|`"decade"`|
-|monthAriaLabel|`aria-label` for the month input.|n/a|`"Month"`|
-|monthPlaceholder|`placeholder` for the month input.|`"--"`|`"mm"`|
-|name|Input name.|`"date"`|`"myCustomName"`|
-|nativeInputAriaLabel|`aria-label` for the native date input.|n/a|`"Date"`|
-|onCalendarClose|Function called when the calendar closes.|n/a|`() => alert('Calendar closed')`|
-|onCalendarOpen|Function called when the calendar opens.|n/a|`() => alert('Calendar opened')`|
-|onChange|Function called when the user clicks an item on the most detailed view available.|n/a|`(value) => alert('New date is: ', value)`|
-|openCalendarOnFocus|Whether to open the calendar on input focus.|`true`|`false`|
-|required|Whether date input should be required.|`false`|`true`|
-|returnValue|Which dates shall be passed by the calendar to the onChange function and onClick{Period} functions. Can be `"start"`, `"end"` or `"range"`. The latter will cause an array with start and end values to be passed.|`"start"`|`"range"`|
-|showLeadingZeros|Whether leading zeros should be rendered in date inputs.|`false`|`true`|
-|value|Input value.|n/a|<ul><li>Date: `new Date()`</li><li>An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`</li></ul>|
-|yearAriaLabel|`aria-label` for the year input.|n/a|`"Year"`|
-|yearPlaceholder|`aria-label` for the year input.|`"----"`|`"yyyy"`|
+| Prop name            | Description                                                                                                                                                                                                                                  | Default value           | Example values                                                                                                 |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------- |
+| autoFocus            | Automatically focuses the input on mount.                                                                                                                                                                                                    | n/a                     | `true`                                                                                                         |
+| calendarAriaLabel    | `aria-label` for the calendar button.                                                                                                                                                                                                        | n/a                     | `"Toggle calendar"`                                                                                            |
+| calendarClassName    | Class name(s) that will be added along with `"react-calendar"` to the main React-Calendar `<div>` element.                                                                                                                                   | n/a                     | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>            |
+| calendarIcon         | Content of the calendar button. Setting the value explicitly to `null` will hide the icon.                                                                                                                                                   | (default icon)          | <ul><li>String: `"Calendar"`</li><li>React element: `<CalendarIcon />`</li></ul>                               |
+| className            | Class name(s) that will be added along with `"react-date-picker"` to the main React-Date-Picker `<div>` element.                                                                                                                             | n/a                     | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>            |
+| clearAriaLabel       | `aria-label` for the clear button.                                                                                                                                                                                                           | n/a                     | `"Clear value"`                                                                                                |
+| clearIcon            | Content of the clear button. Setting the value explicitly to `null` will hide the icon.                                                                                                                                                      | (default icon)          | <ul><li>String: `"Clear"`</li><li>React element: `<ClearIcon />`</li></ul>                                     |
+| closeCalendar        | Whether to close the calendar on value selection.                                                                                                                                                                                            | `true`                  | `false`                                                                                                        |
+| dayAriaLabel         | `aria-label` for the day input.                                                                                                                                                                                                              | n/a                     | `"Day"`                                                                                                        |
+| dayPlaceholder       | `placeholder` for the day input.                                                                                                                                                                                                             | `"--"`                  | `"dd"`                                                                                                         |
+| disabled             | Whether the date picker should be disabled.                                                                                                                                                                                                  | `false`                 | `true`                                                                                                         |
+| disableCalendar      | When set to `true`, will remove the calendar and the button toggling its visibility.                                                                                                                                                         | `false`                 | `true`                                                                                                         |
+| format               | Input format based on [Unicode Technical Standard #35](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table). Supported values are: `y`, `M`, `MM`, `MMM`, `MMMM`, `d`, `dd`.                                        | n/a                     | `"y-MM-dd"`                                                                                                    |
+| isOpen               | Whether the calendar should be opened.                                                                                                                                                                                                       | `false`                 | `true`                                                                                                         |
+| locale               | Locale that should be used by the date picker and the calendar. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag).                                                                                             | User's browser settings | `"hu-HU"`                                                                                                      |
+| maxDate              | Maximum date that the user can select. Periods partially overlapped by maxDate will also be selectable, although React-Date-Picker will ensure that no later date is selected.                                                               | n/a                     | Date: `new Date()`                                                                                             |
+| maxDetail            | The most detailed calendar view that the user shall see. View defined here also becomes the one on which clicking an item in the calendar will select a date and pass it to onChange. Can be `"month"`, `"year"`, `"decade"` or `"century"`. | `"month"`               | `"year"`                                                                                                       |
+| minDate              | Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-Date-Picker will ensure that no earlier date is selected.                                                             | n/a                     | Date: `new Date()`                                                                                             |
+| minDetail            | The least detailed calendar view that the user shall see. Can be `"month"`, `"year"`, `"decade"` or `"century"`.                                                                                                                             | `"century"`             | `"decade"`                                                                                                     |
+| monthAriaLabel       | `aria-label` for the month input.                                                                                                                                                                                                            | n/a                     | `"Month"`                                                                                                      |
+| monthPlaceholder     | `placeholder` for the month input.                                                                                                                                                                                                           | `"--"`                  | `"mm"`                                                                                                         |
+| name                 | Input name.                                                                                                                                                                                                                                  | `"date"`                | `"myCustomName"`                                                                                               |
+| nativeInputAriaLabel | `aria-label` for the native date input.                                                                                                                                                                                                      | n/a                     | `"Date"`                                                                                                       |
+| onCalendarClose      | Function called when the calendar closes.                                                                                                                                                                                                    | n/a                     | `() => alert('Calendar closed')`                                                                               |
+| onCalendarOpen       | Function called when the calendar opens.                                                                                                                                                                                                     | n/a                     | `() => alert('Calendar opened')`                                                                               |
+| onChange             | Function called when the user picks a valid date. If any of the fields were excluded using custom `format`, `new Date(y, 0, 1, 0, 0, 0)`, where `y` is the current year, is going to serve as a "base".                                      | n/a                     | `(value) => alert('New date is: ', value)`                                                                     |
+| openCalendarOnFocus  | Whether to open the calendar on input focus.                                                                                                                                                                                                 | `true`                  | `false`                                                                                                        |
+| required             | Whether date input should be required.                                                                                                                                                                                                       | `false`                 | `true`                                                                                                         |
+| returnValue          | Which dates shall be passed by the calendar to the onChange function and onClick{Period} functions. Can be `"start"`, `"end"` or `"range"`. The latter will cause an array with start and end values to be passed.                           | `"start"`               | `"range"`                                                                                                      |
+| showLeadingZeros     | Whether leading zeros should be rendered in date inputs.                                                                                                                                                                                     | `false`                 | `true`                                                                                                         |
+| value                | Input value.                                                                                                                                                                                                                                 | n/a                     | <ul><li>Date: `new Date()`</li><li>An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`</li></ul> |
+| yearAriaLabel        | `aria-label` for the year input.                                                                                                                                                                                                             | n/a                     | `"Year"`                                                                                                       |
+| yearPlaceholder      | `aria-label` for the year input.                                                                                                                                                                                                             | `"----"`                | `"yyyy"`                                                                                                       |
 
@@ -123,0 +121,0 @@ ### Calendar

src/DateInput.jsx

@@ -13,6 +13,3 @@ import React, { createRef, PureComponent } from 'react';
 import { getFormatter } from './shared/dateFormatter';
-import {
-  getBegin,
-  getEnd,
-} from './shared/dates';
+import { getBegin, getEnd } from './shared/dates';
 import { isMaxDate, isMinDate } from './shared/propTypes';
@@ -38,5 +35,5 @@ import { between } from './shared/utils';
   return (
-    (date1 && !date2)
-    || (!date1 && date2)
-    || (date1 && date2 && date1.getTime() !== date2.getTime())
+    (date1 && !date2) ||
+    (!date1 && date2) ||
+    (date1 && date2 && date1.getTime() !== date2.getTime())
   );
@@ -72,5 +69,3 @@ }
 
-function getDetailValue({
-  value, minDate, maxDate, maxDetail,
-}, index) {
+function getDetailValue({ value, minDate, maxDate, maxDetail }, index) {
   const valuePiece = getValue(value, index);
@@ -123,35 +118,35 @@
   const pattern = new RegExp(
-    Object.keys(elementFunctions).map((el) => `${el}+`).join('|'), 'g',
+    Object.keys(elementFunctions)
+      .map((el) => `${el}+`)
+      .join('|'),
+    'g',
   );
   const matches = placeholder.match(pattern);
 
-  return placeholder.split(pattern)
-    .reduce((arr, element, index) => {
-      const divider = element && (
-        // eslint-disable-next-line react/no-array-index-key
-        <Divider key={`separator_${index}`}>
-          {element}
-        </Divider>
-      );
-      const res = [...arr, divider];
-      const currentMatch = matches && matches[index];
+  return placeholder.split(pattern).reduce((arr, element, index) => {
+    const divider = element && (
+      // eslint-disable-next-line react/no-array-index-key
+      <Divider key={`separator_${index}`}>{element}</Divider>
+    );
+    const res = [...arr, divider];
+    const currentMatch = matches && matches[index];
 
-      if (currentMatch) {
-        const renderFunction = (
-          elementFunctions[currentMatch]
-          || elementFunctions[
-            Object.keys(elementFunctions)
-              .find((elementFunction) => currentMatch.match(elementFunction))
-          ]
-        );
+    if (currentMatch) {
+      const renderFunction =
+        elementFunctions[currentMatch] ||
+        elementFunctions[
+          Object.keys(elementFunctions).find((elementFunction) =>
+            currentMatch.match(elementFunction),
+          )
+        ];
 
-        if (!allowMultipleInstances && usedFunctions.includes(renderFunction)) {
-          res.push(currentMatch);
-        } else {
-          res.push(renderFunction(currentMatch, index));
-          usedFunctions.push(renderFunction);
-        }
+      if (!allowMultipleInstances && usedFunctions.includes(renderFunction)) {
+        res.push(currentMatch);
+      } else {
+        res.push(renderFunction(currentMatch, index));
+        usedFunctions.push(renderFunction);
       }
-      return res;
-    }, []);
+    }
+    return res;
+  }, []);
 }
@@ -161,5 +156,3 @@
   static getDerivedStateFromProps(nextProps, prevState) {
-    const {
-      minDate, maxDate, maxDetail,
-    } = nextProps;
+    const { minDate, maxDate, maxDetail } = nextProps;
 
@@ -182,3 +175,6 @@ const nextState = {};
     const nextValue = getDetailValueFrom({
-      value: nextProps.value, minDate, maxDate, maxDetail,
+      value: nextProps.value,
+      minDate,
+      maxDate,
+      maxDetail,
     });
@@ -188,13 +184,23 @@ const values = [nextValue, prevState.value];
       // Toggling calendar visibility resets values
-      nextState.isCalendarOpen // Flag was toggled
-      || datesAreDifferent(
-        ...values.map((value) => getDetailValueFrom({
-          value, minDate, maxDate, maxDetail,
-        })),
+      nextState.isCalendarOpen || // Flag was toggled
+      datesAreDifferent(
+        ...values.map((value) =>
+          getDetailValueFrom({
+            value,
+            minDate,
+            maxDate,
+            maxDetail,
+          }),
+        ),
+      ) ||
+      datesAreDifferent(
+        ...values.map((value) =>
+          getDetailValueTo({
+            value,
+            minDate,
+            maxDate,
+            maxDetail,
+          }),
+        ),
       )
-      || datesAreDifferent(
-        ...values.map((value) => getDetailValueTo({
-          value, minDate, maxDate, maxDetail,
-        })),
-      )
     ) {
@@ -247,12 +253,14 @@ if (nextValue) {
   getProcessedValue(value) {
-    const {
-      minDate, maxDate, maxDetail, returnValue,
-    } = this.props;
+    const { minDate, maxDate, maxDetail, returnValue } = this.props;
 
     const processFunction = (() => {
       switch (returnValue) {
-        case 'start': return getDetailValueFrom;
-        case 'end': return getDetailValueTo;
-        case 'range': return getDetailValueArray;
-        default: throw new Error('Invalid returnValue.');
+        case 'start':
+          return getDetailValueFrom;
+        case 'end':
+          return getDetailValueTo;
+        case 'range':
+          return getDetailValueArray;
+        default:
+          throw new Error('Invalid returnValue.');
       }
@@ -262,3 +270,6 @@ })();
     return processFunction({
-      value, minDate, maxDate, maxDetail,
+      value,
+      minDate,
+      maxDate,
+      maxDetail,
     });
@@ -290,3 +301,5 @@ }
     function formatDatePiece(name, dateToFormat) {
-      return getFormatter({ useGrouping: false, [name]: 'numeric' })(locale, dateToFormat).match(/\d{1,}/);
+      return getFormatter({ useGrouping: false, [name]: 'numeric' })(locale, dateToFormat).match(
+        /\d{1,}/,
+      );
     }
@@ -307,10 +320,3 @@
   get commonInputProps() {
-    const {
-      className,
-      disabled,
-      isCalendarOpen,
-      maxDate,
-      minDate,
-      required,
-    } = this.props;
+    const { className, disabled, isCalendarOpen, maxDate, minDate, required } = this.props;
 
@@ -342,3 +348,3 @@ return {
     }
-  }
+  };
 
@@ -353,3 +359,4 @@ onKeyDown = (event) => {
         const { target: input } = event;
-        const property = event.key === 'ArrowLeft' ? 'previousElementSibling' : 'nextElementSibling';
+        const property =
+          event.key === 'ArrowLeft' ? 'previousElementSibling' : 'nextElementSibling';
         const nextInput = findInput(input, property);
@@ -361,3 +368,3 @@ focus(nextInput);
     }
-  }
+  };
 
@@ -382,3 +389,3 @@ onKeyUp = (event) => {
      */
-    if ((value * 10 > max) || (value.length >= max.length)) {
+    if (value * 10 > max || value.length >= max.length) {
       const property = 'nextElementSibling';
@@ -388,3 +395,3 @@ const nextInput = findInput(input, property);
     }
-  }
+  };
 
@@ -397,7 +404,4 @@ /**
 
-    this.setState(
-      { [name]: value },
-      this.onChangeExternal,
-    );
-  }
+    this.setState({ [name]: value }, this.onChangeExternal);
+  };
 
@@ -433,3 +437,3 @@ /**
     onChange(processedValue, false);
-  }
+  };
 
@@ -463,4 +467,4 @@ /**
     ) {
-      const year = parseInt(values.year, 10);
-      const monthIndex = parseInt(values.month, 10) - 1 || 0;
+      const year = parseInt(values.year, 10) || new Date().getFullYear();
+      const monthIndex = parseInt(values.month || 1, 10) - 1;
       const day = parseInt(values.day || 1, 10);
@@ -471,14 +475,10 @@
       proposedValue.setHours(0, 0, 0, 0);
+
       const processedValue = this.getProcessedValue(proposedValue);
       onChange(processedValue, false);
     }
-  }
+  };
 
   renderDay = (currentMatch, index) => {
-    const {
-      autoFocus,
-      dayAriaLabel,
-      dayPlaceholder,
-      showLeadingZeros,
-    } = this.props;
+    const { autoFocus, dayAriaLabel, dayPlaceholder, showLeadingZeros } = this.props;
     const { day, month, year } = this.state;
@@ -497,2 +497,3 @@
         ariaLabel={dayAriaLabel}
+        // eslint-disable-next-line jsx-a11y/no-autofocus
         autoFocus={index === 0 && autoFocus}
@@ -507,12 +508,6 @@ inputRef={this.dayInput}
     );
-  }
+  };
 
   renderMonth = (currentMatch, index) => {
-    const {
-      autoFocus,
-      locale,
-      monthAriaLabel,
-      monthPlaceholder,
-      showLeadingZeros,
-    } = this.props;
+    const { autoFocus, locale, monthAriaLabel, monthPlaceholder, showLeadingZeros } = this.props;
     const { month, year } = this.state;
@@ -530,2 +525,3 @@
           ariaLabel={monthAriaLabel}
+          // eslint-disable-next-line jsx-a11y/no-autofocus
           autoFocus={index === 0 && autoFocus}
@@ -549,2 +545,3 @@ inputRef={this.monthInput}
         ariaLabel={monthAriaLabel}
+        // eslint-disable-next-line jsx-a11y/no-autofocus
         autoFocus={index === 0 && autoFocus}
@@ -558,3 +555,3 @@ inputRef={this.monthInput}
     );
-  }
+  };
 
@@ -570,2 +567,3 @@ renderYear = (currentMatch, index) => {
         ariaLabel={yearAriaLabel}
+        // eslint-disable-next-line jsx-a11y/no-autofocus
         autoFocus={index === 0 && autoFocus}
@@ -578,3 +576,3 @@ inputRef={this.yearInput}
     );
-  }
+  };
 
@@ -596,10 +594,3 @@ renderCustomInputs() {
   renderNativeInput() {
-    const {
-      disabled,
-      maxDate,
-      minDate,
-      name,
-      nativeInputAriaLabel,
-      required,
-    } = this.props;
+    const { disabled, maxDate, minDate, name, nativeInputAriaLabel, required } = this.props;
     const { value } = this.state;
@@ -626,9 +617,5 @@
 
-    /* eslint-disable jsx-a11y/click-events-have-key-events */
-    /* eslint-disable jsx-a11y/no-static-element-interactions */
     return (
-      <div
-        className={className}
-        onClick={this.onClick}
-      >
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+      <div className={className} onClick={this.onClick}>
         {this.renderNativeInput()}
@@ -647,6 +634,3 @@ {this.renderCustomInputs()}
 
-const isValue = PropTypes.oneOfType([
-  PropTypes.string,
-  PropTypes.instanceOf(Date),
-]);
+const isValue = PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]);
 
@@ -673,8 +657,5 @@ DateInput.propTypes = {
   showLeadingZeros: PropTypes.bool,
-  value: PropTypes.oneOfType([
-    isValue,
-    PropTypes.arrayOf(isValue),
-  ]),
+  value: PropTypes.oneOfType([isValue, PropTypes.arrayOf(isValue)]),
   yearAriaLabel: PropTypes.string,
   yearPlaceholder: PropTypes.string,
 };

src/DateInput.spec.jsx

@@ -55,5 +55,3 @@ import React from 'react';
   it('renders a native input and custom inputs', () => {
-    const component = mount(
-      <DateInput {...defaultProps} />,
-    );
+    const component = mount(<DateInput {...defaultProps} />);
 
@@ -68,8 +66,3 @@ const nativeInput = component.find('input[type="date"]');
   it('does not render day input when maxDetail is "year" or less', () => {
-    const component = mount(
-      <DateInput
-        {...defaultProps}
-        maxDetail="year"
-      />,
-    );
+    const component = mount(<DateInput {...defaultProps} maxDetail="year" />);
 
@@ -88,8 +81,3 @@ const customInputs = component.find('input[data-input]');
   it('does not render day and month inputs when maxDetail is "decade" or less', () => {
-    const component = mount(
-      <DateInput
-        {...defaultProps}
-        maxDetail="decade"
-      />,
-    );
+    const component = mount(<DateInput {...defaultProps} maxDetail="decade" />);
 
@@ -110,8 +98,3 @@ const customInputs = component.find('input[data-input]');
 
-    const component = mount(
-      <DateInput
-        {...defaultProps}
-        value={date}
-      />,
-    );
+    const component = mount(<DateInput {...defaultProps} value={date} />);
 
@@ -130,8 +113,3 @@ const nativeInput = component.find('input[type="date"]');
 
-    const component = mount(
-      <DateInput
-        {...defaultProps}
-        value={date}
-      />,
-    );
+    const component = mount(<DateInput {...defaultProps} value={date} />);
 
@@ -150,8 +128,3 @@ const nativeInput = component.find('input[type="date"]');
 
-    const component = mount(
-      <DateInput
-        {...defaultProps}
-        value={date}
-      />,
-    );
+    const component = mount(<DateInput {...defaultProps} value={date} />);
 
@@ -170,9 +143,3 @@ const nativeInput = component.find('input[type="date"]');
 
-    const component = mount(
-      <DateInput
-        {...defaultProps}
-        locale="de-DE"
-        value={date}
-      />,
-    );
+    const component = mount(<DateInput {...defaultProps} locale="de-DE" value={date} />);
 
@@ -188,49 +155,38 @@ const nativeInput = component.find('input[type="date"]');
 
-  itIfFullICU('shows a given date in all inputs correctly given array of Date objects (24-hour format)', () => {
-    const date = [new Date(2017, 8, 30), new Date(2017, 8, 31, 0, 0, 0, -1)];
+  itIfFullICU(
+    'shows a given date in all inputs correctly given array of Date objects (24-hour format)',
+    () => {
+      const date = [new Date(2017, 8, 30), new Date(2017, 8, 31, 0, 0, 0, -1)];
 
-    const component = mount(
-      <DateInput
-        {...defaultProps}
-        locale="de-DE"
-        value={date}
-      />,
-    );
+      const component = mount(<DateInput {...defaultProps} locale="de-DE" value={date} />);
 
-    const nativeInput = component.find('input[type="date"]');
-    const customInputs = component.find('input[data-input]');
+      const nativeInput = component.find('input[type="date"]');
+      const customInputs = component.find('input[data-input]');
 
-    expect(nativeInput.prop('value')).toBe('2017-09-30');
-    expect(customInputs.at(0).prop('value')).toBe('2017');
-    expect(customInputs.at(1).prop('value')).toBe('9');
-    expect(customInputs.at(2).prop('value')).toBe('30');
-  });
+      expect(nativeInput.prop('value')).toBe('2017-09-30');
+      expect(customInputs.at(0).prop('value')).toBe('2017');
+      expect(customInputs.at(1).prop('value')).toBe('9');
+      expect(customInputs.at(2).prop('value')).toBe('30');
+    },
+  );
 
-  itIfFullICU('shows a given date in all inputs correctly given ISO string (24-hour format)', () => {
-    const date = '2017-09-30T00:00:00.000';
+  itIfFullICU(
+    'shows a given date in all inputs correctly given ISO string (24-hour format)',
+    () => {
+      const date = '2017-09-30T00:00:00.000';
 
-    const component = mount(
-      <DateInput
-        {...defaultProps}
-        locale="de-DE"
-        value={date}
-      />,
-    );
+      const component = mount(<DateInput {...defaultProps} locale="de-DE" value={date} />);
 
-    const nativeInput = component.find('input[type="date"]');
-    const customInputs = component.find('input[data-input]');
+      const nativeInput = component.find('input[type="date"]');
+      const customInputs = component.find('input[data-input]');
 
-    expect(nativeInput.prop('value')).toBe('2017-09-30');
-    expect(customInputs.at(0).prop('value')).toBe('2017');
-    expect(customInputs.at(1).prop('value')).toBe('9');
-    expect(customInputs.at(2).prop('value')).toBe('30');
-  });
+      expect(nativeInput.prop('value')).toBe('2017-09-30');
+      expect(customInputs.at(0).prop('value')).toBe('2017');
+      expect(customInputs.at(1).prop('value')).toBe('9');
+      expect(customInputs.at(2).prop('value')).toBe('30');
+    },
+  );
 
   it('shows empty value in all inputs correctly given null', () => {
-    const component = mount(
-      <DateInput
-        {...defaultProps}
-        value={null}
-      />,
-    );
+    const component = mount(<DateInput {...defaultProps} value={null} />);
 
@@ -247,8 +203,3 @@ const nativeInput = component.find('input[type="date"]');
   it('shows empty value in all inputs correctly given an array of nulls', () => {
-    const component = mount(
-      <DateInput
-        {...defaultProps}
-        value={[null, null]}
-      />,
-    );
+    const component = mount(<DateInput {...defaultProps} value={[null, null]} />);
 
@@ -267,8 +218,3 @@ const nativeInput = component.find('input[type="date"]');
 
-    const component = mount(
-      <DateInput
-        {...defaultProps}
-        value={date}
-      />,
-    );
+    const component = mount(<DateInput {...defaultProps} value={date} />);
 
@@ -287,5 +233,3 @@ component.setProps({ value: null });
   it('renders custom inputs in a proper order (12-hour format)', () => {
-    const component = mount(
-      <DateInput {...defaultProps} />,
-    );
+    const component = mount(<DateInput {...defaultProps} />);
 
@@ -300,8 +244,3 @@ const customInputs = component.find('input[data-input]');
   itIfFullICU('renders custom inputs in a proper order (24-hour format)', () => {
-    const component = mount(
-      <DateInput
-        {...defaultProps}
-        locale="de-DE"
-      />,
-    );
+    const component = mount(<DateInput {...defaultProps} locale="de-DE" />);
 
@@ -317,8 +256,3 @@ const customInputs = component.find('input[data-input]');
     it('renders "y" properly', () => {
-      const component = mount(
-        <DateInput
-          {...defaultProps}
-          format="y"
-        />,
-      );
+      const component = mount(<DateInput {...defaultProps} format="y" />);
 
@@ -333,8 +267,3 @@ const componentInput = component.find('YearInput');
     it('renders "yyyy" properly', () => {
-      const component = mount(
-        <DateInput
-          {...defaultProps}
-          format="yyyy"
-        />,
-      );
+      const component = mount(<DateInput {...defaultProps} format="yyyy" />);
 
@@ -349,8 +278,3 @@ const componentInput = component.find('YearInput');
     it('renders "M" properly', () => {
-      const component = mount(
-        <DateInput
-          {...defaultProps}
-          format="M"
-        />,
-      );
+      const component = mount(<DateInput {...defaultProps} format="M" />);
 
@@ -365,8 +289,3 @@ const componentInput = component.find('MonthInput');
     it('renders "MM" properly', () => {
-      const component = mount(
-        <DateInput
-          {...defaultProps}
-          format="MM"
-        />,
-      );
+      const component = mount(<DateInput {...defaultProps} format="MM" />);
 
@@ -382,8 +301,3 @@ const componentInput = component.find('MonthInput');
     it('renders "MMM" properly', () => {
-      const component = mount(
-        <DateInput
-          {...defaultProps}
-          format="MMM"
-        />,
-      );
+      const component = mount(<DateInput {...defaultProps} format="MMM" />);
 
@@ -399,8 +313,3 @@ const componentSelect = component.find('MonthSelect');
     it('renders "MMMM" properly', () => {
-      const component = mount(
-        <DateInput
-          {...defaultProps}
-          format="MMMM"
-        />,
-      );
+      const component = mount(<DateInput {...defaultProps} format="MMMM" />);
 
@@ -416,8 +325,3 @@ const componentSelect = component.find('MonthSelect');
     it('renders "d" properly', () => {
-      const component = mount(
-        <DateInput
-          {...defaultProps}
-          format="d"
-        />,
-      );
+      const component = mount(<DateInput {...defaultProps} format="d" />);
 
@@ -432,8 +336,3 @@ const componentInput = component.find('DayInput');
     it('renders "dd" properly', () => {
-      const component = mount(
-        <DateInput
-          {...defaultProps}
-          format="dd"
-        />,
-      );
+      const component = mount(<DateInput {...defaultProps} format="dd" />);
 
@@ -451,8 +350,3 @@ const componentInput = component.find('DayInput');
 
-      const renderComponent = () => mount(
-        <DateInput
-          {...defaultProps}
-          format="ddd"
-        />,
-      );
+      const renderComponent = () => mount(<DateInput {...defaultProps} format="ddd" />);
 
@@ -465,8 +359,3 @@ expect(renderComponent).toThrow('Unsupported token: ddd');
     it('renders "yyyy-MM-dd" properly', () => {
-      const component = mount(
-        <DateInput
-          {...defaultProps}
-          format="yyyy-MM-d"
-        />,
-      );
+      const component = mount(<DateInput {...defaultProps} format="yyyy-MM-d" />);
 
@@ -489,5 +378,3 @@ const monthInput = component.find('MonthInput');
   it('renders proper input separators', () => {
-    const component = mount(
-      <DateInput {...defaultProps} />,
-    );
+    const component = mount(<DateInput {...defaultProps} />);
 
@@ -501,8 +388,3 @@ const separators = component.find('.react-date-picker__inputGroup__divider');
   it('renders proper amount of separators', () => {
-    const component = mount(
-      <DateInput
-        {...defaultProps}
-        maxDetail="year"
-      />,
-    );
+    const component = mount(<DateInput {...defaultProps} maxDetail="year" />);
 
@@ -516,6 +398,3 @@ const separators = component.find('.react-date-picker__inputGroup__divider');
   it('jumps to the next field when right arrow is pressed', () => {
-    const component = mount(
-      <DateInput {...defaultProps} />,
-      { attachTo: container },
-    );
+    const component = mount(<DateInput {...defaultProps} />, { attachTo: container });
 
@@ -536,6 +415,3 @@ const customInputs = component.find('input[data-input]');
   it('jumps to the next field when separator key is pressed', () => {
-    const component = mount(
-      <DateInput {...defaultProps} />,
-      { attachTo: container },
-    );
+    const component = mount(<DateInput {...defaultProps} />, { attachTo: container });
 
@@ -558,6 +434,3 @@ const customInputs = component.find('input[data-input]');
   it('does not jump to the next field when right arrow is pressed when the last input is focused', () => {
-    const component = mount(
-      <DateInput {...defaultProps} />,
-      { attachTo: container },
-    );
+    const component = mount(<DateInput {...defaultProps} />, { attachTo: container });
 
@@ -577,6 +450,3 @@ const customInputs = component.find('input[data-input]');
   it('jumps to the previous field when left arrow is pressed', () => {
-    const component = mount(
-      <DateInput {...defaultProps} />,
-      { attachTo: container },
-    );
+    const component = mount(<DateInput {...defaultProps} />, { attachTo: container });
 
@@ -597,6 +467,3 @@ const customInputs = component.find('input[data-input]');
   it('does not jump to the previous field when left arrow is pressed when the first input is focused', () => {
-    const component = mount(
-      <DateInput {...defaultProps} />,
-      { attachTo: container },
-    );
+    const component = mount(<DateInput {...defaultProps} />, { attachTo: container });
 
@@ -615,7 +482,4 @@ const customInputs = component.find('input[data-input]');
 
-  it('jumps to the next field when a value which can\'t be extended to another valid value is entered', () => {
-    const component = mount(
-      <DateInput {...defaultProps} />,
-      { attachTo: container },
-    );
+  it("jumps to the next field when a value which can't be extended to another valid value is entered", () => {
+    const component = mount(<DateInput {...defaultProps} />, { attachTo: container });
 
@@ -635,6 +499,3 @@ const customInputs = component.find('input[data-input]');
   it('jumps to the next field when a value as long as the length of maximum value is entered', () => {
-    const component = mount(
-      <DateInput {...defaultProps} />,
-      { attachTo: container },
-    );
+    const component = mount(<DateInput {...defaultProps} />, { attachTo: container });
 
@@ -654,6 +515,3 @@ const customInputs = component.find('input[data-input]');
   it('does not jump the next field when a value which can be extended to another valid value is entered', () => {
-    const component = mount(
-      <DateInput {...defaultProps} />,
-      { attachTo: container },
-    );
+    const component = mount(<DateInput {...defaultProps} />, { attachTo: container });
 
@@ -675,9 +533,3 @@ const customInputs = component.find('input[data-input]');
 
-    const component = mount(
-      <DateInput
-        {...defaultProps}
-        onChange={onChange}
-        value={date}
-      />,
-    );
+    const component = mount(<DateInput {...defaultProps} onChange={onChange} value={date} />);
 
@@ -700,9 +552,3 @@ const customInputs = component.find('input[data-input]');
 
-    const component = mount(
-      <DateInput
-        {...defaultProps}
-        onChange={onChange}
-        value={date}
-      />,
-    );
+    const component = mount(<DateInput {...defaultProps} onChange={onChange} value={date} />);
 
@@ -723,3 +569,3 @@ const customInputs = component.find('input[data-input]');
 
-  it('triggers onChange correctly when cleared custom inputs', () => {
+  it('triggers onChange correctly when changed custom input with no year', () => {
     const onChange = jest.fn();
@@ -729,13 +575,27 @@ const date = new Date(2017, 8, 30);
     const component = mount(
-      <DateInput
-        {...defaultProps}
-        onChange={onChange}
-        value={date}
-      />,
+      <DateInput {...defaultProps} format="dd.MM" onChange={onChange} value={date} />,
     );
 
     const customInputs = component.find('input[data-input]');
+    const dayInput = customInputs.at(0);
 
+    dayInput.getDOMNode().value = '20';
+    dayInput.simulate('change');
+
+    const currentYear = new Date().getFullYear();
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith(new Date(currentYear, 8, 20), false);
+  });
+
+  it('triggers onChange correctly when cleared custom inputs', () => {
+    const onChange = jest.fn();
+    const date = new Date(2017, 8, 30);
+
+    const component = mount(<DateInput {...defaultProps} onChange={onChange} value={date} />);
+
+    const customInputs = component.find('input[data-input]');
+
     customInputs.forEach((customInput) => {
-      customInput.getDOMNode().value = ''; // eslint-disable-line no-param-reassign
+      customInput.getDOMNode().value = '';
       customInput.simulate('change');
@@ -752,9 +612,3 @@ });
 
-    const component = mount(
-      <DateInput
-        {...defaultProps}
-        onChange={onChange}
-        value={date}
-      />,
-    );
+    const component = mount(<DateInput {...defaultProps} onChange={onChange} value={date} />);
 
@@ -774,9 +628,3 @@ const nativeInput = component.find('input[type="date"]');
 
-    const component = mount(
-      <DateInput
-        {...defaultProps}
-        onChange={onChange}
-        value={date}
-      />,
-    );
+    const component = mount(<DateInput {...defaultProps} onChange={onChange} value={date} />);
 
@@ -800,9 +648,3 @@ const nativeInput = component.find('input[type="date"]');
 
-    const component = mount(
-      <DateInput
-        {...defaultProps}
-        onChange={onChange}
-        value={date}
-      />,
-    );
+    const component = mount(<DateInput {...defaultProps} onChange={onChange} value={date} />);
 
@@ -809,0 +651,0 @@ const nativeInput = component.find('input[type="date"]');

src/DateInput/DayInput.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  getYear,
-  getMonthHuman,
-  getDate,
-  getDaysInMonth,
-} from '@wojtekmaj/date-utils';
+import { getYear, getMonthHuman, getDate, getDaysInMonth } from '@wojtekmaj/date-utils';
 
@@ -15,9 +10,3 @@ import Input from './Input';
 
-export default function DayInput({
-  maxDate,
-  minDate,
-  month,
-  year,
-  ...otherProps
-}) {
+export default function DayInput({ maxDate, minDate, month, year, ...otherProps }) {
   const currentMonthMaxDays = (() => {
@@ -38,10 +27,3 @@ if (!month) {
 
-  return (
-    <Input
-      max={maxDay}
-      min={minDay}
-      name="day"
-      {...otherProps}
-    />
-  );
+  return <Input max={maxDay} min={minDay} name="day" {...otherProps} />;
 }
@@ -48,0 +30,0 @@

src/DateInput/DayInput.spec.jsx

@@ -13,5 +13,3 @@ import React from 'react';
   it('renders an input', () => {
-    const component = mount(
-      <DayInput {...defaultProps} />,
-    );
+    const component = mount(<DayInput {...defaultProps} />);
 
@@ -24,9 +22,3 @@ const input = component.find('input');
   it('renders "0" given showLeadingZeros if day is <10', () => {
-    const component = mount(
-      <DayInput
-        {...defaultProps}
-        showLeadingZeros
-        value="9"
-      />,
-    );
+    const component = mount(<DayInput {...defaultProps} showLeadingZeros value="9" />);
 
@@ -40,9 +32,3 @@ const input = component.find('input');
   it('does not render "0" given showLeadingZeros if day is <10 with leading zero already', () => {
-    const component = mount(
-      <DayInput
-        {...defaultProps}
-        showLeadingZeros
-        value="09"
-      />,
-    );
+    const component = mount(<DayInput {...defaultProps} showLeadingZeros value="09" />);
 
@@ -52,13 +38,9 @@ const input = component.find('input');
     expect(component.text()).not.toContain('0');
-    expect(input.prop('className')).not.toContain(`${defaultProps.className}__input--hasLeadingZero`);
+    expect(input.prop('className')).not.toContain(
+      `${defaultProps.className}__input--hasLeadingZero`,
+    );
   });
 
   it('does not render "0" given showLeadingZeros if day is >=10', () => {
-    const component = mount(
-      <DayInput
-        {...defaultProps}
-        showLeadingZeros
-        value="10"
-      />,
-    );
+    const component = mount(<DayInput {...defaultProps} showLeadingZeros value="10" />);
 
@@ -68,12 +50,9 @@ const input = component.find('input');
     expect(component.text()).not.toContain('0');
-    expect(input.prop('className')).not.toContain(`${defaultProps.className}__input--hasLeadingZero`);
+    expect(input.prop('className')).not.toContain(
+      `${defaultProps.className}__input--hasLeadingZero`,
+    );
   });
 
   it('does not render "0" if not given showLeadingZeros', () => {
-    const component = mount(
-      <DayInput
-        {...defaultProps}
-        value="9"
-      />,
-    );
+    const component = mount(<DayInput {...defaultProps} value="9" />);
 
@@ -83,3 +62,5 @@ const input = component.find('input');
     expect(component.text()).not.toContain('0');
-    expect(input.prop('className')).not.toContain(`${defaultProps.className}__input--hasLeadingZero`);
+    expect(input.prop('className')).not.toContain(
+      `${defaultProps.className}__input--hasLeadingZero`,
+    );
   });
@@ -90,8 +71,3 @@
 
-    const component = mount(
-      <DayInput
-        {...defaultProps}
-        ariaLabel={dayAriaLabel}
-      />,
-    );
+    const component = mount(<DayInput {...defaultProps} ariaLabel={dayAriaLabel} />);
 
@@ -106,8 +82,3 @@ const input = component.find('input');
 
-    const component = mount(
-      <DayInput
-        {...defaultProps}
-        placeholder={dayPlaceholder}
-      />,
-    );
+    const component = mount(<DayInput {...defaultProps} placeholder={dayPlaceholder} />);
 
@@ -120,5 +91,3 @@ const input = component.find('input');
   it('has proper name defined', () => {
-    const component = mount(
-      <DayInput {...defaultProps} />,
-    );
+    const component = mount(<DayInput {...defaultProps} />);
 
@@ -133,8 +102,3 @@ const input = component.find('input');
 
-    const component = mount(
-      <DayInput
-        {...defaultProps}
-        className={className}
-      />,
-    );
+    const component = mount(<DayInput {...defaultProps} className={className} />);
 
@@ -150,8 +114,3 @@ const input = component.find('input');
 
-    const component = mount(
-      <DayInput
-        {...defaultProps}
-        value={value}
-      />,
-    );
+    const component = mount(<DayInput {...defaultProps} value={value} />);
 
@@ -164,5 +123,3 @@ const input = component.find('input');
   it('does not disable input by default', () => {
-    const component = mount(
-      <DayInput {...defaultProps} />,
-    );
+    const component = mount(<DayInput {...defaultProps} />);
 
@@ -175,8 +132,3 @@ const input = component.find('input');
   it('disables input given disabled flag', () => {
-    const component = mount(
-      <DayInput
-        {...defaultProps}
-        disabled
-      />,
-    );
+    const component = mount(<DayInput {...defaultProps} disabled />);
 
@@ -189,5 +141,3 @@ const input = component.find('input');
   it('is not required input by default', () => {
-    const component = mount(
-      <DayInput {...defaultProps} />,
-    );
+    const component = mount(<DayInput {...defaultProps} />);
 
@@ -200,8 +150,3 @@ const input = component.find('input');
   it('required input given required flag', () => {
-    const component = mount(
-      <DayInput
-        {...defaultProps}
-        required
-      />,
-    );
+    const component = mount(<DayInput {...defaultProps} required />);
 
@@ -216,8 +161,3 @@ const input = component.find('input');
 
-    mount(
-      <DayInput
-        {...defaultProps}
-        inputRef={inputRef}
-      />,
-    );
+    mount(<DayInput {...defaultProps} inputRef={inputRef} />);
 
@@ -229,5 +169,3 @@ expect(inputRef).toHaveBeenCalled();
   it('has min = 1 by default', () => {
-    const component = mount(
-      <DayInput {...defaultProps} />,
-    );
+    const component = mount(<DayInput {...defaultProps} />);
 
@@ -241,8 +179,3 @@ const input = component.find('input');
     const component = mount(
-      <DayInput
-        {...defaultProps}
-        minDate={new Date(2017, 11, 15)}
-        month="1"
-        year="2018"
-      />,
+      <DayInput {...defaultProps} minDate={new Date(2017, 11, 15)} month="1" year="2018" />,
     );
@@ -257,8 +190,3 @@
     const component = mount(
-      <DayInput
-        {...defaultProps}
-        minDate={new Date(2018, 0, 15)}
-        month="1"
-        year="2018"
-      />,
+      <DayInput {...defaultProps} minDate={new Date(2018, 0, 15)} month="1" year="2018" />,
     );
@@ -274,9 +202,3 @@
 
-    const component = mount(
-      <DayInput
-        {...defaultProps}
-        month="1"
-        year="2018"
-      />,
-    );
+    const component = mount(<DayInput {...defaultProps} month="1" year="2018" />);
 
@@ -292,8 +214,3 @@ const input = component.find('input');
     const component = mount(
-      <DayInput
-        {...defaultProps}
-        maxDate={new Date(2018, 1, 15)}
-        month="1"
-        year="2018"
-      />,
+      <DayInput {...defaultProps} maxDate={new Date(2018, 1, 15)} month="1" year="2018" />,
     );
@@ -308,8 +225,3 @@
     const component = mount(
-      <DayInput
-        {...defaultProps}
-        maxDate={new Date(2018, 0, 15)}
-        month="1"
-        year="2018"
-      />,
+      <DayInput {...defaultProps} maxDate={new Date(2018, 0, 15)} month="1" year="2018" />,
     );
@@ -316,0 +228,0 @@

src/DateInput/Input.jsx

@@ -11,11 +11,6 @@ import React from 'react';
 
-const isIEOrEdgeLegacy = (
-  typeof window !== 'undefined'
-  && /(MSIE|Trident\/|Edge\/)/.test(window.navigator.userAgent)
-);
+const isIEOrEdgeLegacy =
+  typeof window !== 'undefined' && /(MSIE|Trident\/|Edge\/)/.test(window.navigator.userAgent);
 
-const isFirefox = (
-  typeof window !== 'undefined'
-  && /Firefox/.test(window.navigator.userAgent)
-);
+const isFirefox = typeof window !== 'undefined' && /Firefox/.test(window.navigator.userAgent);
 
@@ -114,12 +109,12 @@ function onFocus(event) {
 }) {
-  const hasLeadingZero = (
-    showLeadingZeros
-    && value
-    && value < 10
-    && (value === '0' || !value.toString().startsWith('0'))
-  );
+  const hasLeadingZero =
+    showLeadingZeros && value && value < 10 && (value === '0' || !value.toString().startsWith('0'));
   const maxLength = max ? max.toString().length : null;
 
   return [
-    (hasLeadingZero && <span key="leadingZero" className={`${className}__leadingZero`}>0</span>),
+    hasLeadingZero && (
+      <span key="leadingZero" className={`${className}__leadingZero`}>
+        0
+      </span>
+    ),
     <input
@@ -126,0 +121,0 @@ key="input"

src/DateInput/MonthInput.jsx

@@ -10,8 +10,3 @@ import React from 'react';
 
-export default function MonthInput({
-  maxDate,
-  minDate,
-  year,
-  ...otherProps
-}) {
+export default function MonthInput({ maxDate, minDate, year, ...otherProps }) {
   function isSameYear(date) {
@@ -24,10 +19,3 @@ return date && year === getYear(date).toString();
 
-  return (
-    <Input
-      max={maxMonth}
-      min={minMonth}
-      name="month"
-      {...otherProps}
-    />
-  );
+  return <Input max={maxMonth} min={minMonth} name="month" {...otherProps} />;
 }
@@ -34,0 +22,0 @@

src/DateInput/MonthInput.spec.jsx

@@ -13,5 +13,3 @@ import React from 'react';
   it('renders an input', () => {
-    const component = mount(
-      <MonthInput {...defaultProps} />,
-    );
+    const component = mount(<MonthInput {...defaultProps} />);
 
@@ -24,9 +22,3 @@ const input = component.find('input');
   it('renders "0" given showLeadingZeros if month is <10', () => {
-    const component = mount(
-      <MonthInput
-        {...defaultProps}
-        showLeadingZeros
-        value="9"
-      />,
-    );
+    const component = mount(<MonthInput {...defaultProps} showLeadingZeros value="9" />);
 
@@ -40,9 +32,3 @@ const input = component.find('input');
   it('does not render "0" given showLeadingZeros if month is <10 with leading zero already', () => {
-    const component = mount(
-      <MonthInput
-        {...defaultProps}
-        showLeadingZeros
-        value="09"
-      />,
-    );
+    const component = mount(<MonthInput {...defaultProps} showLeadingZeros value="09" />);
 
@@ -52,13 +38,9 @@ const input = component.find('input');
     expect(component.text()).not.toContain('0');
-    expect(input.prop('className')).not.toContain(`${defaultProps.className}__input--hasLeadingZero`);
+    expect(input.prop('className')).not.toContain(
+      `${defaultProps.className}__input--hasLeadingZero`,
+    );
   });
 
   it('does not render "0" given showLeadingZeros if month is >=10', () => {
-    const component = mount(
-      <MonthInput
-        {...defaultProps}
-        showLeadingZeros
-        value="10"
-      />,
-    );
+    const component = mount(<MonthInput {...defaultProps} showLeadingZeros value="10" />);
 
@@ -68,12 +50,9 @@ const input = component.find('input');
     expect(component.text()).not.toContain('0');
-    expect(input.prop('className')).not.toContain(`${defaultProps.className}__input--hasLeadingZero`);
+    expect(input.prop('className')).not.toContain(
+      `${defaultProps.className}__input--hasLeadingZero`,
+    );
   });
 
   it('does not render "0" if not given showLeadingZeros', () => {
-    const component = mount(
-      <MonthInput
-        {...defaultProps}
-        value="9"
-      />,
-    );
+    const component = mount(<MonthInput {...defaultProps} value="9" />);
 
@@ -83,3 +62,5 @@ const input = component.find('input');
     expect(component.text()).not.toContain('0');
-    expect(input.prop('className')).not.toContain(`${defaultProps.className}__input--hasLeadingZero`);
+    expect(input.prop('className')).not.toContain(
+      `${defaultProps.className}__input--hasLeadingZero`,
+    );
   });
@@ -90,8 +71,3 @@
 
-    const component = mount(
-      <MonthInput
-        {...defaultProps}
-        ariaLabel={monthAriaLabel}
-      />,
-    );
+    const component = mount(<MonthInput {...defaultProps} ariaLabel={monthAriaLabel} />);
 
@@ -106,8 +82,3 @@ const input = component.find('input');
 
-    const component = mount(
-      <MonthInput
-        {...defaultProps}
-        placeholder={monthPlaceholder}
-      />,
-    );
+    const component = mount(<MonthInput {...defaultProps} placeholder={monthPlaceholder} />);
 
@@ -120,5 +91,3 @@ const input = component.find('input');
   it('has proper name defined', () => {
-    const component = mount(
-      <MonthInput {...defaultProps} />,
-    );
+    const component = mount(<MonthInput {...defaultProps} />);
 
@@ -133,8 +102,3 @@ const input = component.find('input');
 
-    const component = mount(
-      <MonthInput
-        {...defaultProps}
-        className={className}
-      />,
-    );
+    const component = mount(<MonthInput {...defaultProps} className={className} />);
 
@@ -150,8 +114,3 @@ const input = component.find('input');
 
-    const component = mount(
-      <MonthInput
-        {...defaultProps}
-        value={value}
-      />,
-    );
+    const component = mount(<MonthInput {...defaultProps} value={value} />);
 
@@ -164,5 +123,3 @@ const input = component.find('input');
   it('does not disable input by default', () => {
-    const component = mount(
-      <MonthInput {...defaultProps} />,
-    );
+    const component = mount(<MonthInput {...defaultProps} />);
 
@@ -175,8 +132,3 @@ const input = component.find('input');
   it('disables input given disabled flag', () => {
-    const component = mount(
-      <MonthInput
-        {...defaultProps}
-        disabled
-      />,
-    );
+    const component = mount(<MonthInput {...defaultProps} disabled />);
 
@@ -189,5 +141,3 @@ const input = component.find('input');
   it('is not required input by default', () => {
-    const component = mount(
-      <MonthInput {...defaultProps} />,
-    );
+    const component = mount(<MonthInput {...defaultProps} />);
 
@@ -200,8 +150,3 @@ const input = component.find('input');
   it('required input given required flag', () => {
-    const component = mount(
-      <MonthInput
-        {...defaultProps}
-        required
-      />,
-    );
+    const component = mount(<MonthInput {...defaultProps} required />);
 
@@ -216,8 +161,3 @@ const input = component.find('input');
 
-    mount(
-      <MonthInput
-        {...defaultProps}
-        inputRef={inputRef}
-      />,
-    );
+    mount(<MonthInput {...defaultProps} inputRef={inputRef} />);
 
@@ -229,5 +169,3 @@ expect(inputRef).toHaveBeenCalled();
   it('has min = 1 by default', () => {
-    const component = mount(
-      <MonthInput {...defaultProps} />,
-    );
+    const component = mount(<MonthInput {...defaultProps} />);
 
@@ -241,7 +179,3 @@ const input = component.find('input');
     const component = mount(
-      <MonthInput
-        {...defaultProps}
-        minDate={new Date(2017, 6, 1)}
-        year="2018"
-      />,
+      <MonthInput {...defaultProps} minDate={new Date(2017, 6, 1)} year="2018" />,
     );
@@ -256,7 +190,3 @@
     const component = mount(
-      <MonthInput
-        {...defaultProps}
-        minDate={new Date(2018, 6, 1)}
-        year="2018"
-      />,
+      <MonthInput {...defaultProps} minDate={new Date(2018, 6, 1)} year="2018" />,
     );
@@ -270,8 +200,3 @@
   it('has max = 12 by default', () => {
-    const component = mount(
-      <MonthInput
-        {...defaultProps}
-        year="2018"
-      />,
-    );
+    const component = mount(<MonthInput {...defaultProps} year="2018" />);
 
@@ -285,7 +210,3 @@ const input = component.find('input');
     const component = mount(
-      <MonthInput
-        {...defaultProps}
-        maxDate={new Date(2019, 6, 1)}
-        year="2018"
-      />,
+      <MonthInput {...defaultProps} maxDate={new Date(2019, 6, 1)} year="2018" />,
     );
@@ -300,7 +221,3 @@
     const component = mount(
-      <MonthInput
-        {...defaultProps}
-        maxDate={new Date(2018, 6, 1)}
-        year="2018"
-      />,
+      <MonthInput {...defaultProps} maxDate={new Date(2018, 6, 1)} year="2018" />,
     );
@@ -307,0 +224,0 @@

src/DateInput/MonthSelect.jsx

@@ -36,6 +36,3 @@ import React from 'react';
       aria-label={ariaLabel}
-      className={mergeClassNames(
-        `${className}__input`,
-        `${className}__${name}`,
-      )}
+      className={mergeClassNames(`${className}__input`, `${className}__${name}`)}
       data-input="true"
@@ -48,7 +45,3 @@ data-select="true"
     >
-      {!value && (
-        <option value="">
-          {placeholder}
-        </option>
-      )}
+      {!value && <option value="">{placeholder}</option>}
       {dates.map((date) => {
@@ -59,7 +52,3 @@ const month = getMonthHuman(date);
         return (
-          <option
-            key={month}
-            disabled={disabled}
-            value={month}
-          >
+          <option key={month} disabled={disabled} value={month}>
             {formatter(locale, date)}
@@ -66,0 +55,0 @@ </option>

src/DateInput/MonthSelect.spec.jsx

@@ -13,5 +13,3 @@ import React from 'react';
   it('renders a select', () => {
-    const component = mount(
-      <MonthSelect {...defaultProps} />,
-    );
+    const component = mount(<MonthSelect {...defaultProps} />);
 
@@ -28,8 +26,3 @@ const select = component.find('select');
 
-    const component = mount(
-      <MonthSelect
-        {...defaultProps}
-        ariaLabel={monthAriaLabel}
-      />,
-    );
+    const component = mount(<MonthSelect {...defaultProps} ariaLabel={monthAriaLabel} />);
 
@@ -42,5 +35,3 @@ const select = component.find('select');
   it('has proper placeholder by default', () => {
-    const component = mount(
-      <MonthSelect {...defaultProps} />,
-    );
+    const component = mount(<MonthSelect {...defaultProps} />);
 
@@ -56,8 +47,3 @@ const options = component.find('option');
 
-    const component = mount(
-      <MonthSelect
-        {...defaultProps}
-        placeholder={monthPlaceholder}
-      />,
-    );
+    const component = mount(<MonthSelect {...defaultProps} placeholder={monthPlaceholder} />);
 
@@ -71,5 +57,3 @@ const options = component.find('option');
   it('has proper name defined', () => {
-    const component = mount(
-      <MonthSelect {...defaultProps} />,
-    );
+    const component = mount(<MonthSelect {...defaultProps} />);
 
@@ -84,8 +68,3 @@ const select = component.find('select');
 
-    const component = mount(
-      <MonthSelect
-        {...defaultProps}
-        className={className}
-      />,
-    );
+    const component = mount(<MonthSelect {...defaultProps} className={className} />);
 
@@ -101,8 +80,3 @@ const select = component.find('select');
 
-    const component = mount(
-      <MonthSelect
-        {...defaultProps}
-        value={value}
-      />,
-    );
+    const component = mount(<MonthSelect {...defaultProps} value={value} />);
 
@@ -115,5 +89,3 @@ const select = component.find('select');
   it('does not disable select by default', () => {
-    const component = mount(
-      <MonthSelect {...defaultProps} />,
-    );
+    const component = mount(<MonthSelect {...defaultProps} />);
 
@@ -126,8 +98,3 @@ const select = component.find('select');
   it('disables select given disabled flag', () => {
-    const component = mount(
-      <MonthSelect
-        {...defaultProps}
-        disabled
-      />,
-    );
+    const component = mount(<MonthSelect {...defaultProps} disabled />);
 
@@ -140,5 +107,3 @@ const select = component.find('select');
   it('is not required select by default', () => {
-    const component = mount(
-      <MonthSelect {...defaultProps} />,
-    );
+    const component = mount(<MonthSelect {...defaultProps} />);
 
@@ -151,8 +116,3 @@ const select = component.find('select');
   it('required select given required flag', () => {
-    const component = mount(
-      <MonthSelect
-        {...defaultProps}
-        required
-      />,
-    );
+    const component = mount(<MonthSelect {...defaultProps} required />);
 
@@ -167,8 +127,3 @@ const select = component.find('select');
 
-    mount(
-      <MonthSelect
-        {...defaultProps}
-        inputRef={inputRef}
-      />,
-    );
+    mount(<MonthSelect {...defaultProps} inputRef={inputRef} />);
 
@@ -180,5 +135,3 @@ expect(inputRef).toHaveBeenCalled();
   it('has all options enabled by default', () => {
-    const component = mount(
-      <MonthSelect {...defaultProps} />,
-    );
+    const component = mount(<MonthSelect {...defaultProps} />);
 
@@ -195,7 +148,3 @@ const select = component.find('select');
     const component = mount(
-      <MonthSelect
-        {...defaultProps}
-        minDate={new Date(2017, 6, 1)}
-        year="2018"
-      />,
+      <MonthSelect {...defaultProps} minDate={new Date(2017, 6, 1)} year="2018" />,
     );
@@ -213,7 +162,3 @@
     const component = mount(
-      <MonthSelect
-        {...defaultProps}
-        minDate={new Date(2018, 6, 1)}
-        year="2018"
-      />,
+      <MonthSelect {...defaultProps} minDate={new Date(2018, 6, 1)} year="2018" />,
     );
@@ -236,7 +181,3 @@
     const component = mount(
-      <MonthSelect
-        {...defaultProps}
-        maxDate={new Date(2019, 6, 1)}
-        year="2018"
-      />,
+      <MonthSelect {...defaultProps} maxDate={new Date(2019, 6, 1)} year="2018" />,
     );
@@ -254,7 +195,3 @@
     const component = mount(
-      <MonthSelect
-        {...defaultProps}
-        maxDate={new Date(2018, 6, 1)}
-        year="2018"
-      />,
+      <MonthSelect {...defaultProps} maxDate={new Date(2018, 6, 1)} year="2018" />,
     );
@@ -261,0 +198,0 @@

src/DateInput/NativeInput.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  getYear,
-  getISOLocalDate,
-  getISOLocalMonth,
-} from '@wojtekmaj/date-utils';
+import { getYear, getISOLocalDate, getISOLocalMonth } from '@wojtekmaj/date-utils';
 
@@ -84,7 +80,4 @@ import { isMaxDate, isMinDate, isValueType } from '../shared/propTypes';
   required: PropTypes.bool,
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.instanceOf(Date),
-  ]),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
   valueType: isValueType,
 };

src/DateInput/NativeInput.spec.jsx

@@ -13,5 +13,3 @@ import React from 'react';
   it('renders an input', () => {
-    const component = shallow(
-      <NativeInput {...defaultProps} />,
-    );
+    const component = shallow(<NativeInput {...defaultProps} />);
 
@@ -26,8 +24,3 @@ const input = component.find('input');
 
-    const component = shallow(
-      <NativeInput
-        {...defaultProps}
-        ariaLabel={nativeInputAriaLabel}
-      />,
-    );
+    const component = shallow(<NativeInput {...defaultProps} ariaLabel={nativeInputAriaLabel} />);
 
@@ -42,8 +35,3 @@ const select = component.find('input');
 
-    const component = shallow(
-      <NativeInput
-        {...defaultProps}
-        name={name}
-      />,
-    );
+    const component = shallow(<NativeInput {...defaultProps} name={name} />);
 
@@ -61,14 +49,7 @@ const input = component.find('input');
     ${'decade'} | ${'2019'}
-  `('displays given value properly if valueType is $valueType', ({
-    valueType,
-    parsedValue,
-  }) => {
+  `('displays given value properly if valueType is $valueType', ({ valueType, parsedValue }) => {
     const value = new Date(2019, 5, 1);
 
     const component = shallow(
-      <NativeInput
-        {...defaultProps}
-        value={value}
-        valueType={valueType}
-      />,
+      <NativeInput {...defaultProps} value={value} valueType={valueType} />,
     );
@@ -83,5 +64,3 @@
   it('does not disable input by default', () => {
-    const component = shallow(
-      <NativeInput {...defaultProps} />,
-    );
+    const component = shallow(<NativeInput {...defaultProps} />);
 
@@ -94,8 +73,3 @@ const input = component.find('input');
   it('disables input given disabled flag', () => {
-    const component = shallow(
-      <NativeInput
-        {...defaultProps}
-        disabled
-      />,
-    );
+    const component = shallow(<NativeInput {...defaultProps} disabled />);
 
@@ -108,5 +82,3 @@ const input = component.find('input');
   it('is not required input by default', () => {
-    const component = shallow(
-      <NativeInput {...defaultProps} />,
-    );
+    const component = shallow(<NativeInput {...defaultProps} />);
 
@@ -119,8 +91,3 @@ const input = component.find('input');
   it('required input given required flag', () => {
-    const component = shallow(
-      <NativeInput
-        {...defaultProps}
-        required
-      />,
-    );
+    const component = shallow(<NativeInput {...defaultProps} required />);
 
@@ -133,5 +100,3 @@ const input = component.find('input');
   it('has no min by default', () => {
-    const component = shallow(
-      <NativeInput {...defaultProps} />,
-    );
+    const component = shallow(<NativeInput {...defaultProps} />);
 
@@ -149,18 +114,14 @@ const input = component.find('input');
     ${'decade'} | ${'2019'}
-  `('has proper min for minDate which is a full year if valueType is $valueType', ({
-    valueType,
-    parsedMin,
-  }) => {
-    const component = shallow(
-      <NativeInput
-        {...defaultProps}
-        minDate={new Date(2019, 0, 1)}
-        valueType={valueType}
-      />,
-    );
+  `(
+    'has proper min for minDate which is a full year if valueType is $valueType',
+    ({ valueType, parsedMin }) => {
+      const component = shallow(
+        <NativeInput {...defaultProps} minDate={new Date(2019, 0, 1)} valueType={valueType} />,
+      );
 
-    const input = component.find('input');
+      const input = component.find('input');
 
-    expect(input.prop('min').toString()).toBe(parsedMin);
-  });
+      expect(input.prop('min').toString()).toBe(parsedMin);
+    },
+  );
 
@@ -173,23 +134,17 @@ it.each`
     ${'decade'} | ${'2019'}
-  `('has proper min for minDate which is not a full year if valueType is $valueType', ({
-    valueType,
-    parsedMin,
-  }) => {
-    const component = shallow(
-      <NativeInput
-        {...defaultProps}
-        minDate={new Date(2019, 5, 1)}
-        valueType={valueType}
-      />,
-    );
+  `(
+    'has proper min for minDate which is not a full year if valueType is $valueType',
+    ({ valueType, parsedMin }) => {
+      const component = shallow(
+        <NativeInput {...defaultProps} minDate={new Date(2019, 5, 1)} valueType={valueType} />,
+      );
 
-    const input = component.find('input');
+      const input = component.find('input');
 
-    expect(input.prop('min').toString()).toBe(parsedMin);
-  });
+      expect(input.prop('min').toString()).toBe(parsedMin);
+    },
+  );
 
   it('has no max by default', () => {
-    const component = shallow(
-      <NativeInput {...defaultProps} />,
-    );
+    const component = shallow(<NativeInput {...defaultProps} />);
 
@@ -207,18 +162,14 @@ const input = component.find('input');
     ${'decade'} | ${'2020'}
-  `('has proper max for maxDate which is a full year if valueType is $valueType', ({
-    valueType,
-    parsedMax,
-  }) => {
-    const component = shallow(
-      <NativeInput
-        {...defaultProps}
-        maxDate={new Date(2020, 0, 1)}
-        valueType={valueType}
-      />,
-    );
+  `(
+    'has proper max for maxDate which is a full year if valueType is $valueType',
+    ({ valueType, parsedMax }) => {
+      const component = shallow(
+        <NativeInput {...defaultProps} maxDate={new Date(2020, 0, 1)} valueType={valueType} />,
+      );
 
-    const input = component.find('input');
+      const input = component.find('input');
 
-    expect(input.prop('max').toString()).toBe(parsedMax);
-  });
+      expect(input.prop('max').toString()).toBe(parsedMax);
+    },
+  );
 
@@ -231,18 +182,14 @@ it.each`
     ${'decade'} | ${'2020'}
-  `('has proper max for maxDate which is not a full year if valueType is $valueType', ({
-    valueType,
-    parsedMax,
-  }) => {
-    const component = shallow(
-      <NativeInput
-        {...defaultProps}
-        maxDate={new Date(2020, 5, 1)}
-        valueType={valueType}
-      />,
-    );
+  `(
+    'has proper max for maxDate which is not a full year if valueType is $valueType',
+    ({ valueType, parsedMax }) => {
+      const component = shallow(
+        <NativeInput {...defaultProps} maxDate={new Date(2020, 5, 1)} valueType={valueType} />,
+      );
 
-    const input = component.find('input');
+      const input = component.find('input');
 
-    expect(input.prop('max').toString()).toBe(parsedMax);
-  });
+      expect(input.prop('max').toString()).toBe(parsedMax);
+    },
+  );
 });

src/DateInput/YearInput.jsx

@@ -7,8 +7,3 @@ import React from 'react';
 
-import {
-  isMaxDate,
-  isMinDate,
-  isRef,
-  isValueType,
-} from '../shared/propTypes';
+import { isMaxDate, isMinDate, isRef, isValueType } from '../shared/propTypes';
 import { safeMax, safeMin } from '../shared/utils';
@@ -15,0 +10,0 @@

src/DateInput/YearInput.spec.jsx

@@ -13,5 +13,3 @@ import React from 'react';
   it('renders an input', () => {
-    const component = mount(
-      <YearInput {...defaultProps} />,
-    );
+    const component = mount(<YearInput {...defaultProps} />);
 
@@ -26,8 +24,3 @@ const input = component.find('input');
 
-    const component = mount(
-      <YearInput
-        {...defaultProps}
-        ariaLabel={yearAriaLabel}
-      />,
-    );
+    const component = mount(<YearInput {...defaultProps} ariaLabel={yearAriaLabel} />);
 
@@ -42,8 +35,3 @@ const input = component.find('input');
 
-    const component = mount(
-      <YearInput
-        {...defaultProps}
-        placeholder={yearPlaceholder}
-      />,
-    );
+    const component = mount(<YearInput {...defaultProps} placeholder={yearPlaceholder} />);
 
@@ -56,5 +44,3 @@ const input = component.find('input');
   it('has proper name defined', () => {
-    const component = mount(
-      <YearInput {...defaultProps} />,
-    );
+    const component = mount(<YearInput {...defaultProps} />);
 
@@ -69,8 +55,3 @@ const input = component.find('input');
 
-    const component = mount(
-      <YearInput
-        {...defaultProps}
-        className={className}
-      />,
-    );
+    const component = mount(<YearInput {...defaultProps} className={className} />);
 
@@ -86,8 +67,3 @@ const input = component.find('input');
 
-    const component = mount(
-      <YearInput
-        {...defaultProps}
-        value={value}
-      />,
-    );
+    const component = mount(<YearInput {...defaultProps} value={value} />);
 
@@ -100,5 +76,3 @@ const input = component.find('input');
   it('does not disable input by default', () => {
-    const component = mount(
-      <YearInput {...defaultProps} />,
-    );
+    const component = mount(<YearInput {...defaultProps} />);
 
@@ -111,8 +85,3 @@ const input = component.find('input');
   it('disables input given disabled flag', () => {
-    const component = mount(
-      <YearInput
-        {...defaultProps}
-        disabled
-      />,
-    );
+    const component = mount(<YearInput {...defaultProps} disabled />);
 
@@ -125,5 +94,3 @@ const input = component.find('input');
   it('is not required input by default', () => {
-    const component = mount(
-      <YearInput {...defaultProps} />,
-    );
+    const component = mount(<YearInput {...defaultProps} />);
 
@@ -136,8 +103,3 @@ const input = component.find('input');
   it('required input given required flag', () => {
-    const component = mount(
-      <YearInput
-        {...defaultProps}
-        required
-      />,
-    );
+    const component = mount(<YearInput {...defaultProps} required />);
 
@@ -152,8 +114,3 @@ const input = component.find('input');
 
-    mount(
-      <YearInput
-        {...defaultProps}
-        inputRef={inputRef}
-      />,
-    );
+    mount(<YearInput {...defaultProps} inputRef={inputRef} />);
 
@@ -165,5 +122,3 @@ expect(inputRef).toHaveBeenCalled();
   it('has min = 1 by default', () => {
-    const component = mount(
-      <YearInput {...defaultProps} />,
-    );
+    const component = mount(<YearInput {...defaultProps} />);
 
@@ -176,8 +131,3 @@ const input = component.find('input');
   it('has min = (year in minDate) given minDate', () => {
-    const component = mount(
-      <YearInput
-        {...defaultProps}
-        minDate={new Date(2018, 6, 1)}
-      />,
-    );
+    const component = mount(<YearInput {...defaultProps} minDate={new Date(2018, 6, 1)} />);
 
@@ -190,5 +140,3 @@ const input = component.find('input');
   it('has max = 275760 by default', () => {
-    const component = mount(
-      <YearInput {...defaultProps} />,
-    );
+    const component = mount(<YearInput {...defaultProps} />);
 
@@ -201,8 +149,3 @@ const input = component.find('input');
   it('has max = (year in maxDate) given maxDate', () => {
-    const component = mount(
-      <YearInput
-        {...defaultProps}
-        maxDate={new Date(2018, 6, 1)}
-      />,
-    );
+    const component = mount(<YearInput {...defaultProps} maxDate={new Date(2018, 6, 1)} />);
 
@@ -209,0 +152,0 @@ const input = component.find('input');

src/DatePicker.jsx

@@ -59,5 +59,4 @@ import React, { PureComponent } from 'react';
     }
-  }
+  };
 
-  // eslint-disable-next-line react/destructuring-assignment
   onChange = (value, closeCalendar = this.props.closeCalendar) => {
@@ -73,3 +72,3 @@ const { onChange } = this.props;
     }
-  }
+  };
 
@@ -95,3 +94,3 @@ onFocus = (event) => {
     }
-  }
+  };
 
@@ -102,7 +101,7 @@ onKeyDown = (event) => {
     }
-  }
+  };
 
   openCalendar = () => {
     this.setState({ isOpen: true });
-  }
+  };
 
@@ -117,7 +116,7 @@ closeCalendar = () => {
     });
-  }
+  };
 
   toggleCalendar = () => {
     this.setState((prevState) => ({ isOpen: !prevState.isOpen }));
-  }
+  };
 
@@ -186,2 +185,3 @@ stopPropagation = (event) => event.stopPropagation();
           {...placeholderProps}
+          // eslint-disable-next-line jsx-a11y/no-autofocus
           autoFocus={autoFocus}
@@ -252,3 +252,11 @@ className={`${baseClassName}__inputGroup`}
       <Fit>
-        <div className={mergeClassNames(className, `${className}--${isOpen ? 'open' : 'closed'}`)}>
+        <div
+          ref={(ref) => {
+            if (ref && !isOpen) {
+              ref.removeAttribute('style');
+            }
+          }}
+          className={mergeClassNames(className, `${className}--${isOpen ? 'open' : 'closed'}`)}
+          style={isOpen ? undefined : {}}
+        >
           <Calendar
@@ -336,6 +344,3 @@ className={calendarClassName}
 
-const isValue = PropTypes.oneOfType([
-  PropTypes.string,
-  PropTypes.instanceOf(Date),
-]);
+const isValue = PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]);
 
@@ -345,11 +350,5 @@ DatePicker.propTypes = {
   calendarAriaLabel: PropTypes.string,
-  calendarClassName: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.arrayOf(PropTypes.string),
-  ]),
+  calendarClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
   calendarIcon: PropTypes.node,
-  className: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.arrayOf(PropTypes.string),
-  ]),
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
   clearAriaLabel: PropTypes.string,
@@ -380,8 +379,5 @@ clearIcon: PropTypes.node,
   showLeadingZeros: PropTypes.bool,
-  value: PropTypes.oneOfType([
-    isValue,
-    PropTypes.arrayOf(isValue),
-  ]),
+  value: PropTypes.oneOfType([isValue, PropTypes.arrayOf(isValue)]),
   yearAriaLabel: PropTypes.string,
   yearPlaceholder: PropTypes.string,
 };

src/DatePicker.spec.jsx

@@ -8,5 +8,3 @@ import React from 'react';
   it('passes default name to DateInput', () => {
-    const component = mount(
-      <DatePicker />,
-    );
+    const component = mount(<DatePicker />);
 
@@ -21,5 +19,3 @@ const dateInput = component.find('DateInput');
 
-    const component = mount(
-      <DatePicker name={name} />,
-    );
+    const component = mount(<DatePicker name={name} />);
 
@@ -32,5 +28,4 @@ const dateInput = component.find('DateInput');
   it('passes autoFocus flag to DateInput', () => {
-    const component = mount(
-      <DatePicker autoFocus />,
-    );
+    // eslint-disable-next-line jsx-a11y/no-autofocus
+    const component = mount(<DatePicker autoFocus />);
 
@@ -43,5 +38,3 @@ const dateInput = component.find('DateInput');
   it('passes disabled flag to DateInput', () => {
-    const component = mount(
-      <DatePicker disabled />,
-    );
+    const component = mount(<DatePicker disabled />);
 
@@ -56,5 +49,3 @@ const dateInput = component.find('DateInput');
 
-    const component = mount(
-      <DatePicker format={format} />,
-    );
+    const component = mount(<DatePicker format={format} />);
 
@@ -76,5 +67,3 @@ const dateInput = component.find('DateInput');
 
-    const component = mount(
-      <DatePicker {...ariaLabelProps} />,
-    );
+    const component = mount(<DatePicker {...ariaLabelProps} />);
 
@@ -100,5 +89,3 @@ const calendarButton = component.find('button.react-date-picker__calendar-button');
 
-    const component = mount(
-      <DatePicker {...placeholderProps} />,
-    );
+    const component = mount(<DatePicker {...placeholderProps} />);
 
@@ -116,5 +103,3 @@ const dateInput = component.find('DateInput');
 
-      const component = mount(
-        <DatePicker value={value} />,
-      );
+      const component = mount(<DatePicker value={value} />);
 
@@ -130,5 +115,3 @@ const dateInput = component.find('DateInput');
 
-      const component = mount(
-        <DatePicker value={[value1, value2]} />,
-      );
+      const component = mount(<DatePicker value={[value1, value2]} />);
 
@@ -144,5 +127,3 @@ const dateInput = component.find('DateInput');
 
-    const component = mount(
-      <DatePicker className={className} />,
-    );
+    const component = mount(<DatePicker className={className} />);
 
@@ -157,8 +138,3 @@ const wrapperClassName = component.prop('className');
 
-    const component = mount(
-      <DatePicker
-        calendarClassName={calendarClassName}
-        isOpen
-      />,
-    );
+    const component = mount(<DatePicker calendarClassName={calendarClassName} isOpen />);
 
@@ -172,5 +148,3 @@ const calendar = component.find('Calendar');
   it('renders DateInput component', () => {
-    const component = mount(
-      <DatePicker />,
-    );
+    const component = mount(<DatePicker />);
 
@@ -183,5 +157,3 @@ const dateInput = component.find('DateInput');
   it('renders clear button', () => {
-    const component = mount(
-      <DatePicker />,
-    );
+    const component = mount(<DatePicker />);
 
@@ -194,5 +166,3 @@ const clearButton = component.find('button.react-date-picker__clear-button');
   it('renders calendar button', () => {
-    const component = mount(
-      <DatePicker />,
-    );
+    const component = mount(<DatePicker />);
 
@@ -205,5 +175,3 @@ const calendarButton = component.find('button.react-date-picker__calendar-button');
   it('renders DateInput and Calendar components when given isOpen flag', () => {
-    const component = mount(
-      <DatePicker isOpen />,
-    );
+    const component = mount(<DatePicker isOpen />);
 
@@ -218,5 +186,3 @@ const dateInput = component.find('DateInput');
   it('does not render Calendar component when given disableCalendar & isOpen flags', () => {
-    const component = mount(
-      <DatePicker disableCalendar isOpen />,
-    );
+    const component = mount(<DatePicker disableCalendar isOpen />);
 
@@ -231,5 +197,3 @@ const dateInput = component.find('DateInput');
   it('opens Calendar component when given isOpen flag by changing props', () => {
-    const component = mount(
-      <DatePicker />,
-    );
+    const component = mount(<DatePicker />);
 
@@ -249,5 +213,3 @@ const calendar = component.find('Calendar');
   it('opens Calendar component when clicking on a button', () => {
-    const component = mount(
-      <DatePicker />,
-    );
+    const component = mount(<DatePicker />);
 
@@ -269,5 +231,3 @@ const calendar = component.find('Calendar');
     it('opens Calendar component when focusing on an input inside by default', () => {
-      const component = mount(
-        <DatePicker />,
-      );
+      const component = mount(<DatePicker />);
 
@@ -288,5 +248,3 @@ const calendar = component.find('Calendar');
     it('opens Calendar component when focusing on an input inside given openCalendarOnFocus = true', () => {
-      const component = mount(
-        <DatePicker openCalendarOnFocus />,
-      );
+      const component = mount(<DatePicker openCalendarOnFocus />);
 
@@ -307,5 +265,3 @@ const calendar = component.find('Calendar');
     it('does not open Calendar component when focusing on an input inside given openCalendarOnFocus = false', () => {
-      const component = mount(
-        <DatePicker openCalendarOnFocus={false} />,
-      );
+      const component = mount(<DatePicker openCalendarOnFocus={false} />);
 
@@ -326,5 +282,3 @@ const calendar = component.find('Calendar');
     it('does not open Calendar component when focusing on a select element', () => {
-      const component = mount(
-        <DatePicker format="dd.MMMM.yyyy" />,
-      );
+      const component = mount(<DatePicker format="dd.MMMM.yyyy" />);
 
@@ -349,6 +303,3 @@ const calendar = component.find('Calendar');
 
-    const component = mount(
-      <DatePicker isOpen />,
-      { attachTo: root },
-    );
+    const component = mount(<DatePicker isOpen />, { attachTo: root });
 
@@ -367,6 +318,3 @@ const event = document.createEvent('MouseEvent');
 
-    const component = mount(
-      <DatePicker isOpen />,
-      { attachTo: root },
-    );
+    const component = mount(<DatePicker isOpen />, { attachTo: root });
 
@@ -385,6 +333,3 @@ const event = document.createEvent('FocusEvent');
 
-    const component = mount(
-      <DatePicker isOpen />,
-      { attachTo: root },
-    );
+    const component = mount(<DatePicker isOpen />, { attachTo: root });
 
@@ -400,5 +345,3 @@ const event = document.createEvent('TouchEvent');
   it('does not close Calendar component when focused inside', () => {
-    const component = mount(
-      <DatePicker isOpen />,
-    );
+    const component = mount(<DatePicker isOpen />);
 
@@ -417,5 +360,3 @@ const customInputs = component.find('input[data-input]');
   it('closes Calendar when calling internal onChange by default', () => {
-    const component = mount(
-      <DatePicker isOpen />,
-    );
+    const component = mount(<DatePicker isOpen />);
 
@@ -430,8 +371,3 @@ const { onChange } = component.instance();
   it('does not close Calendar when calling internal onChange with prop closeCalendar = false', () => {
-    const component = mount(
-      <DatePicker
-        closeCalendar={false}
-        isOpen
-      />,
-    );
+    const component = mount(<DatePicker closeCalendar={false} isOpen />);
 
@@ -446,5 +382,3 @@ const { onChange } = component.instance();
   it('does not close Calendar when calling internal onChange with closeCalendar = false', () => {
-    const component = mount(
-      <DatePicker isOpen />,
-    );
+    const component = mount(<DatePicker isOpen />);
 
@@ -462,5 +396,3 @@ const { onChange } = component.instance();
 
-    const component = mount(
-      <DatePicker onChange={onChange} />,
-    );
+    const component = mount(<DatePicker onChange={onChange} />);
 
@@ -477,5 +409,3 @@ const { onChange: onChangeInternal } = component.instance();
 
-    const component = mount(
-      <DatePicker onChange={onChange} />,
-    );
+    const component = mount(<DatePicker onChange={onChange} />);
 
@@ -482,0 +412,0 @@ const calendar = component.find('Calendar');

src/Divider.jsx

@@ -5,7 +5,3 @@ import React from 'react';
 export default function Divider({ children }) {
-  return (
-    <span className="react-date-picker__inputGroup__divider">
-      {children}
-    </span>
-  );
+  return <span className="react-date-picker__inputGroup__divider">{children}</span>;
 }
@@ -12,0 +8,0 @@

src/shared/dateFormatter.js

 import getUserLocale from 'get-user-locale';
 
+const formatterCache = new Map();
+
 export function getFormatter(options) {
-  return (locale, date) => date.toLocaleString(locale || getUserLocale(), options);
+  return (locale, date) => {
+    const localeWithDefault = locale || getUserLocale();
+
+    if (!formatterCache.has(localeWithDefault)) {
+      formatterCache.set(localeWithDefault, new Map());
+    }
+
+    const formatterCacheLocale = formatterCache.get(localeWithDefault);
+
+    if (!formatterCacheLocale.has(options)) {
+      formatterCacheLocale.set(options, new Intl.DateTimeFormat(localeWithDefault, options).format);
+    }
+
+    return formatterCacheLocale.get(options)(date);
+  };
 }
@@ -6,0 +22,0 @@

src/shared/dates.js

 import {
   getCenturyStart,
   getCenturyEnd,
-
   getDecadeStart,
   getDecadeEnd,
-
   getYearStart,
   getYearEnd,
-
   getMonthStart,
   getMonthEnd,
-
   getDayStart,
@@ -26,8 +22,14 @@ getDayEnd,
   switch (rangeType) {
-    case 'century': return getCenturyStart(date);
-    case 'decade': return getDecadeStart(date);
-    case 'year': return getYearStart(date);
-    case 'month': return getMonthStart(date);
-    case 'day': return getDayStart(date);
-    default: throw new Error(`Invalid rangeType: ${rangeType}`);
+    case 'century':
+      return getCenturyStart(date);
+    case 'decade':
+      return getDecadeStart(date);
+    case 'year':
+      return getYearStart(date);
+    case 'month':
+      return getMonthStart(date);
+    case 'day':
+      return getDayStart(date);
+    default:
+      throw new Error(`Invalid rangeType: ${rangeType}`);
   }
@@ -44,9 +46,15 @@ }
   switch (rangeType) {
-    case 'century': return getCenturyEnd(date);
-    case 'decade': return getDecadeEnd(date);
-    case 'year': return getYearEnd(date);
-    case 'month': return getMonthEnd(date);
-    case 'day': return getDayEnd(date);
-    default: throw new Error(`Invalid rangeType: ${rangeType}`);
+    case 'century':
+      return getCenturyEnd(date);
+    case 'decade':
+      return getDecadeEnd(date);
+    case 'year':
+      return getYearEnd(date);
+    case 'month':
+      return getMonthEnd(date);
+    case 'day':
+      return getDayEnd(date);
+    default:
+      throw new Error(`Invalid rangeType: ${rangeType}`);
   }
 }

src/shared/dates.spec.js

@@ -1,5 +0,2 @@
-import {
-  getBegin,
-  getEnd,
-} from './dates';
+import { getBegin, getEnd } from './dates';
 
@@ -6,0 +3,0 @@ describe('getBegin', () => {

src/shared/propTypes.js

@@ -16,3 +16,5 @@ import PropTypes from 'prop-types';
   if (!(minDate instanceof Date)) {
-    return new Error(`Invalid prop \`${propName}\` of type \`${typeof minDate}\` supplied to \`${componentName}\`, expected instance of \`Date\`.`);
+    return new Error(
+      `Invalid prop \`${propName}\` of type \`${typeof minDate}\` supplied to \`${componentName}\`, expected instance of \`Date\`.`,
+    );
   }
@@ -23,3 +25,5 @@
   if (maxDate && minDate > maxDate) {
-    return new Error(`Invalid prop \`${propName}\` of type \`${typeof minDate}\` supplied to \`${componentName}\`, minDate cannot be larger than maxDate.`);
+    return new Error(
+      `Invalid prop \`${propName}\` of type \`${typeof minDate}\` supplied to \`${componentName}\`, minDate cannot be larger than maxDate.`,
+    );
   }
@@ -38,3 +42,5 @@
   if (!(maxDate instanceof Date)) {
-    return new Error(`Invalid prop \`${propName}\` of type \`${typeof maxDate}\` supplied to \`${componentName}\`, expected instance of \`Date\`.`);
+    return new Error(
+      `Invalid prop \`${propName}\` of type \`${typeof maxDate}\` supplied to \`${componentName}\`, expected instance of \`Date\`.`,
+    );
   }
@@ -45,3 +51,5 @@
   if (minDate && maxDate < minDate) {
-    return new Error(`Invalid prop \`${propName}\` of type \`${typeof maxDate}\` supplied to \`${componentName}\`, maxDate cannot be smaller than minDate.`);
+    return new Error(
+      `Invalid prop \`${propName}\` of type \`${typeof maxDate}\` supplied to \`${componentName}\`, maxDate cannot be smaller than minDate.`,
+    );
   }
@@ -55,5 +63,4 @@
   PropTypes.shape({
-    // eslint-disable-next-line react/forbid-prop-types
     current: PropTypes.any,
   }),
 ]);

src/shared/utils.spec.js

@@ -1,6 +0,2 @@
-import {
-  between,
-  safeMin,
-  safeMax,
-} from './utils';
+import { between, safeMin, safeMax } from './utils';
 
@@ -7,0 +3,0 @@ describe('between', () => {

No alert changes

Improved metrics

Total package byte prevSize

224491

increased by3.73%

Worsened metrics

Dev dependency count

16

increased by14.29%

Lines of code

4795

decreased by-11.42%

Number of lines in readme file

159

decreased by-1.24%

Dependency changes

• + Addedreact@18.3.1(transitive)

• + Addedreact-dom@18.3.1(transitive)

• + Addedscheduler@0.23.2(transitive)

• - Removedreact@17.0.2(transitive)

• - Removedreact-dom@17.0.2(transitive)

• - Removedscheduler@0.20.2(transitive)

• Updatedreact-fit@^1.4.0