react-date-picker - npm Package Compare versions

Comparing version 7.8.2 to 7.9.0

dist/DateInput.js

@@ -14,2 +14,4 @@ "use strict";
 
+var _dateUtils = require("@wojtekmaj/date-utils");
+
 var _Divider = _interopRequireDefault(require("./Divider"));
@@ -82,5 +84,5 @@
 
-var datesAreDifferent = function datesAreDifferent(date1, date2) {
+function datesAreDifferent(date1, date2) {
   return date1 && !date2 || !date1 && date2 || date1 && date2 && date1.getTime() !== date2.getTime();
-};
+}
 /**
@@ -91,7 +93,7 @@ * Returns value type that can be returned with currently applied settings.
 
-var getValueType = function getValueType(maxDetail) {
+function getValueType(maxDetail) {
   return allValueTypes[allViews.indexOf(maxDetail)];
-};
+}
 
-var getValueFromRange = function getValueFromRange(valueOrArrayOfValues, index) {
+function getValueFromRange(valueOrArrayOfValues, index) {
   if (Array.isArray(valueOrArrayOfValues)) {
@@ -102,5 +104,5 @@ return valueOrArrayOfValues[index];
   return valueOrArrayOfValues;
-};
+}
 
-var parseAndValidateDate = function parseAndValidateDate(rawValue) {
+function parseAndValidateDate(rawValue) {
   if (!rawValue) {
@@ -117,10 +119,10 @@ return null;
   return valueDate;
-};
+}
 
-var getValueFrom = function getValueFrom(value) {
+function getValueFrom(value) {
   var valueFrom = getValueFromRange(value, 0);
   return parseAndValidateDate(valueFrom);
-};
+}
 
-var getDetailValueFrom = function getDetailValueFrom(value, minDate, maxDate, maxDetail) {
+function getDetailValueFrom(value, minDate, maxDate, maxDetail) {
   var valueFrom = getValueFrom(value);
@@ -134,10 +136,10 @@
   return (0, _utils.between)(detailValueFrom, minDate, maxDate);
-};
+}
 
-var getValueTo = function getValueTo(value) {
+function getValueTo(value) {
   var valueTo = getValueFromRange(value, 1);
   return parseAndValidateDate(valueTo);
-};
+}
 
-var getDetailValueTo = function getDetailValueTo(value, minDate, maxDate, maxDetail) {
+function getDetailValueTo(value, minDate, maxDate, maxDetail) {
   var valueTo = getValueTo(value);
@@ -151,5 +153,5 @@
   return (0, _utils.between)(detailValueTo, minDate, maxDate);
-};
+}
 
-var getDetailValueArray = function getDetailValueArray(value, minDate, maxDate, maxDetail) {
+function getDetailValueArray(value, minDate, maxDate, maxDetail) {
   if (value instanceof Array) {
@@ -160,9 +162,9 @@ return value;
   return [getDetailValueFrom(value, minDate, maxDate, maxDetail), getDetailValueTo(value, minDate, maxDate, maxDetail)];
-};
+}
 
-var isValidInput = function isValidInput(element) {
+function isValidInput(element) {
   return element.tagName === 'INPUT' && element.type === 'number';
-};
+}
 
-var findInput = function findInput(element, property) {
+function findInput(element, property) {
   var nextElement = element;
@@ -175,9 +177,11 @@
   return nextElement;
-};
+}
 
-var focus = function focus(element) {
-  return element && element.focus();
-};
+function focus(element) {
+  if (element) {
+    element.focus();
+  }
+}
 
-var _renderCustomInputs = function renderCustomInputs(placeholder, elementFunctions, allowMultipleInstances) {
+function _renderCustomInputs(placeholder, elementFunctions, allowMultipleInstances) {
   var usedFunctions = [];
@@ -205,3 +209,3 @@ var pattern = new RegExp(Object.keys(elementFunctions).map(function (el) {
       } else {
-        res.push(renderFunction(currentMatch));
+        res.push(renderFunction(currentMatch, index));
         usedFunctions.push(renderFunction);
@@ -213,3 +217,3 @@ }
   }, []);
-};
+}
 
@@ -358,4 +362,5 @@ var DateInput =
 
-    _defineProperty(_assertThisInitialized(_this), "renderDay", function (currentMatch) {
+    _defineProperty(_assertThisInitialized(_this), "renderDay", function (currentMatch, index) {
       var _this$props = _this.props,
+          autoFocus = _this$props.autoFocus,
           dayAriaLabel = _this$props.dayAriaLabel,
@@ -378,2 +383,3 @@ dayPlaceholder = _this$props.dayPlaceholder,
         ariaLabel: dayAriaLabel,
+        autoFocus: index === 0 && autoFocus,
         month: month,
@@ -387,4 +393,5 @@ placeholder: dayPlaceholder,
 
-    _defineProperty(_assertThisInitialized(_this), "renderMonth", function (currentMatch) {
+    _defineProperty(_assertThisInitialized(_this), "renderMonth", function (currentMatch, index) {
       var _this$props2 = _this.props,
+          autoFocus = _this$props2.autoFocus,
           locale = _this$props2.locale,
@@ -407,2 +414,3 @@ monthAriaLabel = _this$props2.monthAriaLabel,
           ariaLabel: monthAriaLabel,
+          autoFocus: index === 0 && autoFocus,
           locale: locale,
@@ -421,2 +429,3 @@ placeholder: monthPlaceholder,
         ariaLabel: monthAriaLabel,
+        autoFocus: index === 0 && autoFocus,
         placeholder: monthPlaceholder,
@@ -429,4 +438,5 @@ showLeadingZeros: showLeadingZerosFromFormat || showLeadingZeros,
 
-    _defineProperty(_assertThisInitialized(_this), "renderYear", function () {
+    _defineProperty(_assertThisInitialized(_this), "renderYear", function (currentMatch, index) {
       var _this$props3 = _this.props,
+          autoFocus = _this$props3.autoFocus,
           yearAriaLabel = _this$props3.yearAriaLabel,
@@ -439,2 +449,3 @@ yearPlaceholder = _this$props3.yearPlaceholder;
         ariaLabel: yearAriaLabel,
+        autoFocus: index === 0 && autoFocus,
         placeholder: yearPlaceholder,
@@ -517,6 +528,9 @@ value: year,
       var className = this.props.className;
+      /* eslint-disable jsx-a11y/click-events-have-key-events */
+
+      /* eslint-disable jsx-a11y/no-static-element-interactions */
+
       return _react["default"].createElement("div", {
         className: className,
-        onClick: this.onClick,
-        role: "presentation"
+        onClick: this.onClick
       }, this.renderNativeInput(), this.renderCustomInputs());
@@ -641,5 +655,5 @@ }
         if (nextValue) {
-          nextState.year = (0, _dates.getYear)(nextValue);
-          nextState.month = (0, _dates.getMonth)(nextValue);
-          nextState.day = (0, _dates.getDay)(nextValue);
+          nextState.year = (0, _dateUtils.getYear)(nextValue);
+          nextState.month = (0, _dateUtils.getMonthHuman)(nextValue);
+          nextState.day = (0, _dateUtils.getDate)(nextValue);
         } else {
@@ -671,2 +685,3 @@ nextState.year = null;
 DateInput.propTypes = {
+  autoFocus: _propTypes["default"].bool,
   className: _propTypes["default"].string.isRequired,
@@ -673,0 +688,0 @@ dayAriaLabel: _propTypes["default"].string,

dist/DateInput/DayInput.js

@@ -12,6 +12,6 @@ "use strict";
 
+var _dateUtils = require("@wojtekmaj/date-utils");
+
 var _Input = _interopRequireDefault(require("./Input"));
 
-var _dates = require("../shared/dates");
-
 var _propTypes2 = require("../shared/propTypes");
@@ -41,7 +41,7 @@
 
-    return (0, _dates.getDaysInMonth)(new Date(year, month - 1, 1));
+    return (0, _dateUtils.getDaysInMonth)(new Date(year, month - 1, 1));
   }();
 
-  var maxDay = (0, _utils.min)(currentMonthMaxDays, maxDate && year === (0, _dates.getYear)(maxDate) && month === (0, _dates.getMonth)(maxDate) && (0, _dates.getDay)(maxDate));
-  var minDay = (0, _utils.max)(1, minDate && year === (0, _dates.getYear)(minDate) && month === (0, _dates.getMonth)(minDate) && (0, _dates.getDay)(minDate));
+  var maxDay = (0, _utils.min)(currentMonthMaxDays, maxDate && year === (0, _dateUtils.getYear)(maxDate) && month === (0, _dateUtils.getMonthHuman)(maxDate) && (0, _dateUtils.getDate)(maxDate));
+  var minDay = (0, _utils.max)(1, minDate && year === (0, _dateUtils.getYear)(minDate) && month === (0, _dateUtils.getMonthHuman)(minDate) && (0, _dateUtils.getDate)(minDate));
   return _react["default"].createElement(_Input["default"], _extends({
@@ -48,0 +48,0 @@ max: maxDay,

dist/DateInput/Input.js

@@ -20,2 +20,3 @@ "use strict";
 
+/* eslint-disable jsx-a11y/no-autofocus */
 function select(element) {
@@ -57,2 +58,3 @@ if (!element) {
   var ariaLabel = _ref.ariaLabel,
+      autoFocus = _ref.autoFocus,
       className = _ref.className,
@@ -68,3 +70,4 @@ disabled = _ref.disabled,
       _onKeyUp = _ref.onKeyUp,
-      placeholder = _ref.placeholder,
+      _ref$placeholder = _ref.placeholder,
+      placeholder = _ref$placeholder === void 0 ? '--' : _ref$placeholder,
       required = _ref.required,
@@ -82,2 +85,3 @@ showLeadingZeros = _ref.showLeadingZeros,
     autoComplete: "off",
+    autoFocus: autoFocus,
     className: (0, _mergeClassNames["default"])("".concat(className, "__input"), "".concat(className, "__").concat(nameForClass || name), hasLeadingZero && "".concat(className, "__input--hasLeadingZero")),
@@ -131,5 +135,2 @@ disabled: disabled,
   value: _propTypes["default"].number
-};
-Input.defaultProps = {
-  placeholder: '--'
 };

dist/DateInput/MonthInput.js

@@ -12,6 +12,6 @@ "use strict";
 
+var _dateUtils = require("@wojtekmaj/date-utils");
+
 var _Input = _interopRequireDefault(require("./Input"));
 
-var _dates = require("../shared/dates");
-
 var _propTypes2 = require("../shared/propTypes");
@@ -35,4 +35,4 @@
 
-  var maxMonth = (0, _utils.min)(12, maxDate && year === (0, _dates.getYear)(maxDate) && (0, _dates.getMonth)(maxDate));
-  var minMonth = (0, _utils.max)(1, minDate && year === (0, _dates.getYear)(minDate) && (0, _dates.getMonth)(minDate));
+  var maxMonth = (0, _utils.min)(12, maxDate && year === (0, _dateUtils.getYear)(maxDate) && (0, _dateUtils.getMonthHuman)(maxDate));
+  var minMonth = (0, _utils.max)(1, minDate && year === (0, _dateUtils.getYear)(minDate) && (0, _dateUtils.getMonthHuman)(minDate));
   return _react["default"].createElement(_Input["default"], _extends({
@@ -39,0 +39,0 @@ max: maxMonth,

dist/DateInput/MonthSelect.js

@@ -14,3 +14,3 @@ "use strict";
 
-var _dates = require("../shared/dates");
+var _dateUtils = require("@wojtekmaj/date-utils");
 
@@ -46,10 +46,11 @@ var _dateFormatter = require("../shared/dateFormatter");
       minDate = _ref.minDate,
+      _ref$placeholder = _ref.placeholder,
+      placeholder = _ref$placeholder === void 0 ? '--' : _ref$placeholder,
       _short = _ref["short"],
+      value = _ref.value,
       year = _ref.year,
-      value = _ref.value,
-      placeholder = _ref.placeholder,
-      otherProps = _objectWithoutProperties(_ref, ["ariaLabel", "className", "itemRef", "locale", "maxDate", "minDate", "short", "year", "value", "placeholder"]);
+      otherProps = _objectWithoutProperties(_ref, ["ariaLabel", "className", "itemRef", "locale", "maxDate", "minDate", "placeholder", "short", "value", "year"]);
 
-  var maxMonth = (0, _utils.min)(12, maxDate && year === (0, _dates.getYear)(maxDate) && (0, _dates.getMonth)(maxDate));
-  var minMonth = (0, _utils.max)(1, minDate && year === (0, _dates.getYear)(minDate) && (0, _dates.getMonth)(minDate));
+  var maxMonth = (0, _utils.min)(12, maxDate && year === (0, _dateUtils.getYear)(maxDate) && (0, _dateUtils.getMonthHuman)(maxDate));
+  var minMonth = (0, _utils.max)(1, minDate && year === (0, _dateUtils.getYear)(minDate) && (0, _dateUtils.getMonthHuman)(minDate));
 
@@ -75,3 +76,3 @@ var dates = _toConsumableArray(Array(12)).map(function (el, index) {
   }, placeholder), dates.map(function (date) {
-    var month = (0, _dates.getMonth)(date);
+    var month = (0, _dateUtils.getMonthHuman)(date);
     var disabled = month < minMonth || month > maxMonth;
@@ -102,5 +103,2 @@ return _react["default"].createElement("option", {
   year: _propTypes["default"].number
-};
-MonthSelect.defaultProps = {
-  placeholder: '--'
 };

dist/DateInput/NativeInput.js

@@ -12,3 +12,3 @@ "use strict";
 
-var _dates = require("../shared/dates");
+var _dateUtils = require("@wojtekmaj/date-utils");
 
@@ -52,9 +52,9 @@ var _propTypes2 = require("../shared/propTypes");
       case 'year':
-        return _dates.getYear;
+        return _dateUtils.getYear;
 
       case 'month':
-        return _dates.getISOLocalMonth;
+        return _dateUtils.getISOLocalMonth;
 
       case 'day':
-        return _dates.getISOLocalDate;
+        return _dateUtils.getISOLocalDate;
 
@@ -61,0 +61,0 @@ default:

dist/DateInput/YearInput.js

@@ -12,6 +12,6 @@ "use strict";
 
+var _dateUtils = require("@wojtekmaj/date-utils");
+
 var _Input = _interopRequireDefault(require("./Input"));
 
-var _dates = require("../shared/dates");
-
 var _propTypes2 = require("../shared/propTypes");
@@ -32,7 +32,9 @@
       minDate = _ref.minDate,
+      _ref$placeholder = _ref.placeholder,
+      placeholder = _ref$placeholder === void 0 ? '----' : _ref$placeholder,
       valueType = _ref.valueType,
-      otherProps = _objectWithoutProperties(_ref, ["maxDate", "minDate", "valueType"]);
+      otherProps = _objectWithoutProperties(_ref, ["maxDate", "minDate", "placeholder", "valueType"]);
 
-  var maxYear = (0, _utils.min)(275760, maxDate && (0, _dates.getYear)(maxDate));
-  var minYear = (0, _utils.max)(1000, minDate && (0, _dates.getYear)(minDate));
+  var maxYear = (0, _utils.min)(275760, maxDate && (0, _dateUtils.getYear)(maxDate));
+  var minYear = (0, _utils.max)(1000, minDate && (0, _dateUtils.getYear)(minDate));
 
@@ -51,2 +53,3 @@ var yearStep = function () {
     name: "year",
+    placeholder: placeholder,
     step: yearStep
@@ -70,5 +73,2 @@ }, otherProps));
   valueType: _propTypes2.isValueType
-};
-YearInput.defaultProps = {
-  placeholder: '----'
 };

dist/DatePicker.js

@@ -203,2 +203,3 @@ "use strict";
       var _this$props3 = this.props,
+          autoFocus = _this$props3.autoFocus,
           calendarAriaLabel = _this$props3.calendarAriaLabel,
@@ -247,2 +248,3 @@ calendarIcon = _this$props3.calendarIcon,
       }, _react["default"].createElement(_DateInput["default"], _extends({}, ariaLabelProps, placeholderProps, {
+        autoFocus: autoFocus,
         className: "".concat(baseClassName, "__inputGroup"),
@@ -403,2 +405,3 @@ disabled: disabled,
 DatePicker.propTypes = {
+  autoFocus: _propTypes["default"].bool,
   calendarAriaLabel: _propTypes["default"].string,
@@ -405,0 +408,0 @@ calendarClassName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string)]),

dist/shared/dates.js

@@ -6,32 +6,2 @@ "use strict";
 });
-Object.defineProperty(exports, "getYear", {
-  enumerable: true,
-  get: function get() {
-    return _dates.getYear;
-  }
-});
-Object.defineProperty(exports, "getMonth", {
-  enumerable: true,
-  get: function get() {
-    return _dates.getMonth;
-  }
-});
-Object.defineProperty(exports, "getMonthIndex", {
-  enumerable: true,
-  get: function get() {
-    return _dates.getMonthIndex;
-  }
-});
-Object.defineProperty(exports, "getDay", {
-  enumerable: true,
-  get: function get() {
-    return _dates.getDay;
-  }
-});
-Object.defineProperty(exports, "getDaysInMonth", {
-  enumerable: true,
-  get: function get() {
-    return _dates.getDaysInMonth;
-  }
-});
 Object.defineProperty(exports, "getBegin", {
@@ -49,15 +19,3 @@ enumerable: true,
 });
-Object.defineProperty(exports, "getISOLocalMonth", {
-  enumerable: true,
-  get: function get() {
-    return _dates.getISOLocalMonth;
-  }
-});
-Object.defineProperty(exports, "getISOLocalDate", {
-  enumerable: true,
-  get: function get() {
-    return _dates.getISOLocalDate;
-  }
-});
 
 var _dates = require("react-calendar/dist/shared/dates");

package.json

 {
   "name": "react-date-picker",
-  "version": "7.8.2",
+  "version": "7.9.0",
   "description": "A date picker for your React app.",
@@ -10,3 +10,3 @@ "main": "dist/entry.js",
     "build": "yarn build-js && yarn copy-styles && yarn build-styles && yarn copy-types",
-    "build-js": "babel src -d dist --ignore **/__tests__,**/**/__tests__",
+    "build-js": "babel src -d dist --ignore **/*.spec.js,**/*.spec.jsx",
     "build-styles": "lessc ./dist/DatePicker.less ./dist/DatePicker.css",
@@ -76,2 +76,3 @@ "clean": "rimraf dist",
   "dependencies": {
+    "@wojtekmaj/date-utils": "^1.0.0",
     "get-user-locale": "^1.2.0",
@@ -107,3 +108,3 @@ "make-event-props": "^1.1.0",
     "react-test-renderer": "^16.7.0",
-    "rimraf": "^2.6.2"
+    "rimraf": "^3.0.0"
   },
@@ -110,0 +111,0 @@ "peerDependencies": {

README.md

@@ -89,2 +89,3 @@ [![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) ![build](https://img.shields.io/travis/wojtekmaj/react-date-picker/master.svg) ![dependencies](https://img.shields.io/david/wojtekmaj/react-date-picker.svg) ![dev dependencies](https://img.shields.io/david/dev/wojtekmaj/react-date-picker.svg) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)
 |----|----|----|----|
+|autoFocus|Automatically focuses the input on mount.|n/a|`true`|
 |calendarAriaLabel|`aria-label` for the calendar button.|n/a|`"Toggle calendar"`|
@@ -91,0 +92,0 @@ |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>|

src/DateInput.jsx

 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { polyfill } from 'react-lifecycles-compat';
+import { getYear, getMonthHuman, getDate } from '@wojtekmaj/date-utils';
 
@@ -15,6 +16,3 @@ import Divider from './Divider';
   getBegin,
-  getDay,
   getEnd,
-  getMonth,
-  getYear,
 } from './shared/dates';
@@ -29,7 +27,9 @@ import { isMaxDate, isMinDate } from './shared/propTypes';
 
-const datesAreDifferent = (date1, date2) => (
-  (date1 && !date2)
-  || (!date1 && date2)
-  || (date1 && date2 && date1.getTime() !== date2.getTime())
-);
+function datesAreDifferent(date1, date2) {
+  return (
+    (date1 && !date2)
+    || (!date1 && date2)
+    || (date1 && date2 && date1.getTime() !== date2.getTime())
+  );
+}
 
@@ -39,5 +39,7 @@ /**
  */
-const getValueType = maxDetail => allValueTypes[allViews.indexOf(maxDetail)];
+function getValueType(maxDetail) {
+  return allValueTypes[allViews.indexOf(maxDetail)];
+}
 
-const getValueFromRange = (valueOrArrayOfValues, index) => {
+function getValueFromRange(valueOrArrayOfValues, index) {
   if (Array.isArray(valueOrArrayOfValues)) {
@@ -48,5 +50,5 @@ return valueOrArrayOfValues[index];
   return valueOrArrayOfValues;
-};
+}
 
-const parseAndValidateDate = (rawValue) => {
+function parseAndValidateDate(rawValue) {
   if (!rawValue) {
@@ -63,11 +65,11 @@ return null;
   return valueDate;
-};
+}
 
-const getValueFrom = (value) => {
+function getValueFrom(value) {
   const valueFrom = getValueFromRange(value, 0);
 
   return parseAndValidateDate(valueFrom);
-};
+}
 
-const getDetailValueFrom = (value, minDate, maxDate, maxDetail) => {
+function getDetailValueFrom(value, minDate, maxDate, maxDetail) {
   const valueFrom = getValueFrom(value);
@@ -82,11 +84,11 @@
   return between(detailValueFrom, minDate, maxDate);
-};
+}
 
-const getValueTo = (value) => {
+function getValueTo(value) {
   const valueTo = getValueFromRange(value, 1);
 
   return parseAndValidateDate(valueTo);
-};
+}
 
-const getDetailValueTo = (value, minDate, maxDate, maxDetail) => {
+function getDetailValueTo(value, minDate, maxDate, maxDetail) {
   const valueTo = getValueTo(value);
@@ -101,5 +103,5 @@
   return between(detailValueTo, minDate, maxDate);
-};
+}
 
-const getDetailValueArray = (value, minDate, maxDate, maxDetail) => {
+function getDetailValueArray(value, minDate, maxDate, maxDetail) {
   if (value instanceof Array) {
@@ -113,7 +115,9 @@ return value;
   ];
-};
+}
 
-const isValidInput = element => element.tagName === 'INPUT' && element.type === 'number';
+function isValidInput(element) {
+  return element.tagName === 'INPUT' && element.type === 'number';
+}
 
-const findInput = (element, property) => {
+function findInput(element, property) {
   let nextElement = element;
@@ -124,7 +128,11 @@ do {
   return nextElement;
-};
+}
 
-const focus = element => element && element.focus();
+function focus(element) {
+  if (element) {
+    element.focus();
+  }
+}
 
-const renderCustomInputs = (placeholder, elementFunctions, allowMultipleInstances) => {
+function renderCustomInputs(placeholder, elementFunctions, allowMultipleInstances) {
   const usedFunctions = [];
@@ -159,3 +167,3 @@ const pattern = new RegExp(
         } else {
-          res.push(renderFunction(currentMatch));
+          res.push(renderFunction(currentMatch, index));
           usedFunctions.push(renderFunction);
@@ -166,3 +174,3 @@ }
     }, []);
-};
+}
 
@@ -204,4 +212,4 @@ export default class DateInput extends PureComponent {
         nextState.year = getYear(nextValue);
-        nextState.month = getMonth(nextValue);
-        nextState.day = getDay(nextValue);
+        nextState.month = getMonthHuman(nextValue);
+        nextState.day = getDate(nextValue);
       } else {
@@ -446,4 +454,9 @@ nextState.year = null;
 
-  renderDay = (currentMatch) => {
-    const { dayAriaLabel, dayPlaceholder, showLeadingZeros } = this.props;
+  renderDay = (currentMatch, index) => {
+    const {
+      autoFocus,
+      dayAriaLabel,
+      dayPlaceholder,
+      showLeadingZeros,
+    } = this.props;
     const { day, month, year } = this.state;
@@ -462,2 +475,3 @@
         ariaLabel={dayAriaLabel}
+        autoFocus={index === 0 && autoFocus}
         month={month}
@@ -472,4 +486,5 @@ placeholder={dayPlaceholder}
 
-  renderMonth = (currentMatch) => {
+  renderMonth = (currentMatch, index) => {
     const {
+      autoFocus,
       locale,
@@ -492,2 +507,3 @@ monthAriaLabel,
           ariaLabel={monthAriaLabel}
+          autoFocus={index === 0 && autoFocus}
           locale={locale}
@@ -509,2 +525,3 @@ placeholder={monthPlaceholder}
         ariaLabel={monthAriaLabel}
+        autoFocus={index === 0 && autoFocus}
         placeholder={monthPlaceholder}
@@ -518,4 +535,4 @@ showLeadingZeros={showLeadingZerosFromFormat || showLeadingZeros}
 
-  renderYear = () => {
-    const { yearAriaLabel, yearPlaceholder } = this.props;
+  renderYear = (currentMatch, index) => {
+    const { autoFocus, yearAriaLabel, yearPlaceholder } = this.props;
     const { year } = this.state;
@@ -528,2 +545,3 @@
         ariaLabel={yearAriaLabel}
+        autoFocus={index === 0 && autoFocus}
         placeholder={yearPlaceholder}
@@ -580,2 +598,4 @@ value={year}
 
+    /* eslint-disable jsx-a11y/click-events-have-key-events */
+    /* eslint-disable jsx-a11y/no-static-element-interactions */
     return (
@@ -585,3 +605,2 @@ <div
         onClick={this.onClick}
-        role="presentation"
       >
@@ -607,2 +626,3 @@ {this.renderNativeInput()}
 DateInput.propTypes = {
+  autoFocus: PropTypes.bool,
   className: PropTypes.string.isRequired,
@@ -609,0 +629,0 @@ dayAriaLabel: PropTypes.string,

src/DateInput/DayInput.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
+import {
+  getYear,
+  getMonthHuman,
+  getDate,
+  getDaysInMonth,
+} from '@wojtekmaj/date-utils';
 
 import Input from './Input';
 
-import {
-  getDay,
-  getDaysInMonth,
-  getMonth,
-  getYear,
-} from '../shared/dates';
 import { isMaxDate, isMinDate } from '../shared/propTypes';
@@ -32,7 +32,7 @@ import { min, max } from '../shared/utils';
     currentMonthMaxDays,
-    maxDate && year === getYear(maxDate) && month === getMonth(maxDate) && getDay(maxDate),
+    maxDate && year === getYear(maxDate) && month === getMonthHuman(maxDate) && getDate(maxDate),
   );
 
   const minDay = max(
-    1, minDate && year === getYear(minDate) && month === getMonth(minDate) && getDay(minDate),
+    1, minDate && year === getYear(minDate) && month === getMonthHuman(minDate) && getDate(minDate),
   );
@@ -39,0 +39,0 @@

src/DateInput/Input.jsx

@@ -6,2 +6,4 @@ import React from 'react';
 
+/* eslint-disable jsx-a11y/no-autofocus */
+
 function select(element) {
@@ -41,2 +43,3 @@ if (!element) {
   ariaLabel,
+  autoFocus,
   className,
@@ -52,3 +55,3 @@ disabled,
   onKeyUp,
-  placeholder,
+  placeholder = '--',
   required,
@@ -67,2 +70,3 @@ showLeadingZeros,
       autoComplete="off"
+      autoFocus={autoFocus}
       className={mergeClassNames(
@@ -120,5 +124,1 @@ `${className}__input`,
 };
-
-Input.defaultProps = {
-  placeholder: '--',
-};

src/DateInput/MonthInput.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
+import { getYear, getMonthHuman } from '@wojtekmaj/date-utils';
 
 import Input from './Input';
 
-import { getMonth, getYear } from '../shared/dates';
 import { isMaxDate, isMinDate } from '../shared/propTypes';
@@ -16,4 +16,4 @@ import { min, max } from '../shared/utils';
 }) {
-  const maxMonth = min(12, maxDate && year === getYear(maxDate) && getMonth(maxDate));
-  const minMonth = max(1, minDate && year === getYear(minDate) && getMonth(minDate));
+  const maxMonth = min(12, maxDate && year === getYear(maxDate) && getMonthHuman(maxDate));
+  const minMonth = max(1, minDate && year === getYear(minDate) && getMonthHuman(minDate));
 
@@ -20,0 +20,0 @@ return (

src/DateInput/MonthSelect.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
 import mergeClassNames from 'merge-class-names';
+import { getYear, getMonthHuman } from '@wojtekmaj/date-utils';
 
-import { getMonth, getYear } from '../shared/dates';
 import { formatMonth, formatShortMonth } from '../shared/dateFormatter';
@@ -17,10 +17,10 @@ import { isMaxDate, isMinDate } from '../shared/propTypes';
   minDate,
+  placeholder = '--',
   short,
+  value,
   year,
-  value,
-  placeholder,
   ...otherProps
 }) {
-  const maxMonth = min(12, maxDate && year === getYear(maxDate) && getMonth(maxDate));
-  const minMonth = max(1, minDate && year === getYear(minDate) && getMonth(minDate));
+  const maxMonth = min(12, maxDate && year === getYear(maxDate) && getMonthHuman(maxDate));
+  const minMonth = max(1, minDate && year === getYear(minDate) && getMonthHuman(minDate));
   const dates = [...Array(12)].map((el, index) => new Date(2019, index, 1));
@@ -52,3 +52,3 @@ const name = 'month';
       {dates.map((date) => {
-        const month = getMonth(date);
+        const month = getMonthHuman(date);
         const disabled = month < minMonth || month > maxMonth;
@@ -87,5 +87,1 @@
 };
-
-MonthSelect.defaultProps = {
-  placeholder: '--',
-};

src/DateInput/NativeInput.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
-
 import {
+  getYear,
   getISOLocalDate,
   getISOLocalMonth,
-  getYear,
-} from '../shared/dates';
+} from '@wojtekmaj/date-utils';
+
 import { isMaxDate, isMinDate, isValueType } from '../shared/propTypes';
@@ -10,0 +10,0 @@

src/DateInput/YearInput.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
+import { getYear } from '@wojtekmaj/date-utils';
 
 import Input from './Input';
 
-import { getYear } from '../shared/dates';
 import { isMaxDate, isMinDate, isValueType } from '../shared/propTypes';
@@ -13,2 +13,3 @@ import { max, min } from '../shared/utils';
   minDate,
+  placeholder = '----',
   valueType,
@@ -33,2 +34,3 @@ ...otherProps
       name="year"
+      placeholder={placeholder}
       step={yearStep}
@@ -55,5 +57,1 @@ {...otherProps}
 };
-
-YearInput.defaultProps = {
-  placeholder: '----',
-};

src/DatePicker.jsx

@@ -119,2 +119,3 @@ import React, { PureComponent } from 'react';
     const {
+      autoFocus,
       calendarAriaLabel,
@@ -166,2 +167,3 @@ calendarIcon,
           {...placeholderProps}
+          autoFocus={autoFocus}
           className={`${baseClassName}__inputGroup`}
@@ -315,2 +317,3 @@ disabled={disabled}
 DatePicker.propTypes = {
+  autoFocus: PropTypes.bool,
   calendarAriaLabel: PropTypes.string,
@@ -317,0 +320,0 @@ calendarClassName: PropTypes.oneOfType([

src/shared/dates.js

 export {
-  getYear,
-  getMonth,
-  getMonthIndex,
-  getDay,
-  getDaysInMonth,
   getBegin,
   getEnd,
-  getISOLocalMonth,
-  getISOLocalDate,
 } from 'react-calendar/dist/shared/dates';

No alert changes

Improved metrics

Total package byte prevSize

184386

increased by0.1%

Number of lines in readme file

163

increased by0.62%

Worsened metrics

Dependency count

11

increased by10%

Number of package files

45

decreased by-2.17%

Lines of code

4703

decreased by-0.55%

Dependency changes

• + Added@wojtekmaj/date-utils@^1.0.0

• + Added@wojtekmaj/date-utils@1.5.1(transitive)