react-datetime-picker - npm Package Compare versions

Comparing version 2.4.0 to 2.5.0

dist/DateTimeInput.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -19,2 +19,4 @@ var _react = _interopRequireWildcard(require("react"));
 
+var _MonthSelect = _interopRequireDefault(require("react-date-picker/dist/DateInput/MonthSelect"));
+
 var _YearInput = _interopRequireDefault(require("react-date-picker/dist/DateInput/YearInput"));
@@ -44,5 +46,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; } }
 
@@ -71,2 +73,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); }
@@ -76,4 +80,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; }
@@ -176,3 +178,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)
@@ -213,3 +215,3 @@ }, element);
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
+    _defineProperty(_assertThisInitialized(_this), "state", {
       amPm: null,
@@ -224,3 +226,3 @@ year: null,
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onClick", function (event) {
+    _defineProperty(_assertThisInitialized(_this), "onClick", function (event) {
       if (event.target === event.currentTarget) {
@@ -233,3 +235,3 @@ // Wrapper was directly clicked
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onKeyDown", function (event) {
+    _defineProperty(_assertThisInitialized(_this), "onKeyDown", function (event) {
       switch (event.key) {
@@ -253,3 +255,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,
@@ -287,3 +314,3 @@ name = _event$target.name,
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onChangeNative", function (event) {
+    _defineProperty(_assertThisInitialized(_this), "onChangeNative", function (event) {
       var onChange = _this.props.onChange;
@@ -331,3 +358,3 @@ var value = event.target.value;
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onChangeAmPm", function (event) {
+    _defineProperty(_assertThisInitialized(_this), "onChangeAmPm", function (event) {
       var value = event.target.value;
@@ -340,3 +367,3 @@
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onChangeExternal", function () {
+    _defineProperty(_assertThisInitialized(_this), "onChangeExternal", function () {
       var onChange = _this.props.onChange;
@@ -369,4 +396,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,
@@ -382,5 +411,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,
@@ -393,33 +423,55 @@ showLeadingZeros: showLeadingZerosFromFormat || showLeadingZeros,
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "renderMonth", function (currentMatch) {
-      var showLeadingZeros = _this.props.showLeadingZeros;
-      var month = _this.state.month;
+    _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,
+          month = _this$state2.month,
+          year = _this$state2.year;
 
-      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,
-        value: month
+        value: month,
+        year: year
       }));
     });
 
-    _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: "day"
+        valueType: "day",
+        yearAriaLabel: yearAriaLabel
       }));
     });
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "renderHour12", function (currentMatch) {
-      var _this$state2 = _this.state,
-          amPm = _this$state2.amPm,
-          hour = _this$state2.hour;
+    _defineProperty(_assertThisInitialized(_this), "renderHour12", function (currentMatch) {
+      var hourAriaLabel = _this.props.hourAriaLabel;
+      var _this$state3 = _this.state,
+          amPm = _this$state3.amPm,
+          hour = _this$state3.hour;
 
@@ -431,6 +483,7 @@ if (currentMatch && currentMatch.length > 2) {
       var showLeadingZeros = currentMatch && currentMatch.length === 2;
-      return _react.default.createElement(_Hour12Input.default, _extends({
+      return _react["default"].createElement(_Hour12Input["default"], _extends({
         key: "hour12"
-      }, _this.commonInputProps, {
+      }, _this.commonInputProps, _this.commonTimeInputProps, {
         amPm: amPm,
+        hourAriaLabel: hourAriaLabel,
         showLeadingZeros: showLeadingZeros,
@@ -441,3 +494,4 @@ value: hour
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "renderHour24", function (currentMatch) {
+    _defineProperty(_assertThisInitialized(_this), "renderHour24", function (currentMatch) {
+      var hourAriaLabel = _this.props.hourAriaLabel;
       var hour = _this.state.hour;
@@ -450,5 +504,6 @@
       var showLeadingZeros = currentMatch && currentMatch.length === 2;
-      return _react.default.createElement(_Hour24Input.default, _extends({
+      return _react["default"].createElement(_Hour24Input["default"], _extends({
         key: "hour24"
-      }, _this.commonInputProps, {
+      }, _this.commonInputProps, _this.commonTimeInputProps, {
+        hourAriaLabel: hourAriaLabel,
         showLeadingZeros: showLeadingZeros,
@@ -459,6 +514,7 @@ value: hour
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "renderMinute", function (currentMatch) {
-      var _this$state3 = _this.state,
-          hour = _this$state3.hour,
-          minute = _this$state3.minute;
+    _defineProperty(_assertThisInitialized(_this), "renderMinute", function (currentMatch) {
+      var minuteAriaLabel = _this.props.minuteAriaLabel;
+      var _this$state4 = _this.state,
+          hour = _this$state4.hour,
+          minute = _this$state4.minute;
 
@@ -470,6 +526,7 @@ if (currentMatch && currentMatch.length > 2) {
       var showLeadingZeros = currentMatch && currentMatch.length === 2;
-      return _react.default.createElement(_MinuteInput.default, _extends({
+      return _react["default"].createElement(_MinuteInput["default"], _extends({
         key: "minute"
-      }, _this.commonInputProps, {
+      }, _this.commonInputProps, _this.commonTimeInputProps, {
         hour: hour,
+        minuteAriaLabel: minuteAriaLabel,
         showLeadingZeros: showLeadingZeros,
@@ -480,7 +537,8 @@ value: minute
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "renderSecond", function (currentMatch) {
-      var _this$state4 = _this.state,
-          hour = _this$state4.hour,
-          minute = _this$state4.minute,
-          second = _this$state4.second;
+    _defineProperty(_assertThisInitialized(_this), "renderSecond", function (currentMatch) {
+      var secondAriaLabel = _this.props.secondAriaLabel;
+      var _this$state5 = _this.state,
+          hour = _this$state5.hour,
+          minute = _this$state5.minute,
+          second = _this$state5.second;
 
@@ -492,7 +550,8 @@ if (currentMatch && currentMatch.length > 2) {
       var showLeadingZeros = currentMatch ? currentMatch.length === 2 : true;
-      return _react.default.createElement(_SecondInput.default, _extends({
+      return _react["default"].createElement(_SecondInput["default"], _extends({
         key: "second"
-      }, _this.commonInputProps, {
+      }, _this.commonInputProps, _this.commonTimeInputProps, {
         hour: hour,
         minute: minute,
+        secondAriaLabel: secondAriaLabel,
         showLeadingZeros: showLeadingZeros,
@@ -503,8 +562,11 @@ value: second
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "renderAmPm", function () {
+    _defineProperty(_assertThisInitialized(_this), "renderAmPm", function () {
+      var _this$props3 = _this.props,
+          amPmAriaLabel = _this$props3.amPmAriaLabel,
+          locale = _this$props3.locale;
       var amPm = _this.state.amPm;
-      var locale = _this.props.locale;
-      return _react.default.createElement(_AmPm.default, _extends({
+      return _react["default"].createElement(_AmPm["default"], _extends({
         key: "ampm"
-      }, _this.commonInputProps, {
+      }, _this.commonInputProps, _this.commonTimeInputProps, {
+        amPmAriaLabel: amPmAriaLabel,
         locale: locale,
@@ -538,10 +600,11 @@ onChange: _this.onChangeAmPm,
     value: function renderNativeInput() {
-      var _this$props = this.props,
-          disabled = _this$props.disabled,
-          maxDate = _this$props.maxDate,
-          minDate = _this$props.minDate,
-          name = _this$props.name,
-          required = _this$props.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: "time",
@@ -552,2 +615,3 @@ disabled: disabled,
         name: name,
+        nativeInputAriaLabel: nativeInputAriaLabel,
         onChange: this.onChangeNative,
@@ -563,3 +627,3 @@ required: required,
       var className = this.props.className;
-      return _react.default.createElement("div", {
+      return _react["default"].createElement("div", {
         className: className,
@@ -649,6 +713,6 @@ onClick: this.onClick,
 
-      var _this$state5 = this.state,
-          year = _this$state5.year,
-          month = _this$state5.month,
-          day = _this$state5.day;
+      var _this$state6 = this.state,
+          year = _this$state6.year,
+          month = _this$state6.month,
+          day = _this$state6.day;
 
@@ -670,6 +734,6 @@ if (!isSameDate(maxDate, year, month, day)) {
 
-      var _this$state6 = this.state,
-          year = _this$state6.year,
-          month = _this$state6.month,
-          day = _this$state6.day;
+      var _this$state7 = this.state,
+          year = _this$state7.year,
+          month = _this$state7.month,
+          day = _this$state7.day;
 
@@ -687,11 +751,9 @@ if (!isSameDate(minDate, year, month, day)) {
 
-      var maxTime = this.maxTime,
-          minTime = this.minTime;
-      var _this$props2 = this.props,
-          className = _this$props2.className,
-          disabled = _this$props2.disabled,
-          isWidgetOpen = _this$props2.isWidgetOpen,
-          maxDate = _this$props2.maxDate,
-          minDate = _this$props2.minDate,
-          required = _this$props2.required;
+      var _this$props5 = this.props,
+          className = _this$props5.className,
+          disabled = _this$props5.disabled,
+          isWidgetOpen = _this$props5.isWidgetOpen,
+          maxDate = _this$props5.maxDate,
+          minDate = _this$props5.minDate,
+          required = _this$props5.required;
       return {
@@ -701,7 +763,6 @@ className: className,
         maxDate: maxDate || defaultMaxDate,
-        maxTime: maxTime,
         minDate: minDate || defaultMinDate,
-        minTime: minTime,
         onChange: this.onChange,
         onKeyDown: this.onKeyDown,
+        onKeyUp: this.onKeyUp,
         placeholder: '--',
@@ -716,2 +777,12 @@ // This is only for showing validity when editing
     }
+  }, {
+    key: "commonTimeInputProps",
+    get: function get() {
+      var maxTime = this.maxTime,
+          minTime = this.minTime;
+      return {
+        maxTime: maxTime,
+        minTime: minTime
+      };
+    }
     /**
@@ -790,3 +861,3 @@ * Returns value type that can be returned with currently applied settings.
 
-exports.default = DateTimeInput;
+exports["default"] = DateTimeInput;
 DateTimeInput.defaultProps = {
@@ -797,16 +868,24 @@ maxDetail: 'minute',
 DateTimeInput.propTypes = {
-  className: _propTypes.default.string.isRequired,
-  disabled: _propTypes.default.bool,
-  format: _propTypes.default.string,
-  isWidgetOpen: _propTypes.default.bool,
-  locale: _propTypes.default.string,
+  amPmAriaLabel: _propTypes["default"].string,
+  className: _propTypes["default"].string.isRequired,
+  dayAriaLabel: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  format: _propTypes["default"].string,
+  hourAriaLabel: _propTypes["default"].string,
+  isWidgetOpen: _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,
-  showLeadingZeros: _propTypes.default.bool,
-  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.instanceOf(Date), _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date))])
+  minuteAriaLabel: _propTypes["default"].string,
+  monthAriaLabel: _propTypes["default"].string,
+  name: _propTypes["default"].string,
+  nativeInputAriaLabel: _propTypes["default"].string,
+  onChange: _propTypes["default"].func,
+  required: _propTypes["default"].bool,
+  secondAriaLabel: _propTypes["default"].string,
+  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)(DateTimeInput);

dist/DateTimeInput/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,140 +17,86 @@ 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 nativeValueParser = function () {
+    switch (valueType) {
+      case 'hour':
+        return function (receivedValue) {
+          return "".concat((0, _dates.getISOLocalDate)(receivedValue), "T").concat((0, _dates.getHours)(receivedValue), ":00");
+        };
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+      case 'minute':
+        return function (receivedValue) {
+          return "".concat((0, _dates.getISOLocalDate)(receivedValue), "T").concat((0, _dates.getHoursMinutes)(receivedValue));
+        };
 
-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 'second':
+        return _dates.getISOLocalDateTime;
 
-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 step = function () {
+    switch (valueType) {
+      case 'hour':
+        return 3600;
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+      case 'minute':
+        return 60;
 
-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 'second':
+        return 1;
 
-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,
-          step = this.step;
-      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: "datetime-local",
-        disabled: disabled,
-        max: maxDate ? nativeValueParser(maxDate) : null,
-        min: minDate ? nativeValueParser(minDate) : null,
-        name: name,
-        onChange: onChange,
-        onFocus: this.stopPropagation,
-        required: required,
-        step: step,
-        style: {
-          visibility: 'hidden',
-          position: 'absolute',
-          top: '-9999px',
-          left: '-9999px'
-        },
-        value: value ? nativeValueParser(value) : ''
-      });
-    }
-  }, {
-    key: "nativeValueParser",
-    get: function get() {
-      var valueType = this.props.valueType;
+  return _react["default"].createElement("input", {
+    type: "datetime-local",
+    "aria-label": nativeInputAriaLabel,
+    disabled: disabled,
+    max: maxDate ? nativeValueParser(maxDate) : null,
+    min: minDate ? nativeValueParser(minDate) : null,
+    name: name,
+    onChange: onChange,
+    onFocus: stopPropagation,
+    required: required,
+    step: step,
+    style: {
+      visibility: 'hidden',
+      position: 'absolute',
+      top: '-9999px',
+      left: '-9999px'
+    },
+    value: value ? nativeValueParser(value) : ''
+  });
+}
 
-      switch (valueType) {
-        case 'hour':
-          return function (value) {
-            return "".concat((0, _dates.getISOLocalDate)(value), "T").concat((0, _dates.getHours)(value), ":00");
-          };
-
-        case 'minute':
-          return function (value) {
-            return "".concat((0, _dates.getISOLocalDate)(value), "T").concat((0, _dates.getHoursMinutes)(value));
-          };
-
-        case 'second':
-          return _dates.getISOLocalDateTime;
-
-        default:
-          throw new Error('Invalid valueType.');
-      }
-    }
-  }, {
-    key: "step",
-    get: function get() {
-      var valueType = this.props.valueType;
-
-      switch (valueType) {
-        case 'hour':
-          return 3600;
-
-        case 'minute':
-          return 60;
-
-        case 'second':
-          return 1;
-
-        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
 };

dist/DateTimePicker.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -31,7 +31,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; }
 
@@ -56,2 +56,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); }
@@ -61,4 +63,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; }
@@ -68,2 +68,3 @@
 var baseClassName = 'react-datetime-picker';
+var outsideActionEvents = ['mousedown', 'focusin', 'touchstart'];
 
@@ -88,5 +89,5 @@ var DateTimePicker =
 
-    _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)) {
@@ -97,3 +98,3 @@ _this.closeWidgets();
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onDateChange", function (value) {
+    _defineProperty(_assertThisInitialized(_this), "onDateChange", function (value) {
       var closeWidgets = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
@@ -112,3 +113,3 @@ var prevValue = _this.props.value;
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onChange", function (value) {
+    _defineProperty(_assertThisInitialized(_this), "onChange", function (value) {
       var closeWidgets = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
@@ -130,3 +131,3 @@
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onFocus", function (event) {
+    _defineProperty(_assertThisInitialized(_this), "onFocus", function (event) {
       var _this$props = _this.props,
@@ -165,3 +166,3 @@ disabled = _this$props.disabled,
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "openClock", function () {
+    _defineProperty(_assertThisInitialized(_this), "openClock", function () {
       _this.setState({
@@ -173,3 +174,3 @@ isCalendarOpen: false,
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "openCalendar", function () {
+    _defineProperty(_assertThisInitialized(_this), "openCalendar", function () {
       _this.setState({
@@ -181,3 +182,3 @@ isCalendarOpen: true,
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "toggleCalendar", function () {
+    _defineProperty(_assertThisInitialized(_this), "toggleCalendar", function () {
       _this.setState(function (prevState) {
@@ -191,3 +192,3 @@ return {
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "closeWidgets", function () {
+    _defineProperty(_assertThisInitialized(_this), "closeWidgets", function () {
       _this.setState(function (prevState) {
@@ -205,7 +206,7 @@ if (!prevState.isCalendarOpen && !prevState.isClockOpen) {
 
-    _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);
@@ -220,4 +221,3 @@ });
     value: function componentDidMount() {
-      document.addEventListener('mousedown', this.onOutsideAction);
-      document.addEventListener('focusin', this.onOutsideAction);
+      this.handleOutsideActionListeners();
     }
@@ -235,3 +235,9 @@ }, {
           onClockOpen = _this$props2.onClockOpen;
+      var isWidgetOpen = isCalendarOpen || isClockOpen;
+      var prevIsWidgetOpen = prevState.isCalendarOpen || prevState.isClockOpen;
 
+      if (isWidgetOpen !== prevIsWidgetOpen) {
+        this.handleOutsideActionListeners();
+      }
+
       if (isCalendarOpen !== prevState.isCalendarOpen) {
@@ -248,42 +254,75 @@ (0, _utils.callIfDefined)(isCalendarOpen ? onCalendarOpen : onCalendarClose);
     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 _this$state2 = this.state,
+          isCalendarOpen = _this$state2.isCalendarOpen,
+          isClockOpen = _this$state2.isClockOpen;
+      var isWidgetOpen = isCalendarOpen || isClockOpen;
+      var shouldListenWithFallback = typeof shouldListen !== 'undefined' ? shouldListen : isWidgetOpen;
+      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,
+          amPmAriaLabel = _this$props3.amPmAriaLabel,
+          calendarAriaLabel = _this$props3.calendarAriaLabel,
           calendarIcon = _this$props3.calendarIcon,
+          clearAriaLabel = _this$props3.clearAriaLabel,
           clearIcon = _this$props3.clearIcon,
+          dayAriaLabel = _this$props3.dayAriaLabel,
           disabled = _this$props3.disabled,
           format = _this$props3.format,
+          hourAriaLabel = _this$props3.hourAriaLabel,
           locale = _this$props3.locale,
+          maxDate = _this$props3.maxDate,
           maxDetail = _this$props3.maxDetail,
-          maxDate = _this$props3.maxDate,
           minDate = _this$props3.minDate,
+          minuteAriaLabel = _this$props3.minuteAriaLabel,
+          monthAriaLabel = _this$props3.monthAriaLabel,
           name = _this$props3.name,
+          nativeInputAriaLabel = _this$props3.nativeInputAriaLabel,
           required = _this$props3.required,
+          secondAriaLabel = _this$props3.secondAriaLabel,
           showLeadingZeros = _this$props3.showLeadingZeros,
-          value = _this$props3.value;
-      var _this$state2 = this.state,
-          isCalendarOpen = _this$state2.isCalendarOpen,
-          isClockOpen = _this$state2.isClockOpen;
-      return _react.default.createElement("div", {
+          value = _this$props3.value,
+          yearAriaLabel = _this$props3.yearAriaLabel;
+      var _this$state3 = this.state,
+          isCalendarOpen = _this$state3.isCalendarOpen,
+          isClockOpen = _this$state3.isClockOpen;
+      return _react["default"].createElement("div", {
         className: "".concat(baseClassName, "__wrapper")
-      }, _react.default.createElement(_DateTimeInput.default, {
+      }, _react["default"].createElement(_DateTimeInput["default"], {
+        amPmAriaLabel: amPmAriaLabel,
         className: "".concat(baseClassName, "__inputGroup"),
+        dayAriaLabel: dayAriaLabel,
         disabled: disabled,
         format: format,
+        hourAriaLabel: hourAriaLabel,
+        isWidgetOpen: isCalendarOpen || isClockOpen,
         locale: locale,
-        isWidgetOpen: isCalendarOpen || isClockOpen,
+        maxDate: maxDate,
         maxDetail: maxDetail,
-        maxDate: maxDate,
         minDate: minDate,
+        minuteAriaLabel: minuteAriaLabel,
+        monthAriaLabel: monthAriaLabel,
         name: name,
+        nativeInputAriaLabel: nativeInputAriaLabel,
         onChange: this.onChange,
         placeholder: this.placeholder,
         required: required,
+        secondAriaLabel: secondAriaLabel,
         showLeadingZeros: showLeadingZeros,
-        value: value
-      }), clearIcon !== null && _react.default.createElement("button", {
+        value: value,
+        yearAriaLabel: yearAriaLabel
+      }), clearIcon !== null && _react["default"].createElement("button", {
+        "aria-label": clearAriaLabel,
         className: "".concat(baseClassName, "__clear-button ").concat(baseClassName, "__button"),
@@ -294,3 +333,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"),
@@ -322,5 +362,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(isCalendarOpen ? '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(isCalendarOpen ? 'open' : 'closed'))
+      }, _react["default"].createElement(_entry["default"], _extends({
         className: calendarClassName,
@@ -350,5 +390,5 @@ onChange: this.onDateChange,
       var maxDetailIndex = allViews.indexOf(maxDetail);
-      return _react.default.createElement(_reactFit.default, null, _react.default.createElement("div", {
-        className: (0, _mergeClassNames.default)(className, "".concat(className, "--").concat(isClockOpen ? 'open' : 'closed'))
-      }, _react.default.createElement(_entry2.default, _extends({
+      return _react["default"].createElement(_reactFit["default"], null, _react["default"].createElement("div", {
+        className: (0, _mergeClassNames["default"])(className, "".concat(className, "--").concat(isClockOpen ? 'open' : 'closed'))
+      }, _react["default"].createElement(_entry2["default"], _extends({
         className: clockClassName,
@@ -362,3 +402,3 @@ renderMinuteHand: maxDetailIndex > 0,
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
 
@@ -368,7 +408,7 @@ var _this$props6 = this.props,
           disabled = _this$props6.disabled;
-      var _this$state3 = this.state,
-          isCalendarOpen = _this$state3.isCalendarOpen,
-          isClockOpen = _this$state3.isClockOpen;
-      return _react.default.createElement("div", _extends({
-        className: (0, _mergeClassNames.default)(baseClassName, "".concat(baseClassName, "--").concat(isCalendarOpen || isClockOpen ? 'open' : 'closed'), "".concat(baseClassName, "--").concat(disabled ? 'disabled' : 'enabled'), className)
+      var _this$state4 = this.state,
+          isCalendarOpen = _this$state4.isCalendarOpen,
+          isClockOpen = _this$state4.isClockOpen;
+      return _react["default"].createElement("div", _extends({
+        className: (0, _mergeClassNames["default"])(baseClassName, "".concat(baseClassName, "--").concat(isCalendarOpen || isClockOpen ? 'open' : 'closed'), "".concat(baseClassName, "--").concat(disabled ? 'disabled' : 'enabled'), className)
       }, this.eventProps, {
@@ -381,3 +421,3 @@ onFocus: this.onFocus,
 
-          _this2.wrapper = _ref;
+          _this3.wrapper = _ref;
         }
@@ -389,3 +429,3 @@ }), this.renderInputs(), this.renderCalendar(), this.renderClock());
     get: function get() {
-      return (0, _makeEventProps.default)(this.props);
+      return (0, _makeEventProps["default"])(this.props);
     }
@@ -414,13 +454,15 @@ }], [{
 
-exports.default = DateTimePicker;
+exports["default"] = DateTimePicker;
+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",
@@ -431,3 +473,3 @@ height: "15",
   fill: "none"
-}), _react.default.createElement("line", {
+}), _react["default"].createElement("line", {
   x1: "6",
@@ -437,3 +479,3 @@ y1: "0",
   y2: "4"
-}), _react.default.createElement("line", {
+}), _react["default"].createElement("line", {
   x1: "13",
@@ -443,13 +485,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",
@@ -459,3 +495,3 @@ y1: "4",
   y2: "15"
-}), _react.default.createElement("line", {
+}), _react["default"].createElement("line", {
   x1: "15",
@@ -465,3 +501,3 @@ y1: "4",
   y2: "15"
-})));
+}));
 
@@ -475,26 +511,34 @@ DateTimePicker.defaultProps = {
 };
-DateTimePicker.propTypes = _objectSpread({}, _entry.default.propTypes, _entry2.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,
-  clockClassName: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
-  disableClock: _propTypes.default.bool,
-  disabled: _propTypes.default.bool,
-  format: _propTypes.default.string,
-  isCalendarOpen: _propTypes.default.bool,
-  isClockOpen: _propTypes.default.bool,
+DateTimePicker.propTypes = _objectSpread({}, _entry["default"].propTypes, {}, _entry2["default"].propTypes, {
+  amPmAriaLabel: _propTypes["default"].string,
+  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,
+  clockClassName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string)]),
+  disableClock: _propTypes["default"].bool,
+  disabled: _propTypes["default"].bool,
+  format: _propTypes["default"].string,
+  hourAriaLabel: _propTypes["default"].string,
+  isCalendarOpen: _propTypes["default"].bool,
+  isClockOpen: _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,
-  onCalendarClose: _propTypes.default.func,
-  onCalendarOpen: _propTypes.default.func,
-  onChange: _propTypes.default.func,
-  onClockClose: _propTypes.default.func,
-  onClockOpen: _propTypes.default.func,
-  required: _propTypes.default.bool,
-  showLeadingZeros: _propTypes.default.bool,
-  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.instanceOf(Date)])
+  minuteAriaLabel: _propTypes["default"].string,
+  name: _propTypes["default"].string,
+  nativeInputAriaLabel: _propTypes["default"].string,
+  onCalendarClose: _propTypes["default"].func,
+  onCalendarOpen: _propTypes["default"].func,
+  onChange: _propTypes["default"].func,
+  onClockClose: _propTypes["default"].func,
+  onClockOpen: _propTypes["default"].func,
+  required: _propTypes["default"].bool,
+  secondAriaLabel: _propTypes["default"].string,
+  showLeadingZeros: _propTypes["default"].bool,
+  value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].instanceOf(Date)])
 });
 (0, _reactLifecyclesCompat.polyfill)(DateTimePicker);

dist/Divider.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -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 }; }
 
 var Divider = function Divider(_ref) {
   var children = _ref.children;
-  return _react.default.createElement("span", {
+  return _react["default"].createElement("span", {
     className: "react-datetime-picker__inputGroup__divider"
@@ -24,5 +24,5 @@ }, children);
 Divider.propTypes = {
-  children: _propTypes.default.node
+  children: _propTypes["default"].node
 };
 var _default = Divider;
-exports.default = _default;
+exports["default"] = _default;

dist/entry.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -17,7 +17,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 = _DateTimePicker.default;
-exports.default = _default;
+var _default = _DateTimePicker["default"];
+exports["default"] = _default;

dist/entry.nostyle.js

@@ -6,9 +6,9 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
 var _DateTimePicker = _interopRequireDefault(require("./DateTimePicker"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _default = _DateTimePicker.default;
-exports.default = _default;
+var _default = _DateTimePicker["default"];
+exports["default"] = _default;

dist/shared/dateFormatter.js

@@ -10,3 +10,3 @@ "use strict";
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -16,3 +16,3 @@ /* eslint-disable import/prefer-default-export */
   return function (locale, date) {
-    return date.toLocaleString(locale || (0, _getUserLocale.default)(), options);
+    return date.toLocaleString(locale || (0, _getUserLocale["default"])(), options);
   };
@@ -19,0 +19,0 @@ };

package.json

 {
   "name": "react-datetime-picker",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "A date range picker for your React app.",
@@ -8,3 +8,3 @@ "main": "dist/entry.js",
   "scripts": {
-    "build": "yarn run build-js && yarn run copy-styles && yarn run build-styles",
+    "build": "yarn build-js && yarn copy-styles && yarn build-styles",
     "build-js": "babel src -d dist --ignore **/__tests__",
@@ -14,7 +14,7 @@ "build-styles": "lessc ./dist/DateTimePicker.less ./dist/DateTimePicker.css",
     "copy-styles": "node ./copy-styles.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"
   },
@@ -56,23 +56,23 @@ "jest": {
     "react-clock": "^2.3.0",
-    "react-date-picker": "^7.5.1",
+    "react-date-picker": "^7.6.0",
     "react-fit": "^1.0.3",
     "react-lifecycles-compat": "^3.0.4",
-    "react-time-picker": "^3.5.2"
+    "react-time-picker": "^3.6.0"
   },
   "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",
@@ -79,0 +79,0 @@ "react": "^16.7.0",

README.md

@@ -88,29 +88,39 @@ ![downloads](https://img.shields.io/npm/dt/react-datetime-picker.svg) ![build](https://img.shields.io/travis/wojtekmaj/react-datetime-picker/master.svg) ![dependencies](https://img.shields.io/david/wojtekmaj/react-datetime-picker.svg
 
-|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>|
-|clockClassName|Defines class name(s) that will be added along with "react-clock" 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-datetime-picker" to the main React-DateTime-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`|
-|disableClock|Defines whether the clock 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`, `H`, `HH`, `h`, `hh`, `m`, `mm`, `s`, `ss`, `a`.|`"y-MM-dd h:mm:ss a"`|
-|isCalendarOpen|Defines whether the calendar should be opened. Defaults to false.|`true`|
-|isClockOpen|Defines whether the clock should be opened. Defaults to false.|`true`|
-|locale|Defines which locale should be used by the datetime 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-DateTime-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-DateTime-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 "datetime".|`"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)`|
-|onClockClose|Function called when the clock closes.|`() => alert('Clock closed')`|
-|onClockOpen|Function called when the clock opens.|`() => alert('Clock opened')`|
-|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|
+|----|----|----|----|
+|amPmAriaLabel|`aria-label` for the AM/PM select input.|n/a|`"Select AM/PM"`|
+|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>|
+|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>|
+|clockClassName|Class name(s) that will be added along with `"react-clock"` to the main React-Calendar `<div>` element.|n/a|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>|
+|className|Class name(s) that will be added along with `"react-datetime-picker"` to the main React-DateTime-Picker `<div>` element.|n/a|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>|
+|dayAriaLabel|`aria-label` for the day input.|n/a|`"Day"`|
+|disabled|Whether the date picker should be disabled.|`false`|`true`|
+|disableClock|Whether the clock 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`, `H`, `HH`, `h`, `hh`, `m`, `mm`, `s`, `ss`, `a`.|n/a|`"y-MM-dd h:mm:ss a"`|
+|hourAriaLabel|`aria-label` for the hour input.|n/a|`"Hour"`|
+|isCalendarOpen|Whether the calendar should be opened.|`false`|`true`|
+|isClockOpen|Whether the clock should be opened.|`false`|`true`|
+|locale|Locale that should be used by the datetime 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-DateTime-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-DateTime-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"`|
+|minuteAriaLabel|`aria-label` for the minute input.|n/a|`"Minute"`|
+|monthAriaLabel|`aria-label` for the month input.|n/a|`"Month"`|
+|name|Input name.|`"datetime"`|`"myCustomName"`|
+|nativeInputAriaLabel|`aria-label` for the native datetime 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)`|
+|onClockClose|Function called when the clock closes.|n/a|`() => alert('Clock closed')`|
+|onClockOpen|Function called when the clock opens.|n/a|`() => alert('Clock opened')`|
+|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"`|
+|required|Whether date input should be required.|`false`|`true`|
+|secondAriaLabel|`aria-label` for the second input.|n/a|`"Second"`|
+|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"`|
 
@@ -117,0 +127,0 @@ ### Calendar

src/__tests__/DateTimeInput.jsx

@@ -414,6 +414,4 @@ import React from 'react';
 
-    it('throws error for "MMM"', () => {
-      muteConsole();
-
-      const renderComponent = () => mount(
+    it('renders "MMM" properly', () => {
+      const component = mount(
         <DateTimeInput
@@ -425,7 +423,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(
+        <DateTimeInput
+          {...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', () => {
@@ -840,2 +857,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(
+      <DateTimeInput {...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(
+      <DateTimeInput {...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', () => {
@@ -842,0 +892,0 @@ const onChange = jest.fn();

src/__tests__/DateTimePicker.jsx

@@ -31,2 +31,46 @@ import React from 'react';
 
+  it('passes format to DateInput', () => {
+    const format = 'y-MM-dd h:mm:ss a';
+
+    const component = mount(
+      <DateTimePicker format={format} />
+    );
+
+    const dateInput = component.find('DateTimeInput');
+
+    expect(dateInput.prop('format')).toBe(format);
+  });
+
+  it('passes aria-label props to DateInput', () => {
+    const ariaLabelProps = {
+      amPmAriaLabel: 'Select AM/PM',
+      calendarAriaLabel: 'Toggle calendar',
+      clearAriaLabel: 'Clear value',
+      dayAriaLabel: 'Day',
+      hourAriaLabel: 'Hour',
+      minuteAriaLabel: 'Minute',
+      monthAriaLabel: 'Month',
+      secondAriaLabel: 'Second',
+      yearAriaLabel: 'Year'
+    };
+
+    const component = mount(
+      <DateTimePicker {...ariaLabelProps} />
+    );
+
+    const calendarButton = component.find('button.react-datetime-picker__calendar-button');
+    const clearButton = component.find('button.react-datetime-picker__clear-button');
+    const dateTimeInput = component.find('DateTimeInput');
+
+    expect(calendarButton.prop('aria-label')).toBe(ariaLabelProps.calendarAriaLabel);
+    expect(clearButton.prop('aria-label')).toBe(ariaLabelProps.clearAriaLabel);
+    expect(dateTimeInput.prop('dayAriaLabel')).toBe(ariaLabelProps.dayAriaLabel);
+    expect(dateTimeInput.prop('monthAriaLabel')).toBe(ariaLabelProps.monthAriaLabel);
+    expect(dateTimeInput.prop('yearAriaLabel')).toBe(ariaLabelProps.yearAriaLabel);
+    expect(dateTimeInput.prop('amPmAriaLabel')).toBe(ariaLabelProps.amPmAriaLabel);
+    expect(dateTimeInput.prop('hourAriaLabel')).toBe(ariaLabelProps.hourAriaLabel);
+    expect(dateTimeInput.prop('minuteAriaLabel')).toBe(ariaLabelProps.minuteAriaLabel);
+    expect(dateTimeInput.prop('secondAriaLabel')).toBe(ariaLabelProps.secondAriaLabel);
+  });
+
   it('applies className to its wrapper when given a string', () => {
@@ -264,2 +308,19 @@ const className = 'testClassName';
 
+  it('closes Calendar component when tapped outside', () => {
+    const root = document.createElement('div');
+    document.body.appendChild(root);
+
+    const component = mount(
+      <DateTimePicker isCalendarOpen />,
+      { attachTo: root }
+    );
+
+    const event = document.createEvent('TouchEvent');
+    event.initEvent('touchstart', true, true);
+    document.body.dispatchEvent(event);
+    component.update();
+
+    expect(component.state('isCalendarOpen')).toBe(false);
+  });
+
   it('closes Clock component when clicked outside', () => {
@@ -299,2 +360,19 @@ const root = document.createElement('div');
 
+  it('closes Clock component when tapped outside', () => {
+    const root = document.createElement('div');
+    document.body.appendChild(root);
+
+    const component = mount(
+      <DateTimePicker isClockOpen />,
+      { attachTo: root }
+    );
+
+    const event = document.createEvent('TouchEvent');
+    event.initEvent('touchstart', true, true);
+    document.body.dispatchEvent(event);
+    component.update();
+
+    expect(component.state('isClockOpen')).toBe(false);
+  });
+
   it('does not close Calendar component when focused within date inputs', () => {
@@ -301,0 +379,0 @@ const component = mount(

src/DateTimeInput.jsx

@@ -7,2 +7,3 @@ import React, { PureComponent } from 'react';
 import MonthInput from 'react-date-picker/dist/DateInput/MonthInput';
+import MonthSelect from 'react-date-picker/dist/DateInput/MonthSelect';
 import YearInput from 'react-date-picker/dist/DateInput/YearInput';
@@ -317,3 +318,2 @@ import Hour12Input from 'react-time-picker/dist/TimeInput/Hour12Input';
   get commonInputProps() {
-    const { maxTime, minTime } = this;
     const {
@@ -332,7 +332,6 @@ className,
       maxDate: maxDate || defaultMaxDate,
-      maxTime,
       minDate: minDate || defaultMinDate,
-      minTime,
       onChange: this.onChange,
       onKeyDown: this.onKeyDown,
+      onKeyUp: this.onKeyUp,
       placeholder: '--',
@@ -348,2 +347,11 @@ // This is only for showing validity when editing
 
+  get commonTimeInputProps() {
+    const { maxTime, minTime } = this;
+
+    return {
+      maxTime,
+      minTime,
+    };
+  }
+
   /**
@@ -374,3 +382,3 @@ * Returns value type that can be returned with currently applied settings.
 
-        const input = event.target;
+        const { target: input } = event;
         const property = event.key === 'ArrowLeft' ? 'previousElementSibling' : 'nextElementSibling';
@@ -385,2 +393,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);
+    }
+  }
+
   /**
@@ -510,3 +543,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;
@@ -524,2 +557,3 @@
         {...this.commonInputProps}
+        dayAriaLabel={dayAriaLabel}
         month={month}
@@ -534,9 +568,23 @@ showLeadingZeros={showLeadingZerosFromFormat || showLeadingZeros}
   renderMonth = (currentMatch) => {
-    const { showLeadingZeros } = this.props;
-    const { month } = this.state;
+    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;
@@ -548,4 +596,6 @@
         {...this.commonInputProps}
+        monthAriaLabel={monthAriaLabel}
         showLeadingZeros={showLeadingZerosFromFormat || showLeadingZeros}
         value={month}
+        year={year}
       />
@@ -556,2 +606,3 @@ );
   renderYear = () => {
+    const { yearAriaLabel } = this.props;
     const { year } = this.state;
@@ -565,2 +616,3 @@
         valueType="day"
+        yearAriaLabel={yearAriaLabel}
       />
@@ -571,2 +623,3 @@ );
   renderHour12 = (currentMatch) => {
+    const { hourAriaLabel } = this.props;
     const { amPm, hour } = this.state;
@@ -584,3 +637,5 @@
         {...this.commonInputProps}
+        {...this.commonTimeInputProps}
         amPm={amPm}
+        hourAriaLabel={hourAriaLabel}
         showLeadingZeros={showLeadingZeros}
@@ -593,2 +648,3 @@ value={hour}
   renderHour24 = (currentMatch) => {
+    const { hourAriaLabel } = this.props;
     const { hour } = this.state;
@@ -606,2 +662,4 @@
         {...this.commonInputProps}
+        {...this.commonTimeInputProps}
+        hourAriaLabel={hourAriaLabel}
         showLeadingZeros={showLeadingZeros}
@@ -614,2 +672,3 @@ value={hour}
   renderMinute = (currentMatch) => {
+    const { minuteAriaLabel } = this.props;
     const { hour, minute } = this.state;
@@ -627,3 +686,5 @@
         {...this.commonInputProps}
+        {...this.commonTimeInputProps}
         hour={hour}
+        minuteAriaLabel={minuteAriaLabel}
         showLeadingZeros={showLeadingZeros}
@@ -636,2 +697,3 @@ value={minute}
   renderSecond = (currentMatch) => {
+    const { secondAriaLabel } = this.props;
     const { hour, minute, second } = this.state;
@@ -649,4 +711,6 @@
         {...this.commonInputProps}
+        {...this.commonTimeInputProps}
         hour={hour}
         minute={minute}
+        secondAriaLabel={secondAriaLabel}
         showLeadingZeros={showLeadingZeros}
@@ -659,4 +723,4 @@ value={second}
   renderAmPm = () => {
+    const { amPmAriaLabel, locale } = this.props;
     const { amPm } = this.state;
-    const { locale } = this.props;
 
@@ -667,2 +731,4 @@ return (
         {...this.commonInputProps}
+        {...this.commonTimeInputProps}
+        amPmAriaLabel={amPmAriaLabel}
         locale={locale}
@@ -697,2 +763,3 @@ onChange={this.onChangeAmPm}
       name,
+      nativeInputAriaLabel,
       required,
@@ -709,2 +776,3 @@ } = this.props;
         name={name}
+        nativeInputAriaLabel={nativeInputAriaLabel}
         onChange={this.onChangeNative}
@@ -740,5 +808,8 @@ required={required}
 DateTimeInput.propTypes = {
+  amPmAriaLabel: PropTypes.string,
   className: PropTypes.string.isRequired,
+  dayAriaLabel: PropTypes.string,
   disabled: PropTypes.bool,
   format: PropTypes.string,
+  hourAriaLabel: PropTypes.string,
   isWidgetOpen: PropTypes.bool,
@@ -749,5 +820,9 @@ locale: PropTypes.string,
   minDate: isMinDate,
+  minuteAriaLabel: PropTypes.string,
+  monthAriaLabel: PropTypes.string,
   name: PropTypes.string,
+  nativeInputAriaLabel: PropTypes.string,
   onChange: PropTypes.func,
   required: PropTypes.bool,
+  secondAriaLabel: PropTypes.string,
   showLeadingZeros: PropTypes.bool,
@@ -759,4 +834,5 @@ value: PropTypes.oneOfType([
   ]),
+  yearAriaLabel: PropTypes.string,
 };
 
 polyfill(DateTimeInput);

src/DateTimeInput/__tests__/NativeInput.jsx

@@ -24,2 +24,17 @@ import React from 'react';
 
+  it('applies given aria-label properly', () => {
+    const nativeInputAriaLabel = 'Date';
+
+    const component = shallow(
+      <NativeInput
+        {...defaultProps}
+        nativeInputAriaLabel={nativeInputAriaLabel}
+      />
+    );
+
+    const select = component.find('input');
+
+    expect(select.prop('aria-label')).toBe(nativeInputAriaLabel);
+  });
+
   it('has proper name defined', () => {
@@ -26,0 +41,0 @@ const name = 'testName';

src/DateTimeInput/NativeInput.jsx

@@ -1,2 +0,2 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
@@ -12,11 +12,19 @@
 
-export default class NativeInput extends PureComponent {
-  get nativeValueParser() {
-    const { valueType } = this.props;
-
+export default function NativeInput({
+  disabled,
+  maxDate,
+  minDate,
+  name,
+  nativeInputAriaLabel,
+  onChange,
+  required,
+  value,
+  valueType,
+}) {
+  const nativeValueParser = (() => {
     switch (valueType) {
       case 'hour':
-        return value => `${getISOLocalDate(value)}T${getHours(value)}:00`;
+        return receivedValue => `${getISOLocalDate(receivedValue)}T${getHours(receivedValue)}:00`;
       case 'minute':
-        return value => `${getISOLocalDate(value)}T${getHoursMinutes(value)}`;
+        return receivedValue => `${getISOLocalDate(receivedValue)}T${getHoursMinutes(receivedValue)}`;
       case 'second':
@@ -27,7 +35,5 @@ return getISOLocalDateTime;
     }
-  }
+  })();
 
-  get step() {
-    const { valueType } = this.props;
-
+  const step = (() => {
     switch (valueType) {
@@ -43,33 +49,29 @@ case 'hour':
     }
+  })();
+
+  function stopPropagation(event) {
+    event.stopPropagation();
   }
 
-  stopPropagation = event => event.stopPropagation();
-
-  render() {
-    const { nativeValueParser, step } = this;
-    const {
-      disabled, maxDate, minDate, name, onChange, required, value,
-    } = this.props;
-
-    return (
-      <input
-        type="datetime-local"
-        disabled={disabled}
-        max={maxDate ? nativeValueParser(maxDate) : null}
-        min={minDate ? nativeValueParser(minDate) : null}
-        name={name}
-        onChange={onChange}
-        onFocus={this.stopPropagation}
-        required={required}
-        step={step}
-        style={{
-          visibility: 'hidden',
-          position: 'absolute',
-          top: '-9999px',
-          left: '-9999px',
-        }}
-        value={value ? nativeValueParser(value) : ''}
-      />
-    );
-  }
+  return (
+    <input
+      type="datetime-local"
+      aria-label={nativeInputAriaLabel}
+      disabled={disabled}
+      max={maxDate ? nativeValueParser(maxDate) : null}
+      min={minDate ? nativeValueParser(minDate) : null}
+      name={name}
+      onChange={onChange}
+      onFocus={stopPropagation}
+      required={required}
+      step={step}
+      style={{
+        visibility: 'hidden',
+        position: 'absolute',
+        top: '-9999px',
+        left: '-9999px',
+      }}
+      value={value ? nativeValueParser(value) : ''}
+    />
+  );
 }
@@ -82,2 +84,3 @@
   name: PropTypes.string,
+  nativeInputAriaLabel: PropTypes.string,
   onChange: PropTypes.func,
@@ -84,0 +87,0 @@ required: PropTypes.bool,

src/DateTimePicker.jsx

@@ -18,2 +18,3 @@ import React, { PureComponent } from 'react';
 const baseClassName = 'react-datetime-picker';
+const outsideActionEvents = ['mousedown', 'focusin', 'touchstart'];
 
@@ -44,4 +45,3 @@ export default class DateTimePicker extends PureComponent {
   componentDidMount() {
-    document.addEventListener('mousedown', this.onOutsideAction);
-    document.addEventListener('focusin', this.onOutsideAction);
+    this.handleOutsideActionListeners();
   }
@@ -58,2 +58,9 @@
 
+    const isWidgetOpen = isCalendarOpen || isClockOpen;
+    const prevIsWidgetOpen = prevState.isCalendarOpen || prevState.isClockOpen;
+
+    if (isWidgetOpen !== prevIsWidgetOpen) {
+      this.handleOutsideActionListeners();
+    }
+
     if (isCalendarOpen !== prevState.isCalendarOpen) {
@@ -69,6 +76,14 @@ callIfDefined(isCalendarOpen ? onCalendarOpen : onCalendarClose);
   componentWillUnmount() {
-    document.removeEventListener('mousedown', this.onOutsideAction);
-    document.removeEventListener('focusin', this.onOutsideAction);
+    this.handleOutsideActionListeners(false);
   }
 
+  handleOutsideActionListeners(shouldListen) {
+    const { isCalendarOpen, isClockOpen } = this.state;
+    const isWidgetOpen = isCalendarOpen || isClockOpen;
+
+    const shouldListenWithFallback = typeof shouldListen !== 'undefined' ? shouldListen : isWidgetOpen;
+    const fnName = shouldListenWithFallback ? 'addEventListener' : 'removeEventListener';
+    outsideActionEvents.forEach(eventName => document[fnName](eventName, this.onOutsideAction));
+  }
+
   onOutsideAction = (event) => {
@@ -178,14 +193,24 @@ if (this.wrapper && !this.wrapper.contains(event.target)) {
     const {
+      amPmAriaLabel,
+      calendarAriaLabel,
       calendarIcon,
+      clearAriaLabel,
       clearIcon,
+      dayAriaLabel,
       disabled,
       format,
+      hourAriaLabel,
       locale,
+      maxDate,
       maxDetail,
-      maxDate,
       minDate,
+      minuteAriaLabel,
+      monthAriaLabel,
       name,
+      nativeInputAriaLabel,
       required,
+      secondAriaLabel,
       showLeadingZeros,
       value,
+      yearAriaLabel,
     } = this.props;
@@ -198,19 +223,28 @@
         <DateTimeInput
+          amPmAriaLabel={amPmAriaLabel}
           className={`${baseClassName}__inputGroup`}
+          dayAriaLabel={dayAriaLabel}
           disabled={disabled}
           format={format}
+          hourAriaLabel={hourAriaLabel}
+          isWidgetOpen={isCalendarOpen || isClockOpen}
           locale={locale}
-          isWidgetOpen={isCalendarOpen || isClockOpen}
+          maxDate={maxDate}
           maxDetail={maxDetail}
-          maxDate={maxDate}
           minDate={minDate}
+          minuteAriaLabel={minuteAriaLabel}
+          monthAriaLabel={monthAriaLabel}
           name={name}
+          nativeInputAriaLabel={nativeInputAriaLabel}
           onChange={this.onChange}
           placeholder={this.placeholder}
           required={required}
+          secondAriaLabel={secondAriaLabel}
           showLeadingZeros={showLeadingZeros}
           value={value}
+          yearAriaLabel={yearAriaLabel}
         />
         {clearIcon !== null && (
           <button
+            aria-label={clearAriaLabel}
             className={`${baseClassName}__clear-button ${baseClassName}__button`}
@@ -227,2 +261,3 @@ disabled={disabled}
           <button
+            aria-label={calendarAriaLabel}
             className={`${baseClassName}__calendar-button ${baseClassName}__button`}
@@ -338,9 +373,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>
@@ -350,7 +395,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>
@@ -370,2 +416,4 @@ );
   ...Clock.propTypes,
+  amPmAriaLabel: PropTypes.string,
+  calendarAriaLabel: PropTypes.string,
   calendarClassName: PropTypes.oneOfType([
@@ -380,2 +428,3 @@ PropTypes.string,
   ]),
+  clearAriaLabel: PropTypes.string,
   clearIcon: PropTypes.node,
@@ -389,8 +438,12 @@ clockClassName: PropTypes.oneOfType([
   format: PropTypes.string,
+  hourAriaLabel: PropTypes.string,
   isCalendarOpen: PropTypes.bool,
   isClockOpen: PropTypes.bool,
+  locale: PropTypes.string,
   maxDate: isMaxDate,
   maxDetail: PropTypes.oneOf(allViews),
   minDate: isMinDate,
+  minuteAriaLabel: PropTypes.string,
   name: PropTypes.string,
+  nativeInputAriaLabel: PropTypes.string,
   onCalendarClose: PropTypes.func,
@@ -402,2 +455,3 @@ onCalendarOpen: PropTypes.func,
   required: PropTypes.bool,
+  secondAriaLabel: PropTypes.string,
   showLeadingZeros: PropTypes.bool,
@@ -404,0 +458,0 @@ value: PropTypes.oneOfType([

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

176521

increased by12.47%

Number of package files

35

increased by9.38%

Lines of code

4327

increased by12.95%

Number of lines in readme file

152

increased by7.04%

Dependency changes

• Updatedreact-date-picker@^7.6.0

• Updatedreact-time-picker@^3.6.0