		@@ -6,3 +6,3 @@ "use strict";
		});
		exports.default = void 0;
		exports["default"] = void 0;

		@@ -21,2 +21,4 @@ var _react = _interopRequireWildcard(require("react"));

		var _MonthSelect = _interopRequireDefault(require("./DateInput/MonthSelect"));

		var _YearInput = _interopRequireDefault(require("./DateInput/YearInput"));
		@@ -34,5 +36,5 @@

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

		function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get \|\| desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
		function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get \|\| desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }

		@@ -61,2 +63,4 @@ function _typeof(obj) { 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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

		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); }
		@@ -66,4 +70,2 @@

		function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

		function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
		@@ -183,3 +185,3 @@
		var divider = element && // eslint-disable-next-line react/no-array-index-key
		_react.default.createElement(_Divider.default, {
		_react["default"].createElement(_Divider["default"], {
		key: "separator_".concat(index)
		@@ -220,3 +222,3 @@ }, element);

		_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
		_defineProperty(_assertThisInitialized(_this), "state", {
		year: null,
		@@ -227,3 +229,3 @@ month: null,

		_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onClick", function (event) {
		_defineProperty(_assertThisInitialized(_this), "onClick", function (event) {
		if (event.target === event.currentTarget) {
		@@ -236,3 +238,3 @@ // Wrapper was directly clicked

		_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onKeyDown", function (event) {
		_defineProperty(_assertThisInitialized(_this), "onKeyDown", function (event) {
		switch (event.key) {
		@@ -255,3 +257,28 @@ case 'ArrowLeft':

		_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onChange", function (event) {
		_defineProperty(_assertThisInitialized(_this), "onKeyUp", function (event) {
		var key = event.key,
		input = event.target;
		var isNumberKey = !isNaN(parseInt(key, 10));

		if (!isNumberKey) {
		return;
		}

		var value = input.value;
		var max = parseInt(input.getAttribute('max'), 10);
		/**
		* Given 1, the smallest possible number the user could type by adding another digit is 10.
		* 10 would be a valid value given max = 12, so we won't jump to the next input.
		* However, given 2, smallers possible number would be 20, and thus keeping the focus in
		* this field doesn't make sense.
		*/

		if (value * 10 > max) {
		var property = 'nextElementSibling';
		var nextInput = findInput(input, property);
		focus(nextInput);
		}
		});

		_defineProperty(_assertThisInitialized(_this), "onChange", function (event) {
		var _event$target = event.target,
		@@ -264,3 +291,3 @@ name = _event$target.name,

		_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onChangeNative", function (event) {
		_defineProperty(_assertThisInitialized(_this), "onChangeNative", function (event) {
		var onChange = _this.props.onChange;
		@@ -293,3 +320,3 @@ var value = event.target.value;

		_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onChangeExternal", function () {
		_defineProperty(_assertThisInitialized(_this), "onChangeExternal", function () {
		var onChange = _this.props.onChange;
		@@ -322,4 +349,6 @@

		_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "renderDay", function (currentMatch) {
		var showLeadingZeros = _this.props.showLeadingZeros;
		_defineProperty(_assertThisInitialized(_this), "renderDay", function (currentMatch) {
		var _this$props = _this.props,
		dayAriaLabel = _this$props.dayAriaLabel,
		showLeadingZeros = _this$props.showLeadingZeros;
		var _this$state = _this.state,
		@@ -335,5 +364,6 @@ day = _this$state.day,
		var showLeadingZerosFromFormat = currentMatch && currentMatch.length === 2;
		return _react.default.createElement(_DayInput.default, _extends({
		return _react["default"].createElement(_DayInput["default"], _extends({
		key: "day"
		}, _this.commonInputProps, {
		dayAriaLabel: dayAriaLabel,
		month: month,
		@@ -346,4 +376,7 @@ showLeadingZeros: showLeadingZerosFromFormat \|\| showLeadingZeros,

		_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "renderMonth", function (currentMatch) {
		var showLeadingZeros = _this.props.showLeadingZeros;
		_defineProperty(_assertThisInitialized(_this), "renderMonth", function (currentMatch) {
		var _this$props2 = _this.props,
		locale = _this$props2.locale,
		monthAriaLabel = _this$props2.monthAriaLabel,
		showLeadingZeros = _this$props2.showLeadingZeros;
		var _this$state2 = _this.state,
		@@ -353,10 +386,23 @@ month = _this$state2.month,

		if (currentMatch && currentMatch.length > 2) {
		if (currentMatch && currentMatch.length > 4) {
		throw new Error("Unsupported token: ".concat(currentMatch));
		}

		if (currentMatch.length > 2) {
		return _react["default"].createElement(_MonthSelect["default"], _extends({
		key: "month"
		}, _this.commonInputProps, {
		locale: locale,
		monthAriaLabel: monthAriaLabel,
		"short": currentMatch.length === 3,
		value: month,
		year: year
		}));
		}

		var showLeadingZerosFromFormat = currentMatch && currentMatch.length === 2;
		return _react.default.createElement(_MonthInput.default, _extends({
		return _react["default"].createElement(_MonthInput["default"], _extends({
		key: "month"
		}, _this.commonInputProps, {
		monthAriaLabel: monthAriaLabel,
		showLeadingZeros: showLeadingZerosFromFormat \|\| showLeadingZeros,
		@@ -368,9 +414,11 @@ value: month,

		_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "renderYear", function () {
		_defineProperty(_assertThisInitialized(_this), "renderYear", function () {
		var yearAriaLabel = _this.props.yearAriaLabel;
		var year = _this.state.year;
		return _react.default.createElement(_YearInput.default, _extends({
		return _react["default"].createElement(_YearInput["default"], _extends({
		key: "year"
		}, _this.commonInputProps, {
		value: year,
		valueType: _this.valueType
		valueType: _this.valueType,
		yearAriaLabel: yearAriaLabel
		}));
		@@ -389,7 +437,7 @@ });
		value: function getProcessedValue(value) {
		var _this$props = this.props,
		minDate = _this$props.minDate,
		maxDate = _this$props.maxDate,
		maxDetail = _this$props.maxDetail,
		returnValue = _this$props.returnValue;
		var _this$props3 = this.props,
		minDate = _this$props3.minDate,
		maxDate = _this$props3.maxDate,
		maxDetail = _this$props3.maxDetail,
		returnValue = _this$props3.returnValue;

		@@ -424,10 +472,11 @@ switch (returnValue) {
		value: function renderNativeInput() {
		var _this$props2 = this.props,
		disabled = _this$props2.disabled,
		maxDate = _this$props2.maxDate,
		minDate = _this$props2.minDate,
		name = _this$props2.name,
		required = _this$props2.required;
		var _this$props4 = this.props,
		disabled = _this$props4.disabled,
		maxDate = _this$props4.maxDate,
		minDate = _this$props4.minDate,
		name = _this$props4.name,
		nativeInputAriaLabel = _this$props4.nativeInputAriaLabel,
		required = _this$props4.required;
		var value = this.state.value;
		return _react.default.createElement(_NativeInput.default, {
		return _react["default"].createElement(_NativeInput["default"], {
		key: "date",
		@@ -438,2 +487,3 @@ disabled: disabled,
		name: name,
		nativeInputAriaLabel: nativeInputAriaLabel,
		onChange: this.onChangeNative,
		@@ -449,3 +499,3 @@ required: required,
		var className = this.props.className;
		return _react.default.createElement("div", {
		return _react["default"].createElement("div", {
		className: className,
		@@ -459,5 +509,3 @@ onClick: this.onClick,
		get: function get() {
		var _this$props3 = this.props,
		locale = _this$props3.locale,
		maxDetail = _this$props3.maxDetail;
		var maxDetail = this.props.maxDetail;
		var options = {
		@@ -476,12 +524,12 @@ year: 'numeric'

		return (0, _dateFormatter.getFormatter)(locale, options);
		}
		return (0, _dateFormatter.getFormatter)(options);
		} // eslint-disable-next-line class-methods-use-this

		}, {
		key: "formatNumber",
		get: function get() {
		var locale = this.props.locale;
		var options = {
		useGrouping: false
		};
		return (0, _dateFormatter.getFormatter)(locale, options);
		return (0, _dateFormatter.getFormatter)(options);
		}
		@@ -496,3 +544,5 @@ }, {
		get: function get() {
		var format = this.props.format;
		var _this$props5 = this.props,
		format = _this$props5.format,
		locale = _this$props5.locale;

		@@ -507,3 +557,3 @@ if (format) {
		var date = new Date(year, monthIndex, day);
		return this.formatDate(date).replace(this.formatNumber(year), 'y').replace(this.formatNumber(monthIndex + 1), 'M').replace(this.formatNumber(day), 'd');
		return this.formatDate(locale, date).replace(this.formatNumber(locale, year), 'y').replace(this.formatNumber(locale, monthIndex + 1), 'M').replace(this.formatNumber(locale, day), 'd');
		}
		@@ -515,9 +565,9 @@ }, {

		var _this$props4 = this.props,
		className = _this$props4.className,
		disabled = _this$props4.disabled,
		isCalendarOpen = _this$props4.isCalendarOpen,
		maxDate = _this$props4.maxDate,
		minDate = _this$props4.minDate,
		required = _this$props4.required;
		var _this$props6 = this.props,
		className = _this$props6.className,
		disabled = _this$props6.disabled,
		isCalendarOpen = _this$props6.isCalendarOpen,
		maxDate = _this$props6.maxDate,
		minDate = _this$props6.minDate,
		required = _this$props6.required;
		return {
		@@ -530,2 +580,3 @@ className: className,
		onKeyDown: this.onKeyDown,
		onKeyUp: this.onKeyUp,
		// This is only for showing validity when editing
		@@ -597,3 +648,3 @@ required: required \|\| isCalendarOpen,

		exports.default = DateInput;
		exports["default"] = DateInput;
		DateInput.defaultProps = {
		@@ -605,17 +656,21 @@ maxDetail: 'month',
		DateInput.propTypes = {
		className: _propTypes.default.string.isRequired,
		disabled: _propTypes.default.bool,
		format: _propTypes.default.string,
		isCalendarOpen: _propTypes.default.bool,
		locale: _propTypes.default.string,
		className: _propTypes["default"].string.isRequired,
		dayAriaLabel: _propTypes["default"].string,
		disabled: _propTypes["default"].bool,
		format: _propTypes["default"].string,
		isCalendarOpen: _propTypes["default"].bool,
		locale: _propTypes["default"].string,
		maxDate: _propTypes2.isMaxDate,
		maxDetail: _propTypes.default.oneOf(allViews),
		maxDetail: _propTypes["default"].oneOf(allViews),
		minDate: _propTypes2.isMinDate,
		name: _propTypes.default.string,
		onChange: _propTypes.default.func,
		required: _propTypes.default.bool,
		returnValue: _propTypes.default.oneOf(['start', 'end', 'range']),
		showLeadingZeros: _propTypes.default.bool,
		value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.instanceOf(Date), _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date))])
		monthAriaLabel: _propTypes["default"].string,
		name: _propTypes["default"].string,
		nativeInputAriaLabel: _propTypes["default"].string,
		onChange: _propTypes["default"].func,
		required: _propTypes["default"].bool,
		returnValue: _propTypes["default"].oneOf(['start', 'end', 'range']),
		showLeadingZeros: _propTypes["default"].bool,
		value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].instanceOf(Date), _propTypes["default"].arrayOf(_propTypes["default"].instanceOf(Date))]),
		yearAriaLabel: _propTypes["default"].string
		};
		(0, _reactLifecyclesCompat.polyfill)(DateInput);

131

dist/DateInput/DayInput.js

		@@ -6,5 +6,5 @@ "use strict";
		});
		exports.default = void 0;
		exports["default"] = DayInput;

		var _react = _interopRequireWildcard(require("react"));
		var _react = _interopRequireDefault(require("react"));

		@@ -21,8 +21,4 @@ var _propTypes = _interopRequireDefault(require("prop-types"));

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

		function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get \|\| desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

		function _typeof(obj) { 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 _extends() { _extends = Object.assign \|\| function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
		@@ -34,98 +30,43 @@

		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
		function DayInput(_ref) {
		var dayAriaLabel = _ref.dayAriaLabel,
		maxDate = _ref.maxDate,
		minDate = _ref.minDate,
		month = _ref.month,
		year = _ref.year,
		otherProps = _objectWithoutProperties(_ref, ["dayAriaLabel", "maxDate", "minDate", "month", "year"]);

		function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

		function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

		function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" \|\| typeof call === "function")) { return call; } return _assertThisInitialized(self); }

		function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

		function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ \|\| Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

		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 _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf \|\| function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

		var DayInput =
		/#__PURE__/
		function (_PureComponent) {
		_inherits(DayInput, _PureComponent);

		function DayInput() {
		_classCallCheck(this, DayInput);

		return _possibleConstructorReturn(this, _getPrototypeOf(DayInput).apply(this, arguments));
		}

		_createClass(DayInput, [{
		key: "render",
		value: function render() {
		var maxDay = this.maxDay,
		minDay = this.minDay;

		var _this$props = this.props,
		maxDate = _this$props.maxDate,
		minDate = _this$props.minDate,
		month = _this$props.month,
		year = _this$props.year,
		otherProps = _objectWithoutProperties(_this$props, ["maxDate", "minDate", "month", "year"]);

		return _react.default.createElement(_Input.default, _extends({
		name: "day",
		max: maxDay,
		min: minDay
		}, otherProps));
		var currentMonthMaxDays = function () {
		if (!month) {
		return 31;
		}
		}, {
		key: "currentMonthMaxDays",
		get: function get() {
		var _this$props2 = this.props,
		year = _this$props2.year,
		month = _this$props2.month;

		if (!month) {
		return 31;
		}
		return (0, _dates.getDaysInMonth)(new Date(year, month - 1, 1));
		}();

		return (0, _dates.getDaysInMonth)(new Date(year, month - 1, 1));
		}
		}, {
		key: "maxDay",
		get: function get() {
		var _this$props3 = this.props,
		maxDate = _this$props3.maxDate,
		month = _this$props3.month,
		year = _this$props3.year;
		return (0, _utils.min)(this.currentMonthMaxDays, maxDate && year === (0, _dates.getYear)(maxDate) && month === (0, _dates.getMonth)(maxDate) && (0, _dates.getDay)(maxDate));
		}
		}, {
		key: "minDay",
		get: function get() {
		var _this$props4 = this.props,
		minDate = _this$props4.minDate,
		month = _this$props4.month,
		year = _this$props4.year;
		return (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, _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));
		return _react["default"].createElement(_Input["default"], _extends({
		name: "day",
		ariaLabel: dayAriaLabel,
		max: maxDay,
		min: minDay
		}, otherProps));
		}

		return DayInput;
		}(_react.PureComponent);

		exports.default = DayInput;
		DayInput.propTypes = {
		className: _propTypes.default.string.isRequired,
		disabled: _propTypes.default.bool,
		itemRef: _propTypes.default.func,
		className: _propTypes["default"].string.isRequired,
		dayAriaLabel: _propTypes["default"].string,
		disabled: _propTypes["default"].bool,
		itemRef: _propTypes["default"].func,
		maxDate: _propTypes2.isMaxDate,
		minDate: _propTypes2.isMinDate,
		month: _propTypes.default.number,
		onChange: _propTypes.default.func,
		onKeyDown: _propTypes.default.func,
		required: _propTypes.default.bool,
		showLeadingZeros: _propTypes.default.bool,
		value: _propTypes.default.number,
		year: _propTypes.default.number
		month: _propTypes["default"].number,
		onChange: _propTypes["default"].func,
		onKeyDown: _propTypes["default"].func,
		onKeyUp: _propTypes["default"].func,
		required: _propTypes["default"].bool,
		showLeadingZeros: _propTypes["default"].bool,
		value: _propTypes["default"].number,
		year: _propTypes["default"].number
		};

dist/DateInput/Input.js

		@@ -6,3 +6,3 @@ "use strict";
		});
		exports.default = Input;
		exports["default"] = Input;

		@@ -15,12 +15,19 @@ var _react = _interopRequireDefault(require("react"));

		var _utils = require("../shared/utils");
		var _updateInputWidth = _interopRequireDefault(require("update-input-width"));

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

		var select = function select(element) {
		return element && element.select();
		};
		function select(element) {
		if (!element) {
		return;
		}

		requestAnimationFrame(function () {
		return element.select();
		});
		}

		function Input(_ref) {
		var className = _ref.className,
		var ariaLabel = _ref.ariaLabel,
		className = _ref.className,
		disabled = _ref.disabled,
		@@ -34,2 +41,3 @@ itemRef = _ref.itemRef,
		onKeyDown = _ref.onKeyDown,
		_onKeyUp = _ref.onKeyUp,
		placeholder = _ref.placeholder,
		@@ -41,9 +49,10 @@ required = _ref.required,
		var hasLeadingZero = showLeadingZeros && value !== null && value < 10;
		return [hasLeadingZero && _react.default.createElement("span", {
		return [hasLeadingZero && _react["default"].createElement("span", {
		key: "leadingZero",
		className: "".concat(className, "__leadingZero")
		}, "0"), _react.default.createElement("input", {
		}, "0"), _react["default"].createElement("input", {
		key: "input",
		"aria-label": ariaLabel,
		autoComplete: "off",
		className: (0, _mergeClassNames.default)("".concat(className, "__input"), "".concat(className, "__").concat(nameForClass \|\| name), hasLeadingZero && "".concat(className, "__input--hasLeadingZero")),
		className: (0, _mergeClassNames["default"])("".concat(className, "__input"), "".concat(className, "__").concat(nameForClass \|\| name), hasLeadingZero && "".concat(className, "__input--hasLeadingZero")),
		disabled: disabled,
		@@ -59,3 +68,7 @@ name: name,
		onKeyUp: function onKeyUp(event) {
		return (0, _utils.updateInputWidth)(event.target);
		(0, _updateInputWidth["default"])(event.target);

		if (_onKeyUp) {
		_onKeyUp(event);
		}
		},
		@@ -65,3 +78,3 @@ placeholder: placeholder,
		if (_ref2) {
		(0, _utils.updateInputWidth)(_ref2);
		(0, _updateInputWidth["default"])(_ref2);
		}
		@@ -81,13 +94,14 @@
		Input.propTypes = {
		className: _propTypes.default.string.isRequired,
		disabled: _propTypes.default.bool,
		itemRef: _propTypes.default.func,
		max: _propTypes.default.number,
		min: _propTypes.default.number,
		onChange: _propTypes.default.func,
		onKeyDown: _propTypes.default.func,
		required: _propTypes.default.bool,
		showLeadingZeros: _propTypes.default.bool,
		step: _propTypes.default.number,
		value: _propTypes.default.number
		className: _propTypes["default"].string.isRequired,
		disabled: _propTypes["default"].bool,
		itemRef: _propTypes["default"].func,
		max: _propTypes["default"].number,
		min: _propTypes["default"].number,
		onChange: _propTypes["default"].func,
		onKeyDown: _propTypes["default"].func,
		onKeyUp: _propTypes["default"].func,
		required: _propTypes["default"].bool,
		showLeadingZeros: _propTypes["default"].bool,
		step: _propTypes["default"].number,
		value: _propTypes["default"].number
		};
		@@ -94,0 +108,0 @@ Input.defaultProps = {

110

dist/DateInput/MonthInput.js

		@@ -6,5 +6,5 @@ "use strict";
		});
		exports.default = void 0;
		exports["default"] = MonthInput;

		var _react = _interopRequireWildcard(require("react"));
		var _react = _interopRequireDefault(require("react"));

		@@ -21,8 +21,4 @@ var _propTypes = _interopRequireDefault(require("prop-types"));

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

		function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get \|\| desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

		function _typeof(obj) { 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 _extends() { _extends = Object.assign \|\| function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
		@@ -34,81 +30,33 @@

		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
		function MonthInput(_ref) {
		var maxDate = _ref.maxDate,
		minDate = _ref.minDate,
		monthAriaLabel = _ref.monthAriaLabel,
		year = _ref.year,
		otherProps = _objectWithoutProperties(_ref, ["maxDate", "minDate", "monthAriaLabel", "year"]);

		function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
		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));
		return _react["default"].createElement(_Input["default"], _extends({
		name: "month",
		ariaLabel: monthAriaLabel,
		max: maxMonth,
		min: minMonth
		}, otherProps));
		}

		function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

		function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" \|\| typeof call === "function")) { return call; } return _assertThisInitialized(self); }

		function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

		function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ \|\| Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

		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 _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf \|\| function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

		var MonthInput =
		/#__PURE__/
		function (_PureComponent) {
		_inherits(MonthInput, _PureComponent);

		function MonthInput() {
		_classCallCheck(this, MonthInput);

		return _possibleConstructorReturn(this, _getPrototypeOf(MonthInput).apply(this, arguments));
		}

		_createClass(MonthInput, [{
		key: "render",
		value: function render() {
		var maxMonth = this.maxMonth,
		minMonth = this.minMonth;

		var _this$props = this.props,
		maxDate = _this$props.maxDate,
		minDate = _this$props.minDate,
		year = _this$props.year,
		otherProps = _objectWithoutProperties(_this$props, ["maxDate", "minDate", "year"]);

		return _react.default.createElement(_Input.default, _extends({
		name: "month",
		max: maxMonth,
		min: minMonth
		}, otherProps));
		}
		}, {
		key: "maxMonth",
		get: function get() {
		var _this$props2 = this.props,
		maxDate = _this$props2.maxDate,
		year = _this$props2.year;
		return (0, _utils.min)(12, maxDate && year === (0, _dates.getYear)(maxDate) && (0, _dates.getMonth)(maxDate));
		}
		}, {
		key: "minMonth",
		get: function get() {
		var _this$props3 = this.props,
		minDate = _this$props3.minDate,
		year = _this$props3.year;
		return (0, _utils.max)(1, minDate && year === (0, _dates.getYear)(minDate) && (0, _dates.getMonth)(minDate));
		}
		}]);

		return MonthInput;
		}(_react.PureComponent);

		exports.default = MonthInput;
		MonthInput.propTypes = {
		className: _propTypes.default.string.isRequired,
		disabled: _propTypes.default.bool,
		itemRef: _propTypes.default.func,
		className: _propTypes["default"].string.isRequired,
		disabled: _propTypes["default"].bool,
		itemRef: _propTypes["default"].func,
		maxDate: _propTypes2.isMaxDate,
		minDate: _propTypes2.isMinDate,
		onChange: _propTypes.default.func,
		onKeyDown: _propTypes.default.func,
		required: _propTypes.default.bool,
		showLeadingZeros: _propTypes.default.bool,
		value: _propTypes.default.number,
		year: _propTypes.default.number
		monthAriaLabel: _propTypes["default"].string,
		onChange: _propTypes["default"].func,
		onKeyDown: _propTypes["default"].func,
		onKeyUp: _propTypes["default"].func,
		required: _propTypes["default"].bool,
		showLeadingZeros: _propTypes["default"].bool,
		value: _propTypes["default"].number,
		year: _propTypes["default"].number
		};

185

dist/DateInput/NativeInput.js

		@@ -6,5 +6,5 @@ "use strict";
		});
		exports.default = void 0;
		exports["default"] = NativeInput;

		var _react = _interopRequireWildcard(require("react"));
		var _react = _interopRequireDefault(require("react"));

		@@ -17,137 +17,84 @@ var _propTypes = _interopRequireDefault(require("prop-types"));

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

		function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get \|\| desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
		function NativeInput(_ref) {
		var disabled = _ref.disabled,
		maxDate = _ref.maxDate,
		minDate = _ref.minDate,
		name = _ref.name,
		nativeInputAriaLabel = _ref.nativeInputAriaLabel,
		onChange = _ref.onChange,
		required = _ref.required,
		value = _ref.value,
		valueType = _ref.valueType;

		function _typeof(obj) { 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); }
		var nativeInputType = function () {
		switch (valueType) {
		case 'decade':
		case 'year':
		return 'number';

		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
		case 'month':
		return 'month';

		function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
		case 'day':
		return 'date';

		function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
		default:
		throw new Error('Invalid valueType.');
		}
		}();

		function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" \|\| typeof call === "function")) { return call; } return _assertThisInitialized(self); }
		var nativeValueParser = function () {
		switch (valueType) {
		case 'century':
		case 'decade':
		case 'year':
		return _dates.getYear;

		function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ \|\| Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
		case 'month':
		return _dates.getISOLocalMonth;

		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); }
		case 'day':
		return _dates.getISOLocalDate;

		function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf \|\| function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

		function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

		function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

		var NativeInput =
		/#__PURE__/
		function (_PureComponent) {
		_inherits(NativeInput, _PureComponent);

		function NativeInput() {
		var _getPrototypeOf2;

		var _this;

		_classCallCheck(this, NativeInput);

		for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
		args[_key] = arguments[_key];
		default:
		throw new Error('Invalid valueType.');
		}
		}();

		_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(NativeInput)).call.apply(_getPrototypeOf2, [this].concat(args)));

		_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "stopPropagation", function (event) {
		return event.stopPropagation();
		});

		return _this;
		function stopPropagation(event) {
		event.stopPropagation();
		}

		_createClass(NativeInput, [{
		key: "render",
		value: function render() {
		var nativeValueParser = this.nativeValueParser;
		var _this$props = this.props,
		disabled = _this$props.disabled,
		maxDate = _this$props.maxDate,
		minDate = _this$props.minDate,
		name = _this$props.name,
		onChange = _this$props.onChange,
		required = _this$props.required,
		value = _this$props.value;
		return _react.default.createElement("input", {
		type: this.nativeInputType,
		disabled: disabled,
		max: maxDate ? nativeValueParser(maxDate) : null,
		min: minDate ? nativeValueParser(minDate) : null,
		name: name,
		onChange: onChange,
		onFocus: this.stopPropagation,
		required: required,
		style: {
		visibility: 'hidden',
		position: 'absolute',
		top: '-9999px',
		left: '-9999px'
		},
		value: value ? nativeValueParser(value) : ''
		});
		}
		}, {
		key: "nativeInputType",
		get: function get() {
		var valueType = this.props.valueType;
		return _react["default"].createElement("input", {
		type: nativeInputType,
		"aria-label": nativeInputAriaLabel,
		disabled: disabled,
		max: maxDate ? nativeValueParser(maxDate) : null,
		min: minDate ? nativeValueParser(minDate) : null,
		name: name,
		onChange: onChange,
		onFocus: stopPropagation,
		required: required,
		style: {
		visibility: 'hidden',
		position: 'absolute',
		top: '-9999px',
		left: '-9999px'
		},
		value: value ? nativeValueParser(value) : ''
		});
		}

		switch (valueType) {
		case 'decade':
		case 'year':
		return 'number';

		case 'month':
		return 'month';

		case 'day':
		return 'date';

		default:
		throw new Error('Invalid valueType.');
		}
		}
		}, {
		key: "nativeValueParser",
		get: function get() {
		var valueType = this.props.valueType;

		switch (valueType) {
		case 'century':
		case 'decade':
		case 'year':
		return _dates.getYear;

		case 'month':
		return _dates.getISOLocalMonth;

		case 'day':
		return _dates.getISOLocalDate;

		default:
		throw new Error('Invalid valueType.');
		}
		}
		}]);

		return NativeInput;
		}(_react.PureComponent);

		exports.default = NativeInput;
		NativeInput.propTypes = {
		disabled: _propTypes.default.bool,
		disabled: _propTypes["default"].bool,
		maxDate: _propTypes2.isMaxDate,
		minDate: _propTypes2.isMinDate,
		name: _propTypes.default.string,
		onChange: _propTypes.default.func,
		required: _propTypes.default.bool,
		value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.instanceOf(Date)]),
		name: _propTypes["default"].string,
		nativeInputAriaLabel: _propTypes["default"].string,
		onChange: _propTypes["default"].func,
		required: _propTypes["default"].bool,
		value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].instanceOf(Date)]),
		valueType: _propTypes2.isValueType
		};

121

dist/DateInput/YearInput.js

		@@ -6,5 +6,5 @@ "use strict";
		});
		exports.default = void 0;
		exports["default"] = YearInput;

		var _react = _interopRequireWildcard(require("react"));
		var _react = _interopRequireDefault(require("react"));

		@@ -21,8 +21,4 @@ var _propTypes = _interopRequireDefault(require("prop-types"));

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

		function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get \|\| desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

		function _typeof(obj) { 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 _extends() { _extends = Object.assign \|\| function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
		@@ -34,90 +30,43 @@

		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
		function YearInput(_ref) {
		var maxDate = _ref.maxDate,
		minDate = _ref.minDate,
		valueType = _ref.valueType,
		yearAriaLabel = _ref.yearAriaLabel,
		otherProps = _objectWithoutProperties(_ref, ["maxDate", "minDate", "valueType", "yearAriaLabel"]);

		function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
		var maxYear = (0, _utils.min)(275760, maxDate && (0, _dates.getYear)(maxDate));
		var minYear = (0, _utils.max)(1000, minDate && (0, _dates.getYear)(minDate));

		function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

		function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" \|\| typeof call === "function")) { return call; } return _assertThisInitialized(self); }

		function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

		function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ \|\| Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

		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 _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf \|\| function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

		var YearInput =
		/#__PURE__/
		function (_PureComponent) {
		_inherits(YearInput, _PureComponent);

		function YearInput() {
		_classCallCheck(this, YearInput);

		return _possibleConstructorReturn(this, _getPrototypeOf(YearInput).apply(this, arguments));
		}

		_createClass(YearInput, [{
		key: "render",
		value: function render() {
		var maxYear = this.maxYear,
		minYear = this.minYear,
		yearStep = this.yearStep;

		var _this$props = this.props,
		maxDate = _this$props.maxDate,
		minDate = _this$props.minDate,
		valueType = _this$props.valueType,
		otherProps = _objectWithoutProperties(_this$props, ["maxDate", "minDate", "valueType"]);

		return _react.default.createElement(_Input.default, _extends({
		name: "year",
		max: maxYear,
		min: minYear,
		placeholder: "----",
		step: yearStep
		}, otherProps));
		var yearStep = function () {
		if (valueType === 'century') {
		return 10;
		}
		}, {
		key: "maxYear",
		get: function get() {
		var maxDate = this.props.maxDate;
		return (0, _utils.min)(275760, maxDate && (0, _dates.getYear)(maxDate));
		}
		}, {
		key: "minYear",
		get: function get() {
		var minDate = this.props.minDate;
		return (0, _utils.max)(1000, minDate && (0, _dates.getYear)(minDate));
		}
		}, {
		key: "yearStep",
		get: function get() {
		var valueType = this.props.valueType;

		if (valueType === 'century') {
		return 10;
		}
		return 1;
		}();

		return 1;
		}
		}]);
		return _react["default"].createElement(_Input["default"], _extends({
		name: "year",
		ariaLabel: yearAriaLabel,
		max: maxYear,
		min: minYear,
		placeholder: "----",
		step: yearStep
		}, otherProps));
		}

		return YearInput;
		}(_react.PureComponent);

		exports.default = YearInput;
		YearInput.propTypes = {
		className: _propTypes.default.string.isRequired,
		disabled: _propTypes.default.bool,
		itemRef: _propTypes.default.func,
		className: _propTypes["default"].string.isRequired,
		disabled: _propTypes["default"].bool,
		itemRef: _propTypes["default"].func,
		maxDate: _propTypes2.isMaxDate,
		minDate: _propTypes2.isMinDate,
		onChange: _propTypes.default.func,
		onKeyDown: _propTypes.default.func,
		required: _propTypes.default.bool,
		value: _propTypes.default.number,
		valueType: _propTypes2.isValueType
		onChange: _propTypes["default"].func,
		onKeyDown: _propTypes["default"].func,
		onKeyUp: _propTypes["default"].func,
		required: _propTypes["default"].bool,
		value: _propTypes["default"].number,
		valueType: _propTypes2.isValueType,
		yearAriaLabel: _propTypes["default"].string
		};

172

dist/DatePicker.js

		@@ -6,3 +6,3 @@ "use strict";
		});
		exports.default = void 0;
		exports["default"] = void 0;

		@@ -27,7 +27,7 @@ var _react = _interopRequireWildcard(require("react"));

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

		function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get \|\| desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

		function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
		function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { if (i % 2) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } else { Object.defineProperties(target, Object.getOwnPropertyDescriptors(arguments[i])); } } return target; }

		@@ -60,2 +60,4 @@ function _typeof(obj) { 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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

		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); }
		@@ -65,7 +67,6 @@

		function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

		function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

		var baseClassName = 'react-date-picker';
		var outsideActionEvents = ['mousedown', 'focusin', 'touchstart'];

		@@ -90,5 +91,5 @@ var DatePicker =

		_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {});
		_defineProperty(_assertThisInitialized(_this), "state", {});

		_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onOutsideAction", function (event) {
		_defineProperty(_assertThisInitialized(_this), "onOutsideAction", function (event) {
		if (_this.wrapper && !_this.wrapper.contains(event.target)) {
		@@ -99,3 +100,3 @@ _this.closeCalendar();

		_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "openCalendar", function () {
		_defineProperty(_assertThisInitialized(_this), "openCalendar", function () {
		_this.setState({
		@@ -106,3 +107,3 @@ isOpen: true

		_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "closeCalendar", function () {
		_defineProperty(_assertThisInitialized(_this), "closeCalendar", function () {
		_this.setState(function (prevState) {
		@@ -119,3 +120,3 @@ if (!prevState.isOpen) {

		_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "toggleCalendar", function () {
		_defineProperty(_assertThisInitialized(_this), "toggleCalendar", function () {
		_this.setState(function (prevState) {
		@@ -128,3 +129,3 @@ return {

		_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onChange", function (value) {
		_defineProperty(_assertThisInitialized(_this), "onChange", function (value) {
		var closeCalendar = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
		@@ -143,3 +144,3 @@

		_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onFocus", function (event) {
		_defineProperty(_assertThisInitialized(_this), "onFocus", function (event) {
		var _this$props = _this.props,
		@@ -161,7 +162,7 @@ disabled = _this$props.disabled,

		_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "stopPropagation", function (event) {
		_defineProperty(_assertThisInitialized(_this), "stopPropagation", function (event) {
		return event.stopPropagation();
		});

		_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "clear", function () {
		_defineProperty(_assertThisInitialized(_this), "clear", function () {
		return _this.onChange(null);
		@@ -176,4 +177,3 @@ });
		value: function componentDidMount() {
		document.addEventListener('mousedown', this.onOutsideAction);
		document.addEventListener('focusin', this.onOutsideAction);
		this.handleOutsideActionListeners();
		}
		@@ -189,2 +189,3 @@ }, {
		if (isOpen !== prevState.isOpen) {
		this.handleOutsideActionListeners();
		(0, _utils.callIfDefined)(isOpen ? onCalendarOpen : onCalendarClose);
		@@ -196,11 +197,25 @@ }
		value: function componentWillUnmount() {
		document.removeEventListener('mousedown', this.onOutsideAction);
		document.removeEventListener('focusin', this.onOutsideAction);
		this.handleOutsideActionListeners(false);
		}
		}, {
		key: "handleOutsideActionListeners",
		value: function handleOutsideActionListeners(shouldListen) {
		var _this2 = this;

		var isOpen = this.state.isOpen;
		var shouldListenWithFallback = typeof shouldListen !== 'undefined' ? shouldListen : isOpen;
		var fnName = shouldListenWithFallback ? 'addEventListener' : 'removeEventListener';
		outsideActionEvents.forEach(function (eventName) {
		return document[fnName](eventName, _this2.onOutsideAction);
		});
		}
		}, {
		key: "renderInputs",
		value: function renderInputs() {
		var _this$props3 = this.props,
		calendarAriaLabel = _this$props3.calendarAriaLabel,
		calendarIcon = _this$props3.calendarIcon,
		clearAriaLabel = _this$props3.clearAriaLabel,
		clearIcon = _this$props3.clearIcon,
		dayAriaLabel = _this$props3.dayAriaLabel,
		disabled = _this$props3.disabled,
		@@ -212,7 +227,10 @@ format = _this$props3.format,
		minDate = _this$props3.minDate,
		monthAriaLabel = _this$props3.monthAriaLabel,
		name = _this$props3.name,
		nativeInputAriaLabel = _this$props3.nativeInputAriaLabel,
		required = _this$props3.required,
		returnValue = _this$props3.returnValue,
		required = _this$props3.required,
		showLeadingZeros = _this$props3.showLeadingZeros,
		value = _this$props3.value;
		value = _this$props3.value,
		yearAriaLabel = _this$props3.yearAriaLabel;
		var isOpen = this.state.isOpen;
		@@ -224,20 +242,25 @@

		return _react.default.createElement("div", {
		return _react["default"].createElement("div", {
		className: "".concat(baseClassName, "__wrapper")
		}, _react.default.createElement(_DateInput.default, {
		}, _react["default"].createElement(_DateInput["default"], {
		className: "".concat(baseClassName, "__inputGroup"),
		dayAriaLabel: dayAriaLabel,
		disabled: disabled,
		format: format,
		isCalendarOpen: isOpen,
		locale: locale,
		isCalendarOpen: isOpen,
		maxDate: maxDate,
		maxDetail: maxDetail,
		minDate: minDate,
		monthAriaLabel: monthAriaLabel,
		name: name,
		nativeInputAriaLabel: nativeInputAriaLabel,
		onChange: this.onChange,
		required: required,
		returnValue: returnValue,
		required: required,
		showLeadingZeros: showLeadingZeros,
		value: valueFrom
		}), clearIcon !== null && _react.default.createElement("button", {
		value: valueFrom,
		yearAriaLabel: yearAriaLabel
		}), clearIcon !== null && _react["default"].createElement("button", {
		"aria-label": clearAriaLabel,
		className: "".concat(baseClassName, "__clear-button ").concat(baseClassName, "__button"),
		@@ -248,3 +271,4 @@ disabled: disabled,
		type: "button"
		}, clearIcon), calendarIcon !== null && _react.default.createElement("button", {
		}, clearIcon), calendarIcon !== null && _react["default"].createElement("button", {
		"aria-label": calendarAriaLabel,
		className: "".concat(baseClassName, "__calendar-button ").concat(baseClassName, "__button"),
		@@ -275,5 +299,5 @@ disabled: disabled,
		var className = "".concat(baseClassName, "__calendar");
		return _react.default.createElement(_reactFit.default, null, _react.default.createElement("div", {
		className: (0, _mergeClassNames.default)(className, "".concat(className, "--").concat(isOpen ? 'open' : 'closed'))
		}, _react.default.createElement(_entry.default, _extends({
		return _react["default"].createElement(_reactFit["default"], null, _react["default"].createElement("div", {
		className: (0, _mergeClassNames["default"])(className, "".concat(className, "--").concat(isOpen ? 'open' : 'closed'))
		}, _react["default"].createElement(_entry["default"], _extends({
		className: calendarClassName,
		@@ -287,3 +311,3 @@ onChange: this.onChange,
		value: function render() {
		var _this2 = this;
		var _this3 = this;

		@@ -294,4 +318,4 @@ var _this$props5 = this.props,
		var isOpen = this.state.isOpen;
		return _react.default.createElement("div", _extends({
		className: (0, _mergeClassNames.default)(baseClassName, "".concat(baseClassName, "--").concat(isOpen ? 'open' : 'closed'), "".concat(baseClassName, "--").concat(disabled ? 'disabled' : 'enabled'), className)
		return _react["default"].createElement("div", _extends({
		className: (0, _mergeClassNames["default"])(baseClassName, "".concat(baseClassName, "--").concat(isOpen ? 'open' : 'closed'), "".concat(baseClassName, "--").concat(disabled ? 'disabled' : 'enabled'), className)
		}, this.eventProps, {
		@@ -304,3 +328,3 @@ onFocus: this.onFocus,

		_this2.wrapper = _ref;
		_this3.wrapper = _ref;
		}
		@@ -312,3 +336,3 @@ }), this.renderInputs(), this.renderCalendar());
		get: function get() {
		return (0, _makeEventProps.default)(this.props);
		return (0, _makeEventProps["default"])(this.props);
		}
		@@ -332,13 +356,15 @@ }], [{

		exports.default = DatePicker;
		exports["default"] = DatePicker;
		var iconProps = {
		xmlns: 'http://www.w3.org/2000/svg',
		width: 19,
		height: 19,
		viewBox: '0 0 19 19',
		stroke: 'black',
		strokeWidth: 2
		};

		var CalendarIcon = _react.default.createElement("svg", {
		xmlns: "http://www.w3.org/2000/svg",
		width: "19",
		height: "19",
		viewBox: "0 0 19 19"
		}, _react.default.createElement("g", {
		stroke: "black",
		strokeWidth: "2"
		}, _react.default.createElement("rect", {
		var CalendarIcon = _react["default"].createElement("svg", _extends({}, iconProps, {
		className: "".concat(baseClassName, "__calendar-button__icon ").concat(baseClassName, "__button__icon")
		}), _react["default"].createElement("rect", {
		width: "15",
		@@ -349,3 +375,3 @@ height: "15",
		fill: "none"
		}), _react.default.createElement("line", {
		}), _react["default"].createElement("line", {
		x1: "6",
		@@ -355,3 +381,3 @@ y1: "0",
		y2: "4"
		}), _react.default.createElement("line", {
		}), _react["default"].createElement("line", {
		x1: "13",
		@@ -361,13 +387,7 @@ y1: "0",
		y2: "4"
		})));
		}));

		var ClearIcon = _react.default.createElement("svg", {
		xmlns: "http://www.w3.org/2000/svg",
		width: "19",
		height: "19",
		viewBox: "0 0 19 19"
		}, _react.default.createElement("g", {
		stroke: "black",
		strokeWidth: "2"
		}, _react.default.createElement("line", {
		var ClearIcon = _react["default"].createElement("svg", _extends({}, iconProps, {
		className: "".concat(baseClassName, "__clear-button__icon ").concat(baseClassName, "__button__icon")
		}), _react["default"].createElement("line", {
		x1: "4",
		@@ -377,3 +397,3 @@ y1: "4",
		y2: "15"
		}), _react.default.createElement("line", {
		}), _react["default"].createElement("line", {
		x1: "15",
		@@ -383,3 +403,3 @@ y1: "4",
		y2: "15"
		})));
		}));

		@@ -392,17 +412,23 @@ DatePicker.defaultProps = {
		};
		DatePicker.propTypes = _objectSpread({}, _entry.default.propTypes, {
		calendarClassName: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
		calendarIcon: _propTypes.default.node,
		className: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
		clearIcon: _propTypes.default.node,
		disabled: _propTypes.default.bool,
		format: _propTypes.default.string,
		isOpen: _propTypes.default.bool,
		name: _propTypes.default.string,
		onCalendarClose: _propTypes.default.func,
		onCalendarOpen: _propTypes.default.func,
		required: _propTypes.default.bool,
		returnValue: _propTypes.default.oneOf(['start', 'end', 'range']),
		showLeadingZeros: _propTypes.default.bool
		DatePicker.propTypes = _objectSpread({}, _entry["default"].propTypes, {
		calendarAriaLabel: _propTypes["default"].string,
		calendarClassName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string)]),
		calendarIcon: _propTypes["default"].node,
		className: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string)]),
		clearAriaLabel: _propTypes["default"].string,
		clearIcon: _propTypes["default"].node,
		dayAriaLabel: _propTypes["default"].string,
		disabled: _propTypes["default"].bool,
		format: _propTypes["default"].string,
		isOpen: _propTypes["default"].bool,
		monthAriaLabel: _propTypes["default"].string,
		name: _propTypes["default"].string,
		nativeInputAriaLabel: _propTypes["default"].string,
		onCalendarClose: _propTypes["default"].func,
		onCalendarOpen: _propTypes["default"].func,
		required: _propTypes["default"].bool,
		returnValue: _propTypes["default"].oneOf(['start', 'end', 'range']),
		showLeadingZeros: _propTypes["default"].bool,
		yearAriaLabel: _propTypes["default"].string
		});
		(0, _reactLifecyclesCompat.polyfill)(DatePicker);

dist/Divider.js

		@@ -6,3 +6,3 @@ "use strict";
		});
		exports.default = Divider;
		exports["default"] = Divider;

		@@ -13,7 +13,7 @@ var _react = _interopRequireDefault(require("react"));

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

		function Divider(_ref) {
		var children = _ref.children;
		return _react.default.createElement("span", {
		return _react["default"].createElement("span", {
		className: "react-date-picker__inputGroup__divider"
		@@ -24,3 +24,3 @@ }, children);
		Divider.propTypes = {
		children: _propTypes.default.node
		children: _propTypes["default"].node
		};

dist/entry.js

		@@ -6,3 +6,3 @@ "use strict";
		});
		exports.default = void 0;
		exports["default"] = void 0;

		@@ -15,7 +15,7 @@ require("react-calendar/dist/Calendar.css");

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

		// File is created during build phase and placed in dist directory
		// eslint-disable-next-line import/no-unresolved
		var _default = _DatePicker.default;
		exports.default = _default;
		var _default = _DatePicker["default"];
		exports["default"] = _default;

dist/entry.nostyle.js

		@@ -6,9 +6,9 @@ "use strict";
		});
		exports.default = void 0;
		exports["default"] = void 0;

		var _DatePicker = _interopRequireDefault(require("./DatePicker"));

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

		var _default = _DatePicker.default;
		exports.default = _default;
		var _default = _DatePicker["default"];
		exports["default"] = _default;

dist/shared/dateFormatter.js

		@@ -6,38 +6,47 @@ "use strict";
		});
		exports.getFormatter = void 0;
		exports.formatShortMonth = exports.formatMonth = exports.getFormatter = void 0;

		var _getUserLocale = _interopRequireDefault(require("get-user-locale"));

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

		var formatterCache = {};
		/* eslint-disable import/prefer-default-export */

		var getFormatter = function getFormatter(options) {
		return function (locale, date) {
		return date.toLocaleString(locale \|\| (0, _getUserLocale["default"])(), options);
		};
		};
		/**
		* Gets Intl-based date formatter from formatter cache. If it doesn't exist in cache
		* just yet, it will be created on the fly.
		* Changes the hour in a Date to ensure right date formatting even if DST is messed up.
		* Workaround for bug in WebKit and Firefox with historical dates.
		* For more details, see:
		* https://bugs.chromium.org/p/chromium/issues/detail?id=750465
		* https://bugzilla.mozilla.org/show_bug.cgi?id=1385643
		*
		* @param {Date} date Date.
		*/

		var getFormatter = function getFormatter(locale, options) {
		if (!locale) {
		// Default parameter is not enough as it does not protect us from null values
		// eslint-disable-next-line no-param-reassign
		locale = (0, _getUserLocale.default)();
		}

		var stringifiedOptions = JSON.stringify(options);
		exports.getFormatter = getFormatter;

		if (!formatterCache[locale]) {
		formatterCache[locale] = {};
		}
		var toSafeHour = function toSafeHour(date) {
		var safeDate = new Date(date);
		return new Date(safeDate.setHours(12));
		};

		if (!formatterCache[locale][stringifiedOptions]) {
		formatterCache[locale][stringifiedOptions] = function (n) {
		return n.toLocaleString(locale, options);
		};
		}
		var getSafeFormatter = function getSafeFormatter(options) {
		return function (locale, date) {
		return getFormatter(options)(locale, toSafeHour(date));
		};
		};

		return formatterCache[locale][stringifiedOptions];
		var formatMonthOptions = {
		month: 'long'
		};

		exports.getFormatter = getFormatter;
		var formatShortMonthOptions = {
		month: 'short'
		};
		var formatMonth = getSafeFormatter(formatMonthOptions);
		exports.formatMonth = formatMonth;
		var formatShortMonth = getSafeFormatter(formatShortMonthOptions);
		exports.formatShortMonth = formatShortMonth;

dist/shared/propTypes.js

		@@ -24,3 +24,3 @@ "use strict";

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

		@@ -38,4 +38,4 @@ function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) \|\| _iterableToArray(arr) \|\| _nonIterableSpread(); }

		var isValueType = _propTypes.default.oneOf(allValueTypes);
		var isValueType = _propTypes["default"].oneOf(allValueTypes);

		exports.isValueType = isValueType;

dist/shared/utils.js

		@@ -18,3 +18,3 @@ "use strict";
		});
		exports.updateInputWidth = exports.max = exports.min = void 0;
		exports.max = exports.min = void 0;

		@@ -53,17 +53,2 @@ var _utils = require("react-calendar/dist/shared/utils");

		exports.max = max;

		var updateInputWidth = function updateInputWidth(element) {
		var span = document.createElement('span');
		span.innerHTML = element.value \|\| element.placeholder;
		var container = element.parentElement;
		container.appendChild(span);

		var _span$getBoundingClie = span.getBoundingClientRect(),
		width = _span$getBoundingClie.width;

		element.style.width = "".concat(Math.ceil(width), "px");
		container.removeChild(span);
		};

		exports.updateInputWidth = updateInputWidth;
		exports.max = max;

index.d.ts

		@@ -12,2 +12,3 @@ import { CalendarProps } from "react-calendar";
		disabled?: boolean;
		format?: string;
		isOpen?: boolean;
		@@ -14,0 +15,0 @@ name?: string;

package.json

		{
		"name": "react-date-picker",
		"version": "7.5.1",
		"version": "7.6.0",
		"description": "A date picker for your React app.",
		@@ -9,3 +9,3 @@ "main": "dist/entry.js",
		"scripts": {
		"build": "yarn run build-js && yarn run copy-styles && yarn run build-styles && yarn run copy-types",
		"build": "yarn build-js && yarn copy-styles && yarn build-styles && yarn copy-types",
		"build-js": "babel src -d dist --ignore **/__tests__",
		@@ -16,7 +16,7 @@ "build-styles": "lessc ./dist/DatePicker.less ./dist/DatePicker.css",
		"copy-types": "node ./copy-types.js",
		"prepublishOnly": "yarn run clean && yarn run build",
		"test": "yarn run test-eslint && yarn run test-jest",
		"test-eslint": "eslint sample/ src/ test/ --ext .jsx,.js",
		"test-jest": "jest",
		"test-jest-coverage": "jest --coverage"
		"jest": "jest",
		"jest-coverage": "jest --coverage",
		"lint": "eslint sample/ src/ test/ --ext .jsx,.js",
		"prepublishOnly": "yarn clean && yarn build",
		"test": "yarn lint && yarn jest"
		},
		@@ -80,20 +80,21 @@ "jest": {
		"react-fit": "^1.0.3",
		"react-lifecycles-compat": "^3.0.4"
		"react-lifecycles-compat": "^3.0.4",
		"update-input-width": "^1.0.1"
		},
		"devDependencies": {
		"@babel/cli": "^7.1.0",
		"@babel/core": "^7.1.0",
		"@babel/plugin-proposal-class-properties": "^7.1.0",
		"@babel/preset-env": "^7.1.0",
		"@babel/cli": "^7.5.0",
		"@babel/core": "^7.5.0",
		"@babel/plugin-proposal-class-properties": "^7.5.0",
		"@babel/preset-env": "^7.5.0",
		"@babel/preset-react": "^7.0.0",
		"babel-eslint": "^10.0.0",
		"babel-jest": "^24.0.0",
		"enzyme": "^3.8.0",
		"enzyme-adapter-react-16": "^1.7.1",
		"eslint": "^5.11.0",
		"enzyme": "^3.10.0",
		"enzyme-adapter-react-16": "^1.14.0",
		"eslint": "^5.16.0",
		"eslint-config-airbnb": "^17.1.0",
		"eslint-plugin-import": "^2.14.0",
		"eslint-plugin-jsx-a11y": "^6.1.1",
		"eslint-plugin-react": "^7.11.1",
		"jest": "^24.0.0",
		"eslint-plugin-import": "^2.18.0",
		"eslint-plugin-jsx-a11y": "^6.2.1",
		"eslint-plugin-react": "^7.14.2",
		"jest": "^24.8.0",
		"less": "^3.8.1",
		@@ -100,0 +101,0 @@ "react": "^16.7.0",

README.md

		@@ -11,10 +11,2 @@ [![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)

		## Important message for React-Date-Picker ≤5 users

		Sadly, the authors of original React-Date-Picker ≤5 have abandoned the package. Because it lacked compatibility with React 16, the package would quickly become dead.

		In version 6 I aim to provide a solution that will suit everyone's needs. To make that happen, I need time and your help. Please don't hesitate to file an issues with bugs, suggestions, or simply telling me more about how you use react-date-picker. Your help will be invaluable!

		[Upgrade guide for React-Date-Picker ≤5 users](https://github.com/wojtekmaj/react-date-picker/wiki/Upgrade-guide-for-React-Date-Picker-≤5-users) is there to help you with the upgrade.

		## tl;dr
		@@ -96,24 +88,30 @@ * Install by executing `npm install react-date-picker` or `yarn add react-date-picker`.

		\|Prop name\|Description\|Example values\|
		\|----\|----\|----\|
		\|calendarClassName\|Defines class name(s) that will be added along with "react-calendar" to the main React-Calendar `<div>` element.\|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>\|
		\|calendarIcon\|Defines the content of the calendar button. Setting the value explicitly to `null` will hide the icon.\|<ul><li>String: `"Calendar"`</li><li>React element: `<CalendarIcon />`</li></ul>\|
		\|className\|Defines class name(s) that will be added along with "react-date-picker" to the main React-Date-Picker `<div>` element.\|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>\|
		\|clearIcon\|Defines the content of the clear button. Setting the value explicitly to `null` will hide the icon.\|<ul><li>String: `"Clear"`</li><li>React element: `<ClearIcon />`</li></ul>\|
		\|disabled\|Defines whether the date picker should be disabled. Defaults to false.\|`true`\|
		\|format\|Defines 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`, `d`, `dd`.\|`"y-MM-dd"`\|
		\|isOpen\|Defines whether the calendar should be opened. Defaults to false.\|`true`\|
		\|locale\|Defines which locale should be used by the date picker and the calendar. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag). Defaults to user's browser settings.\|`"hu-HU"`\|
		\|maxDate\|Defines 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.\|Date: `new Date()`\|
		\|maxDetail\|Defines 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". Defaults to "month".\|`"month"`\|
		\|minDate\|Defines 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.\|Date: `new Date()`\|
		\|minDetail\|Defines the least detailed calendar view that the user shall see. Can be "month", "year", "decade" or "century". Defaults to "century".\|`"century"`\|
		\|name\|Defines input name. Defaults to "date".\|`"myCustomName"`\|
		\|onCalendarClose\|Function called when the calendar closes.\|`() => alert('Calendar closed')`\|
		\|onCalendarOpen\|Function called when the calendar opens.\|`() => alert('Calendar opened')`\|
		\|onChange\|Function called when the user clicks an item on the most detailed view available.\|`(value) => alert('New date is: ', value)`\|
		\|returnValue\|Defines 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. Defaults to "start".\|`"range"`\|
		\|required\|Defines whether date input should be required. Defaults to false.\|`true`\|
		\|showLeadingZeros\|Defines whether leading zeros should be rendered in date inputs. Defaults to false.\|`true`\|
		\|value\|Defines the value of the input.\|<ul><li>Date: `new Date()`</li><li>An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`</li></ul>\|
		\|Prop name\|Description\|Default value\|Example values\|
		\|----\|----\|----\|----\|
		\|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>\|
		\|dayAriaLabel\|`aria-label` for the day input.\|n/a\|`"Year"`\|
		\|disabled\|Whether the date picker should be disabled.\|`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"`\|
		\|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)`\|
		\|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"`\|

		@@ -120,0 +118,0 @@ ### Calendar

src/__tests__/DateInput.jsx

		@@ -354,6 +354,4 @@ import React from 'react';

		it('throws error for "MMM"', () => {
		muteConsole();

		const renderComponent = () => mount(
		it('renders "MMM" properly', () => {
		const component = mount(
		<DateInput
		@@ -365,7 +363,26 @@ {...defaultProps}

		expect(renderComponent).toThrow('Unsupported token: MMM');
		const componentSelect = component.find('MonthSelect');
		const customInputs = component.find('select');

		restoreConsole();
		expect(componentSelect).toHaveLength(1);
		expect(componentSelect.prop('short')).toBeTruthy();
		expect(customInputs).toHaveLength(1);
		});

		it('renders "MMMM" properly', () => {
		const component = mount(
		<DateInput
		{...defaultProps}
		format="MMMM"
		/>
		);

		const componentSelect = component.find('MonthSelect');
		const customInputs = component.find('select');

		expect(componentSelect).toHaveLength(1);
		expect(componentSelect.prop('short')).toBeFalsy();
		expect(customInputs).toHaveLength(1);
		});

		it('renders "d" properly', () => {
		@@ -555,2 +572,35 @@ const component = mount(

		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} />
		);

		const customInputs = component.find('input[type="number"]');
		const dayInput = customInputs.at(0);
		const monthInput = customInputs.at(1);

		dayInput.getDOMNode().focus();
		dayInput.getDOMNode().value = '4';

		dayInput.simulate('keyup', { target: dayInput.getDOMNode(), key: '4' });

		expect(document.activeElement).toBe(monthInput.getDOMNode());
		});

		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} />
		);

		const customInputs = component.find('input[type="number"]');
		const dayInput = customInputs.at(0);

		dayInput.getDOMNode().focus();
		dayInput.getDOMNode().value = '1';

		dayInput.simulate('keyup', { target: dayInput.getDOMNode(), key: '1' });

		expect(document.activeElement).toBe(dayInput.getDOMNode());
		});

		it('triggers onChange correctly when changed custom input', () => {
		@@ -557,0 +607,0 @@ const onChange = jest.fn();

src/__tests__/DatePicker.jsx

		@@ -43,2 +43,26 @@ import React from 'react';

		it('passes aria-label props to DateInput', () => {
		const ariaLabelProps = {
		calendarAriaLabel: 'Toggle calendar',
		clearAriaLabel: 'Clear value',
		dayAriaLabel: 'Day',
		monthAriaLabel: 'Month',
		yearAriaLabel: 'Year'
		};

		const component = mount(
		<DatePicker {...ariaLabelProps} />
		);

		const calendarButton = component.find('button.react-date-picker__calendar-button');
		const clearButton = component.find('button.react-date-picker__clear-button');
		const dateInput = component.find('DateInput');

		expect(calendarButton.prop('aria-label')).toBe(ariaLabelProps.calendarAriaLabel);
		expect(clearButton.prop('aria-label')).toBe(ariaLabelProps.clearAriaLabel);
		expect(dateInput.prop('dayAriaLabel')).toBe(ariaLabelProps.dayAriaLabel);
		expect(dateInput.prop('monthAriaLabel')).toBe(ariaLabelProps.monthAriaLabel);
		expect(dateInput.prop('yearAriaLabel')).toBe(ariaLabelProps.yearAriaLabel);
		});

		it('applies className to its wrapper when given a string', () => {
		@@ -201,2 +225,19 @@ const className = 'testClassName';

		it('closes Calendar component when tapped outside', () => {
		const root = document.createElement('div');
		document.body.appendChild(root);

		const component = mount(
		<DatePicker isOpen />,
		{ attachTo: root }
		);

		const event = document.createEvent('TouchEvent');
		event.initEvent('touchstart', true, true);
		document.body.dispatchEvent(event);
		component.update();

		expect(component.state('isOpen')).toBe(false);
		});

		it('does not close Calendar component when focused inside', () => {
		@@ -203,0 +244,0 @@ const component = mount(

src/DateInput.jsx

		@@ -8,2 +8,3 @@ import React, { PureComponent } from 'react';
		import MonthInput from './DateInput/MonthInput';
		import MonthSelect from './DateInput/MonthSelect';
		import YearInput from './DateInput/YearInput';
		@@ -205,3 +206,3 @@ import NativeInput from './DateInput/NativeInput';
		get formatDate() {
		const { locale, maxDetail } = this.props;
		const { maxDetail } = this.props;

		@@ -217,11 +218,10 @@ const options = { year: 'numeric' };

		return getFormatter(locale, options);
		return getFormatter(options);
		}

		// eslint-disable-next-line class-methods-use-this
		get formatNumber() {
		const { locale } = this.props;

		const options = { useGrouping: false };

		return getFormatter(locale, options);
		return getFormatter(options);
		}
		@@ -254,3 +254,3 @@
		get placeholder() {
		const { format } = this.props;
		const { format, locale } = this.props;

		@@ -268,6 +268,6 @@ if (format) {
		return (
		this.formatDate(date)
		.replace(this.formatNumber(year), 'y')
		.replace(this.formatNumber(monthIndex + 1), 'M')
		.replace(this.formatNumber(day), 'd')
		this.formatDate(locale, date)
		.replace(this.formatNumber(locale, year), 'y')
		.replace(this.formatNumber(locale, monthIndex + 1), 'M')
		.replace(this.formatNumber(locale, day), 'd')
		);
		@@ -293,2 +293,3 @@ }
		onKeyDown: this.onKeyDown,
		onKeyUp: this.onKeyUp,
		// This is only for showing validity when editing
		@@ -324,3 +325,3 @@ required: required \|\| isCalendarOpen,

		const input = event.target;
		const { target: input } = event;
		const property = event.key === 'ArrowLeft' ? 'previousElementSibling' : 'nextElementSibling';
		@@ -335,2 +336,27 @@ const nextInput = findInput(input, property);

		onKeyUp = (event) => {
		const { key, target: input } = event;

		const isNumberKey = !isNaN(parseInt(key, 10));

		if (!isNumberKey) {
		return;
		}

		const { value } = input;
		const max = parseInt(input.getAttribute('max'), 10);

		/**
		* Given 1, the smallest possible number the user could type by adding another digit is 10.
		* 10 would be a valid value given max = 12, so we won't jump to the next input.
		* However, given 2, smallers possible number would be 20, and thus keeping the focus in
		* this field doesn't make sense.
		*/
		if (value * 10 > max) {
		const property = 'nextElementSibling';
		const nextInput = findInput(input, property);
		focus(nextInput);
		}
		}

		/**
		@@ -405,3 +431,3 @@ * Called when non-native date input is changed.
		renderDay = (currentMatch) => {
		const { showLeadingZeros } = this.props;
		const { dayAriaLabel, showLeadingZeros } = this.props;
		const { day, month, year } = this.state;
		@@ -419,2 +445,3 @@
		{...this.commonInputProps}
		dayAriaLabel={dayAriaLabel}
		month={month}
		@@ -429,9 +456,23 @@ showLeadingZeros={showLeadingZerosFromFormat \|\| showLeadingZeros}
		renderMonth = (currentMatch) => {
		const { showLeadingZeros } = this.props;
		const { locale, monthAriaLabel, showLeadingZeros } = this.props;
		const { month, year } = this.state;

		if (currentMatch && currentMatch.length > 2) {
		if (currentMatch && currentMatch.length > 4) {
		throw new Error(`Unsupported token: ${currentMatch}`);
		}

		if (currentMatch.length > 2) {
		return (
		<MonthSelect
		key="month"
		{...this.commonInputProps}
		locale={locale}
		monthAriaLabel={monthAriaLabel}
		short={currentMatch.length === 3}
		value={month}
		year={year}
		/>
		);
		}

		const showLeadingZerosFromFormat = currentMatch && currentMatch.length === 2;
		@@ -443,2 +484,3 @@
		{...this.commonInputProps}
		monthAriaLabel={monthAriaLabel}
		showLeadingZeros={showLeadingZerosFromFormat \|\| showLeadingZeros}
		@@ -452,2 +494,3 @@ value={month}
		renderYear = () => {
		const { yearAriaLabel } = this.props;
		const { year } = this.state;
		@@ -461,2 +504,3 @@
		valueType={this.valueType}
		yearAriaLabel={yearAriaLabel}
		/>
		@@ -483,2 +527,3 @@ );
		name,
		nativeInputAriaLabel,
		required,
		@@ -495,2 +540,3 @@ } = this.props;
		name={name}
		nativeInputAriaLabel={nativeInputAriaLabel}
		onChange={this.onChangeNative}
		@@ -528,2 +574,3 @@ required={required}
		className: PropTypes.string.isRequired,
		dayAriaLabel: PropTypes.string,
		disabled: PropTypes.bool,
		@@ -536,3 +583,5 @@ format: PropTypes.string,
		minDate: isMinDate,
		monthAriaLabel: PropTypes.string,
		name: PropTypes.string,
		nativeInputAriaLabel: PropTypes.string,
		onChange: PropTypes.func,
		@@ -547,4 +596,5 @@ required: PropTypes.bool,
		]),
		yearAriaLabel: PropTypes.string,
		};

		polyfill(DateInput);

src/DateInput/__tests__/DayInput.jsx

		@@ -68,2 +68,17 @@ import React from 'react';

		it('applies given aria-label properly', () => {
		const dayAriaLabel = 'Day';

		const component = mount(
		<DayInput
		{...defaultProps}
		dayAriaLabel={dayAriaLabel}
		/>
		);

		const select = component.find('input');

		expect(select.prop('aria-label')).toBe(dayAriaLabel);
		});

		it('has proper name defined', () => {
		@@ -79,2 +94,18 @@ const component = mount(

		it('has proper className defined', () => {
		const className = 'react-date-picker';

		const component = mount(
		<DayInput
		{...defaultProps}
		className={className}
		/>
		);

		const input = component.find('input');

		expect(input.hasClass('react-date-picker__input')).toBe(true);
		expect(input.hasClass('react-date-picker__day')).toBe(true);
		});

		it('displays given value properly', () => {
		@@ -81,0 +112,0 @@ const value = 11;

src/DateInput/__tests__/MonthInput.jsx

		@@ -68,2 +68,17 @@ import React from 'react';

		it('applies given aria-label properly', () => {
		const monthAriaLabel = 'Month';

		const component = mount(
		<MonthInput
		{...defaultProps}
		monthAriaLabel={monthAriaLabel}
		/>
		);

		const select = component.find('input');

		expect(select.prop('aria-label')).toBe(monthAriaLabel);
		});

		it('has proper name defined', () => {
		@@ -79,2 +94,18 @@ const component = mount(

		it('has proper className defined', () => {
		const className = 'react-date-picker';

		const component = mount(
		<MonthInput
		{...defaultProps}
		className={className}
		/>
		);

		const input = component.find('input');

		expect(input.hasClass('react-date-picker__input')).toBe(true);
		expect(input.hasClass('react-date-picker__month')).toBe(true);
		});

		it('displays given value properly', () => {
		@@ -81,0 +112,0 @@ const value = 11;

src/DateInput/__tests__/YearInput.jsx

		@@ -24,2 +24,17 @@ import React from 'react';

		it('applies given aria-label properly', () => {
		const yearAriaLabel = 'Year';

		const component = mount(
		<YearInput
		{...defaultProps}
		yearAriaLabel={yearAriaLabel}
		/>
		);

		const select = component.find('input');

		expect(select.prop('aria-label')).toBe(yearAriaLabel);
		});

		it('has proper name defined', () => {
		@@ -35,2 +50,18 @@ const component = mount(

		it('has proper className defined', () => {
		const className = 'react-date-picker';

		const component = mount(
		<YearInput
		{...defaultProps}
		className={className}
		/>
		);

		const input = component.find('input');

		expect(input.hasClass('react-date-picker__input')).toBe(true);
		expect(input.hasClass('react-date-picker__year')).toBe(true);
		});

		it('displays given value properly', () => {
		@@ -37,0 +68,0 @@ const value = 2018;

src/DateInput/DayInput.jsx

		@@ -1,2 +0,2 @@
		import React, { PureComponent } from 'react';
		import React from 'react';
		import PropTypes from 'prop-types';
		@@ -15,6 +15,11 @@

		export default class DayInput extends PureComponent {
		get currentMonthMaxDays() {
		const { year, month } = this.props;

		export default function DayInput({
		dayAriaLabel,
		maxDate,
		minDate,
		month,
		year,
		...otherProps
		}) {
		const currentMonthMaxDays = (() => {
		if (!month) {
		@@ -25,38 +30,22 @@ return 31;
		return getDaysInMonth(new Date(year, month - 1, 1));
		}
		})();

		get maxDay() {
		const { maxDate, month, year } = this.props;
		return min(
		this.currentMonthMaxDays,
		maxDate && year === getYear(maxDate) && month === getMonth(maxDate) && getDay(maxDate),
		);
		}
		const maxDay = min(
		currentMonthMaxDays,
		maxDate && year === getYear(maxDate) && month === getMonth(maxDate) && getDay(maxDate),
		);

		get minDay() {
		const { minDate, month, year } = this.props;
		return max(
		1, minDate && year === getYear(minDate) && month === getMonth(minDate) && getDay(minDate),
		);
		}
		const minDay = max(
		1, minDate && year === getYear(minDate) && month === getMonth(minDate) && getDay(minDate),
		);

		render() {
		const { maxDay, minDay } = this;
		const {
		maxDate,
		minDate,
		month,
		year,
		...otherProps
		} = this.props;

		return (
		<Input
		name="day"
		max={maxDay}
		min={minDay}
		{...otherProps}
		/>
		);
		}
		return (
		<Input
		name="day"
		ariaLabel={dayAriaLabel}
		max={maxDay}
		min={minDay}
		{...otherProps}
		/>
		);
		}
		@@ -66,2 +55,3 @@
		className: PropTypes.string.isRequired,
		dayAriaLabel: PropTypes.string,
		disabled: PropTypes.bool,
		@@ -74,2 +64,3 @@ itemRef: PropTypes.func,
		onKeyDown: PropTypes.func,
		onKeyUp: PropTypes.func,
		required: PropTypes.bool,
		@@ -76,0 +67,0 @@ showLeadingZeros: PropTypes.bool,

src/DateInput/Input.jsx

		import React from 'react';
		import PropTypes from 'prop-types';
		import mergeClassNames from 'merge-class-names';
		import updateInputWidth from 'update-input-width';

		import { updateInputWidth } from '../shared/utils';
		function select(element) {
		if (!element) {
		return;
		}

		const select = element => element && element.select();
		requestAnimationFrame(() => element.select());
		}

		export default function Input({
		ariaLabel,
		className,
		@@ -19,2 +25,3 @@ disabled,
		onKeyDown,
		onKeyUp,
		placeholder,
		@@ -32,2 +39,3 @@ required,
		key="input"
		aria-label={ariaLabel}
		autoComplete="off"
		@@ -46,3 +54,9 @@ className={mergeClassNames(
		onKeyDown={onKeyDown}
		onKeyUp={event => updateInputWidth(event.target)}
		onKeyUp={(event) => {
		updateInputWidth(event.target);

		if (onKeyUp) {
		onKeyUp(event);
		}
		}}
		placeholder={placeholder}
		@@ -74,2 +88,3 @@ ref={(ref) => {
		onKeyDown: PropTypes.func,
		onKeyUp: PropTypes.func,
		required: PropTypes.bool,
		@@ -76,0 +91,0 @@ showLeadingZeros: PropTypes.bool,

src/DateInput/MonthInput.jsx

		@@ -1,2 +0,2 @@
		import React, { PureComponent } from 'react';
		import React from 'react';
		import PropTypes from 'prop-types';
		@@ -10,31 +10,21 @@

		export default class MonthInput extends PureComponent {
		get maxMonth() {
		const { maxDate, year } = this.props;
		return min(12, maxDate && year === getYear(maxDate) && getMonth(maxDate));
		}
		export default function MonthInput({
		maxDate,
		minDate,
		monthAriaLabel,
		year,
		...otherProps
		}) {
		const maxMonth = min(12, maxDate && year === getYear(maxDate) && getMonth(maxDate));
		const minMonth = max(1, minDate && year === getYear(minDate) && getMonth(minDate));

		get minMonth() {
		const { minDate, year } = this.props;
		return max(1, minDate && year === getYear(minDate) && getMonth(minDate));
		}

		render() {
		const { maxMonth, minMonth } = this;
		const {
		maxDate,
		minDate,
		year,
		...otherProps
		} = this.props;

		return (
		<Input
		name="month"
		max={maxMonth}
		min={minMonth}
		{...otherProps}
		/>
		);
		}
		return (
		<Input
		name="month"
		ariaLabel={monthAriaLabel}
		max={maxMonth}
		min={minMonth}
		{...otherProps}
		/>
		);
		}
		@@ -48,4 +38,6 @@
		minDate: isMinDate,
		monthAriaLabel: PropTypes.string,
		onChange: PropTypes.func,
		onKeyDown: PropTypes.func,
		onKeyUp: PropTypes.func,
		required: PropTypes.bool,
		@@ -52,0 +44,0 @@ showLeadingZeros: PropTypes.bool,

src/DateInput/NativeInput.jsx

		@@ -1,2 +0,2 @@
		import React, { PureComponent } from 'react';
		import React from 'react';
		import PropTypes from 'prop-types';
		@@ -11,6 +11,14 @@

		export default class NativeInput extends PureComponent {
		get nativeInputType() {
		const { valueType } = this.props;

		export default function NativeInput({
		disabled,
		maxDate,
		minDate,
		name,
		nativeInputAriaLabel,
		onChange,
		required,
		value,
		valueType,
		}) {
		const nativeInputType = (() => {
		switch (valueType) {
		@@ -27,7 +35,5 @@ case 'decade':
		}
		}
		})();

		get nativeValueParser() {
		const { valueType } = this.props;

		const nativeValueParser = (() => {
		switch (valueType) {
		@@ -45,33 +51,28 @@ case 'century':
		}
		})();

		function stopPropagation(event) {
		event.stopPropagation();
		}

		stopPropagation = event => event.stopPropagation();

		render() {
		const { nativeValueParser } = this;

		const {
		disabled, maxDate, minDate, name, onChange, required, value,
		} = this.props;

		return (
		<input
		type={this.nativeInputType}
		disabled={disabled}
		max={maxDate ? nativeValueParser(maxDate) : null}
		min={minDate ? nativeValueParser(minDate) : null}
		name={name}
		onChange={onChange}
		onFocus={this.stopPropagation}
		required={required}
		style={{
		visibility: 'hidden',
		position: 'absolute',
		top: '-9999px',
		left: '-9999px',
		}}
		value={value ? nativeValueParser(value) : ''}
		/>
		);
		}
		return (
		<input
		type={nativeInputType}
		aria-label={nativeInputAriaLabel}
		disabled={disabled}
		max={maxDate ? nativeValueParser(maxDate) : null}
		min={minDate ? nativeValueParser(minDate) : null}
		name={name}
		onChange={onChange}
		onFocus={stopPropagation}
		required={required}
		style={{
		visibility: 'hidden',
		position: 'absolute',
		top: '-9999px',
		left: '-9999px',
		}}
		value={value ? nativeValueParser(value) : ''}
		/>
		);
		}
		@@ -84,2 +85,3 @@
		name: PropTypes.string,
		nativeInputAriaLabel: PropTypes.string,
		onChange: PropTypes.func,
		@@ -86,0 +88,0 @@ required: PropTypes.bool,

src/DateInput/YearInput.jsx

		@@ -1,2 +0,2 @@
		import React, { PureComponent } from 'react';
		import React from 'react';
		import PropTypes from 'prop-types';
		@@ -10,16 +10,13 @@

		export default class YearInput extends PureComponent {
		get maxYear() {
		const { maxDate } = this.props;
		return min(275760, maxDate && getYear(maxDate));
		}
		export default function YearInput({
		maxDate,
		minDate,
		valueType,
		yearAriaLabel,
		...otherProps
		}) {
		const maxYear = min(275760, maxDate && getYear(maxDate));
		const minYear = max(1000, minDate && getYear(minDate));

		get minYear() {
		const { minDate } = this.props;
		return max(1000, minDate && getYear(minDate));
		}

		get yearStep() {
		const { valueType } = this.props;

		const yearStep = (() => {
		if (valueType === 'century') {
		@@ -30,24 +27,15 @@ return 10;
		return 1;
		}
		})();

		render() {
		const { maxYear, minYear, yearStep } = this;
		const {
		maxDate,
		minDate,
		valueType,
		...otherProps
		} = this.props;

		return (
		<Input
		name="year"
		max={maxYear}
		min={minYear}
		placeholder="----"
		step={yearStep}
		{...otherProps}
		/>
		);
		}
		return (
		<Input
		name="year"
		ariaLabel={yearAriaLabel}
		max={maxYear}
		min={minYear}
		placeholder="----"
		step={yearStep}
		{...otherProps}
		/>
		);
		}
		@@ -63,5 +51,7 @@
		onKeyDown: PropTypes.func,
		onKeyUp: PropTypes.func,
		required: PropTypes.bool,
		value: PropTypes.number,
		valueType: isValueType,
		yearAriaLabel: PropTypes.string,
		};

src/DatePicker.jsx

		@@ -15,2 +15,3 @@ import React, { PureComponent } from 'react';
		const baseClassName = 'react-date-picker';
		const outsideActionEvents = ['mousedown', 'focusin', 'touchstart'];

		@@ -36,4 +37,3 @@ export default class DatePicker extends PureComponent {
		componentDidMount() {
		document.addEventListener('mousedown', this.onOutsideAction);
		document.addEventListener('focusin', this.onOutsideAction);
		this.handleOutsideActionListeners();
		}
		@@ -46,2 +46,3 @@
		if (isOpen !== prevState.isOpen) {
		this.handleOutsideActionListeners();
		callIfDefined(isOpen ? onCalendarOpen : onCalendarClose);
		@@ -52,6 +53,13 @@ }
		componentWillUnmount() {
		document.removeEventListener('mousedown', this.onOutsideAction);
		document.removeEventListener('focusin', this.onOutsideAction);
		this.handleOutsideActionListeners(false);
		}

		handleOutsideActionListeners(shouldListen) {
		const { isOpen } = this.state;

		const shouldListenWithFallback = typeof shouldListen !== 'undefined' ? shouldListen : isOpen;
		const fnName = shouldListenWithFallback ? 'addEventListener' : 'removeEventListener';
		outsideActionEvents.forEach(eventName => document[fnName](eventName, this.onOutsideAction));
		}

		onOutsideAction = (event) => {
		@@ -113,4 +121,7 @@ if (this.wrapper && !this.wrapper.contains(event.target)) {
		const {
		calendarAriaLabel,
		calendarIcon,
		clearAriaLabel,
		clearIcon,
		dayAriaLabel,
		disabled,
		@@ -122,7 +133,10 @@ format,
		minDate,
		monthAriaLabel,
		name,
		nativeInputAriaLabel,
		required,
		returnValue,
		required,
		showLeadingZeros,
		value,
		yearAriaLabel,
		} = this.props;
		@@ -137,18 +151,23 @@ const { isOpen } = this.state;
		className={`${baseClassName}__inputGroup`}
		dayAriaLabel={dayAriaLabel}
		disabled={disabled}
		format={format}
		isCalendarOpen={isOpen}
		locale={locale}
		isCalendarOpen={isOpen}
		maxDate={maxDate}
		maxDetail={maxDetail}
		minDate={minDate}
		monthAriaLabel={monthAriaLabel}
		name={name}
		nativeInputAriaLabel={nativeInputAriaLabel}
		onChange={this.onChange}
		required={required}
		returnValue={returnValue}
		required={required}
		showLeadingZeros={showLeadingZeros}
		value={valueFrom}
		yearAriaLabel={yearAriaLabel}
		/>
		{clearIcon !== null && (
		<button
		aria-label={clearAriaLabel}
		className={`${baseClassName}__clear-button ${baseClassName}__button`}
		@@ -165,2 +184,3 @@ disabled={disabled}
		<button
		aria-label={calendarAriaLabel}
		className={`${baseClassName}__calendar-button ${baseClassName}__button`}
		@@ -240,9 +260,19 @@ disabled={disabled}

		const iconProps = {
		xmlns: 'http://www.w3.org/2000/svg',
		width: 19,
		height: 19,
		viewBox: '0 0 19 19',
		stroke: 'black',
		strokeWidth: 2,
		};

		const CalendarIcon = (
		<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19">
		<g stroke="black" strokeWidth="2">
		<rect width="15" height="15" x="2" y="2" fill="none" />
		<line x1="6" y1="0" x2="6" y2="4" />
		<line x1="13" y1="0" x2="13" y2="4" />
		</g>
		<svg
		{...iconProps}
		className={`${baseClassName}__calendar-button__icon ${baseClassName}__button__icon`}
		>
		<rect width="15" height="15" x="2" y="2" fill="none" />
		<line x1="6" y1="0" x2="6" y2="4" />
		<line x1="13" y1="0" x2="13" y2="4" />
		</svg>
		@@ -252,7 +282,8 @@ );
		const ClearIcon = (
		<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19">
		<g stroke="black" strokeWidth="2">
		<line x1="4" y1="4" x2="15" y2="15" />
		<line x1="15" y1="4" x2="4" y2="15" />
		</g>
		<svg
		{...iconProps}
		className={`${baseClassName}__clear-button__icon ${baseClassName}__button__icon`}
		>
		<line x1="4" y1="4" x2="15" y2="15" />
		<line x1="15" y1="4" x2="4" y2="15" />
		</svg>
		@@ -270,2 +301,3 @@ );
		...Calendar.propTypes,
		calendarAriaLabel: PropTypes.string,
		calendarClassName: PropTypes.oneOfType([
		@@ -280,7 +312,11 @@ PropTypes.string,
		]),
		clearAriaLabel: PropTypes.string,
		clearIcon: PropTypes.node,
		dayAriaLabel: PropTypes.string,
		disabled: PropTypes.bool,
		format: PropTypes.string,
		isOpen: PropTypes.bool,
		monthAriaLabel: PropTypes.string,
		name: PropTypes.string,
		nativeInputAriaLabel: PropTypes.string,
		onCalendarClose: PropTypes.func,
		@@ -291,4 +327,5 @@ onCalendarOpen: PropTypes.func,
		showLeadingZeros: PropTypes.bool,
		yearAriaLabel: PropTypes.string,
		};

		polyfill(DatePicker);

src/shared/dateFormatter.js

		import getUserLocale from 'get-user-locale';

		const formatterCache = {};

		/* eslint-disable import/prefer-default-export */

		export const getFormatter = options => (locale, date) => (
		date.toLocaleString(locale \|\| getUserLocale(), options)
		);

		/**
		* Gets Intl-based date formatter from formatter cache. If it doesn't exist in cache
		* just yet, it will be created on the fly.
		* Changes the hour in a Date to ensure right date formatting even if DST is messed up.
		* Workaround for bug in WebKit and Firefox with historical dates.
		* For more details, see:
		* https://bugs.chromium.org/p/chromium/issues/detail?id=750465
		* https://bugzilla.mozilla.org/show_bug.cgi?id=1385643
		*
		* @param {Date} date Date.
		*/
		export const getFormatter = (locale, options) => {
		if (!locale) {
		// Default parameter is not enough as it does not protect us from null values
		// eslint-disable-next-line no-param-reassign
		locale = getUserLocale();
		}
		const toSafeHour = (date) => {
		const safeDate = new Date(date);
		return new Date(safeDate.setHours(12));
		};

		const stringifiedOptions = JSON.stringify(options);
		const getSafeFormatter = options => (locale, date) => (
		getFormatter(options)(locale, toSafeHour(date))
		);

		if (!formatterCache[locale]) {
		formatterCache[locale] = {};
		}
		const formatMonthOptions = { month: 'long' };
		const formatShortMonthOptions = { month: 'short' };

		if (!formatterCache[locale][stringifiedOptions]) {
		formatterCache[locale][stringifiedOptions] = n => n.toLocaleString(locale, options);
		}

		return formatterCache[locale][stringifiedOptions];
		};
		export const formatMonth = getSafeFormatter(formatMonthOptions);
		export const formatShortMonth = getSafeFormatter(formatShortMonthOptions);

src/shared/utils.js

		@@ -10,15 +10,1 @@ export {
		export const max = (...args) => Math.max(...args.filter(isValidNumber));

		export const updateInputWidth = (element) => {
		const span = document.createElement('span');
		span.innerHTML = element.value \|\| element.placeholder;

		const container = element.parentElement;

		container.appendChild(span);

		const { width } = span.getBoundingClientRect();
		element.style.width = `${Math.ceil(width)}px`;

		container.removeChild(span);
		};

dist/DatePicker.css

Sorry, the diff of this file is not supported yet

dist/DatePicker.less

Sorry, the diff of this file is not supported yet

LICENSE

Sorry, the diff of this file is not supported yet

src/DatePicker.less

Sorry, the diff of this file is not supported yet

		@@ -11,10 +11,2 @@ [![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)

		## Important message for React-Date-Picker ≤5 users

		Sadly, the authors of original React-Date-Picker ≤5 have abandoned the package. Because it lacked compatibility with React 16, the package would quickly become dead.

		In version 6 I aim to provide a solution that will suit everyone's needs. To make that happen, I need time and your help. Please don't hesitate to file an issues with bugs, suggestions, or simply telling me more about how you use react-date-picker. Your help will be invaluable!

		[Upgrade guide for React-Date-Picker ≤5 users](https://github.com/wojtekmaj/react-date-picker/wiki/Upgrade-guide-for-React-Date-Picker-≤5-users) is there to help you with the upgrade.

		## tl;dr
		@@ -96,24 +88,30 @@ * Install by executing `npm install react-date-picker` or `yarn add react-date-picker`.

		\|Prop name\|Description\|Example values\|
		\|----\|----\|----\|
		\|calendarClassName\|Defines class name(s) that will be added along with "react-calendar" to the main React-Calendar `<div>` element.\|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>\|
		\|calendarIcon\|Defines the content of the calendar button. Setting the value explicitly to `null` will hide the icon.\|<ul><li>String: `"Calendar"`</li><li>React element: `<CalendarIcon />`</li></ul>\|
		\|className\|Defines class name(s) that will be added along with "react-date-picker" to the main React-Date-Picker `<div>` element.\|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>\|
		\|clearIcon\|Defines the content of the clear button. Setting the value explicitly to `null` will hide the icon.\|<ul><li>String: `"Clear"`</li><li>React element: `<ClearIcon />`</li></ul>\|
		\|disabled\|Defines whether the date picker should be disabled. Defaults to false.\|`true`\|
		\|format\|Defines 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`, `d`, `dd`.\|`"y-MM-dd"`\|
		\|isOpen\|Defines whether the calendar should be opened. Defaults to false.\|`true`\|
		\|locale\|Defines which locale should be used by the date picker and the calendar. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag). Defaults to user's browser settings.\|`"hu-HU"`\|
		\|maxDate\|Defines 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.\|Date: `new Date()`\|
		\|maxDetail\|Defines 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". Defaults to "month".\|`"month"`\|
		\|minDate\|Defines 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.\|Date: `new Date()`\|
		\|minDetail\|Defines the least detailed calendar view that the user shall see. Can be "month", "year", "decade" or "century". Defaults to "century".\|`"century"`\|
		\|name\|Defines input name. Defaults to "date".\|`"myCustomName"`\|
		\|onCalendarClose\|Function called when the calendar closes.\|`() => alert('Calendar closed')`\|
		\|onCalendarOpen\|Function called when the calendar opens.\|`() => alert('Calendar opened')`\|
		\|onChange\|Function called when the user clicks an item on the most detailed view available.\|`(value) => alert('New date is: ', value)`\|
		\|returnValue\|Defines 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. Defaults to "start".\|`"range"`\|
		\|required\|Defines whether date input should be required. Defaults to false.\|`true`\|
		\|showLeadingZeros\|Defines whether leading zeros should be rendered in date inputs. Defaults to false.\|`true`\|
		\|value\|Defines the value of the input.\|<ul><li>Date: `new Date()`</li><li>An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`</li></ul>\|
		\|Prop name\|Description\|Default value\|Example values\|
		\|----\|----\|----\|----\|
		\|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>\|
		\|dayAriaLabel\|`aria-label` for the day input.\|n/a\|`"Year"`\|
		\|disabled\|Whether the date picker should be disabled.\|`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"`\|
		\|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)`\|
		\|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"`\|

		@@ -120,0 +118,0 @@ ### Calendar

react-date-picker - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics

Dependency changes