react-datetime-picker - npm Package Compare versions

Comparing version 1.3.5 to 1.4.0

dist/DateTimeInput.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+
 var _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; };
@@ -34,6 +36,10 @@
 
-var _HourInput = require('react-time-picker/dist/TimeInput/HourInput');
+var _Hour12Input = require('react-time-picker/dist/TimeInput/Hour12Input');
 
-var _HourInput2 = _interopRequireDefault(_HourInput);
+var _Hour12Input2 = _interopRequireDefault(_Hour12Input);
 
+var _Hour24Input = require('react-time-picker/dist/TimeInput/Hour24Input');
+
+var _Hour24Input2 = _interopRequireDefault(_Hour24Input);
+
 var _MinuteInput = require('react-time-picker/dist/TimeInput/MinuteInput');
@@ -47,2 +53,6 @@
 
+var _AmPm = require('react-time-picker/dist/TimeInput/AmPm');
+
+var _AmPm2 = _interopRequireDefault(_AmPm);
+
 var _Divider = require('./Divider');
@@ -109,5 +119,7 @@
       // We don't want spaces in dates
-      a.charCodeAt(0) !== 32 &&
+      a.charCodeAt(0) !== 32
       // Internet Explorer specific
-      a.charCodeAt(0) !== 8206
+      && a.charCodeAt(0) !== 8206
+      // Remove non-ASCII characters
+      && /^[\x20-\x7F]*$/.test(a)
     );
@@ -132,2 +144,3 @@ }).join('');
     return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = DateTimeInput.__proto__ || Object.getPrototypeOf(DateTimeInput)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      amPm: null,
       year: null,
@@ -169,14 +182,42 @@ month: null,
 
-      _this.setState(_defineProperty({}, name, value ? parseInt(value, 10) : null), _this.onChangeExternal);
+      switch (name) {
+        case 'hour12':
+          {
+            _this.setState(function (prevState) {
+              return {
+                hour: value ? (0, _dates.convert12to24)(parseInt(value, 10), prevState.amPm) : null
+              };
+            }, _this.onChangeExternal);
+            break;
+          }
+        case 'hour24':
+          {
+            _this.setState({ hour: value ? parseInt(value, 10) : null }, _this.onChangeExternal);
+            break;
+          }
+        default:
+          {
+            _this.setState(_defineProperty({}, name, value ? parseInt(value, 10) : null), _this.onChangeExternal);
+          }
+      }
     }, _this.onChangeNative = function (event) {
+      var onChange = _this.props.onChange;
       var value = event.target.value;
 
 
-      if (_this.props.onChange) {
-        _this.props.onChange(value);
+      if (onChange) {
+        onChange(value);
       }
+    }, _this.onChangeAmPm = function (event) {
+      var value = event.target.value;
+
+
+      _this.setState({ amPm: value }, _this.onChangeExternal);
     }, _this.onChangeExternal = function () {
-      if (_this.props.onChange) {
-        var formElements = [_this.dayInput, _this.monthInput, _this.yearInput, _this.hourInput, _this.minuteInput, _this.secondInput].filter(Boolean);
+      var onChange = _this.props.onChange;
 
+
+      if (onChange) {
+        var formElements = [_this.dayInput, _this.monthInput, _this.yearInput, _this.hour12Input, _this.hour24Input, _this.minuteInput, _this.secondInput, _this.amPmInput].filter(Boolean);
+
         var values = {};
@@ -190,5 +231,6 @@ formElements.forEach(function (formElement) {
         })) {
-          var proposedValue = new Date(values.year, (values.month || 1) - 1, values.day || 1, values.hour, values.minute || 0, values.second || 0);
+          var hour = values.hour24 || (0, _dates.convert12to24)(values.hour12, values.amPm);
+          var proposedValue = new Date(values.year, (values.month || 1) - 1, values.day || 1, hour, values.minute || 0, values.second || 0);
           var processedValue = proposedValue;
-          _this.props.onChange(processedValue, false);
+          onChange(processedValue, false);
         }
@@ -202,11 +244,20 @@ }
     value: function renderDay() {
+      var _props = this.props,
+          maxDetail = _props.maxDetail,
+          showLeadingZeros = _props.showLeadingZeros;
+      var _state = this.state,
+          day = _state.day,
+          month = _state.month,
+          year = _state.year;
+
+
       return _react2.default.createElement(_DayInput2.default, _extends({
-        key: 'day',
-        className: className,
-        maxDetail: this.props.maxDetail,
-        month: this.state.month,
-        showLeadingZeros: this.props.showLeadingZeros,
-        year: this.state.year,
-        value: this.state.day
-      }, this.commonInputProps));
+        key: 'day'
+      }, this.commonInputProps, {
+        maxDetail: maxDetail,
+        month: month,
+        showLeadingZeros: showLeadingZeros,
+        year: year,
+        value: day
+      }));
     }
@@ -216,9 +267,15 @@ }, {
     value: function renderMonth() {
+      var _props2 = this.props,
+          maxDetail = _props2.maxDetail,
+          showLeadingZeros = _props2.showLeadingZeros;
+      var month = this.state.month;
+
+
       return _react2.default.createElement(_MonthInput2.default, _extends({
-        key: 'month',
-        className: className,
-        maxDetail: this.props.maxDetail,
-        showLeadingZeros: this.props.showLeadingZeros,
-        value: this.state.month
-      }, this.commonInputProps));
+        key: 'month'
+      }, this.commonInputProps, {
+        maxDetail: maxDetail,
+        showLeadingZeros: showLeadingZeros,
+        value: month
+      }));
     }
@@ -228,19 +285,37 @@ }, {
     value: function renderYear() {
+      var year = this.state.year;
+
+
       return _react2.default.createElement(_YearInput2.default, _extends({
-        key: 'year',
-        className: className,
-        value: this.state.year,
+        key: 'year'
+      }, this.commonInputProps, {
+        value: year,
         valueType: 'day'
-      }, this.commonInputProps));
+      }));
     }
   }, {
-    key: 'renderHour',
-    value: function renderHour() {
-      return _react2.default.createElement(_HourInput2.default, _extends({
-        key: 'hour',
-        className: className,
-        value: this.state.hour
-      }, this.commonInputProps));
+    key: 'renderHour12',
+    value: function renderHour12() {
+      var hour = this.state.hour;
+
+
+      return _react2.default.createElement(_Hour12Input2.default, _extends({
+        key: 'hour12'
+      }, this.commonInputProps, {
+        value: hour
+      }));
     }
   }, {
+    key: 'renderHour24',
+    value: function renderHour24() {
+      var hour = this.state.hour;
+
+
+      return _react2.default.createElement(_Hour24Input2.default, _extends({
+        key: 'hour24'
+      }, this.commonInputProps, {
+        value: hour
+      }));
+    }
+  }, {
     key: 'renderMinute',
@@ -256,7 +331,9 @@ value: function renderMinute() {
 
+      var minute = this.state.minute;
+
+
       return _react2.default.createElement(_MinuteInput2.default, _extends({
         key: 'minute',
-        className: className,
-        maxDetail: this.props.maxDetail,
-        value: this.state.minute
+        maxDetail: maxDetail,
+        value: minute
       }, this.commonInputProps));
@@ -275,10 +352,26 @@ }
 
+      var second = this.state.second;
+
+
       return _react2.default.createElement(_SecondInput2.default, _extends({
-        key: 'second',
-        className: className,
-        maxDetail: this.props.maxDetail,
-        value: this.state.second
-      }, this.commonInputProps));
+        key: 'second'
+      }, this.commonInputProps, {
+        maxDetail: maxDetail,
+        value: second
+      }));
     }
   }, {
+    key: 'renderAmPm',
+    value: function renderAmPm() {
+      var amPm = this.state.amPm;
+
+
+      return _react2.default.createElement(_AmPm2.default, _extends({
+        key: 'ampm'
+      }, this.commonInputProps, {
+        value: amPm,
+        onChange: this.onChangeAmPm
+      }));
+    }
+  }, {
     key: 'renderCustomDateInputs',
@@ -303,6 +396,4 @@ value: function renderCustomDateInputs() {
         }
-      }).filter(Boolean).reduce(function (result, element, index, array) {
-        result.push(element);
-
-        if (index + 1 < array.length) {
+      }).filter(Boolean).reduce(function (result, element, index) {
+        if (index) {
           result.push(
@@ -317,2 +408,4 @@ // eslint-disable-next-line react/no-array-index-key
 
+        result.push(element);
+
         return result;
@@ -332,6 +425,6 @@ }, []);
         switch (part) {
+          case 'hour-12':
+            return _this3.renderHour12();
           case 'hour-24':
-            return _this3.renderHour();
-          case 'hour-12':
-            return _this3.renderHour();
+            return _this3.renderHour24();
           case 'minute':
@@ -342,10 +435,8 @@ return _this3.renderMinute();
           case 'ampm':
-            return null; // TODO
+            return _this3.renderAmPm();
           default:
             return null;
         }
-      }).filter(Boolean).reduce(function (result, element, index, array) {
-        result.push(element);
-
-        if (index + 1 < array.length) {
+      }).filter(Boolean).reduce(function (result, element, index) {
+        if (index && element.key !== 'ampm') {
           result.push(
@@ -360,2 +451,4 @@ // eslint-disable-next-line react/no-array-index-key
 
+        result.push(element);
+
         return result;
@@ -367,11 +460,20 @@ }, []);
     value: function renderNativeInput() {
+      var _props3 = this.props,
+          disabled = _props3.disabled,
+          maxDate = _props3.maxDate,
+          minDate = _props3.minDate,
+          name = _props3.name,
+          required = _props3.required,
+          value = _props3.value;
+
+
       return _react2.default.createElement(_NativeInput2.default, {
         key: 'time',
-        disabled: this.props.disabled,
-        maxDate: this.props.maxDate || defaultMaxDate,
-        minDate: this.props.minDate || defaultMinDate,
-        name: this.props.name,
+        disabled: disabled,
+        maxDate: maxDate || defaultMaxDate,
+        minDate: minDate || defaultMinDate,
+        name: name,
         onChange: this.onChangeNative,
-        required: this.props.required,
-        value: this.props.value,
+        required: required,
+        value: value,
         valueType: this.valueType
@@ -449,6 +551,15 @@ });
 
+      var _props4 = this.props,
+          disabled = _props4.disabled,
+          isWidgetOpen = _props4.isWidgetOpen,
+          maxDate = _props4.maxDate,
+          minDate = _props4.minDate,
+          required = _props4.required;
+
+
       return {
-        disabled: this.props.disabled,
-        maxDate: this.props.maxDate || defaultMaxDate,
-        minDate: this.props.minDate || defaultMinDate,
+        className: className,
+        disabled: disabled,
+        maxDate: maxDate || defaultMaxDate,
+        minDate: minDate || defaultMinDate,
         onChange: this.onChange,
@@ -458,8 +569,6 @@ onKeyDown: this.onKeyDown,
         // This is only for showing validity when editing
-        required: this.props.required || this.props.isWidgetOpen,
-        itemRef: function itemRef(ref) {
-          if (!ref) return;
-
+        required: required || isWidgetOpen,
+        itemRef: function itemRef(ref, name) {
           // Save a reference to each input field
-          _this4[ref.name + 'Input'] = ref;
+          _this4[(name || ref.name) + 'Input'] = ref;
         }
@@ -476,3 +585,6 @@ };
     get: function get() {
-      return this.props.maxDetail;
+      var maxDetail = this.props.maxDetail;
+
+
+      return maxDetail;
     }
@@ -516,5 +628,11 @@
       // Toggling calendar visibility resets values
-      nextState.isCalendarOpen || // Flag was toggled
-      datesAreDifferent(nextValue, prevState.value)) {
+      nextState.isCalendarOpen // Flag was toggled
+      || datesAreDifferent(nextValue, prevState.value)) {
         if (nextValue) {
+          var _convert24to = (0, _dates.convert24to12)((0, _dates.getHours)(nextValue));
+
+          var _convert24to2 = _slicedToArray(_convert24to, 2);
+
+          nextState.amPm = _convert24to2[1];
+
           nextState.year = (0, _dates.getYear)(nextValue);
@@ -527,2 +645,3 @@ nextState.month = (0, _dates.getMonth)(nextValue);
         } else {
+          nextState.amPm = null;
           nextState.year = null;
@@ -529,0 +648,0 @@ nextState.month = null;

dist/DateTimePicker.js

@@ -104,6 +104,10 @@ 'use strict';
     }, _this.onFocus = function (event) {
+      var disabled = _this.props.disabled;
+
       // Internet Explorer still fires onFocus on disabled elements
-      if (_this.props.disabled) {
+
+      if (disabled) {
         return;
       }
+
       switch (event.target.name) {
@@ -115,3 +119,4 @@ case 'day':
           break;
-        case 'hour':
+        case 'hour12':
+        case 'hour24':
         case 'minute':
@@ -167,3 +172,14 @@ case 'second':
     value: function renderInputs() {
-      var disabled = this.props.disabled;
+      var _props = this.props,
+          calendarIcon = _props.calendarIcon,
+          clearIcon = _props.clearIcon,
+          disabled = _props.disabled,
+          locale = _props.locale,
+          maxDetail = _props.maxDetail,
+          maxDate = _props.maxDate,
+          minDate = _props.minDate,
+          name = _props.name,
+          required = _props.required,
+          showLeadingZeros = _props.showLeadingZeros,
+          value = _props.value;
       var _state = this.state,
@@ -179,15 +195,15 @@ isCalendarOpen = _state.isCalendarOpen,
           disabled: disabled,
-          locale: this.props.locale,
+          locale: locale,
           isWidgetOpen: isCalendarOpen || isClockOpen,
-          maxDetail: this.props.maxDetail,
-          maxDate: this.props.maxDate,
-          minDate: this.props.minDate,
-          name: this.props.name,
+          maxDetail: maxDetail,
+          maxDate: maxDate,
+          minDate: minDate,
+          name: name,
           onChange: this.onTimeChange,
           placeholder: this.placeholder,
-          required: this.props.required,
-          showLeadingZeros: this.props.showLeadingZeros,
-          value: this.props.value
+          required: required,
+          showLeadingZeros: showLeadingZeros,
+          value: value
         }),
-        this.props.clearIcon !== null && _react2.default.createElement(
+        clearIcon !== null && _react2.default.createElement(
           'button',
@@ -201,5 +217,5 @@ {
           },
-          this.props.clearIcon
+          clearIcon
         ),
-        this.props.calendarIcon !== null && _react2.default.createElement(
+        calendarIcon !== null && _react2.default.createElement(
           'button',
@@ -214,3 +230,3 @@ {
           },
-          this.props.calendarIcon
+          calendarIcon
         )
@@ -229,9 +245,9 @@ );
 
-      var _props = this.props,
-          calendarClassName = _props.calendarClassName,
-          dateTimePickerMaxDetail = _props.maxDetail,
-          dateTimePickerClassName = _props.className,
-          onChange = _props.onChange,
-          value = _props.value,
-          calendarProps = _objectWithoutProperties(_props, ['calendarClassName', 'maxDetail', 'className', 'onChange', 'value']);
+      var _props2 = this.props,
+          calendarClassName = _props2.calendarClassName,
+          dateTimePickerMaxDetail = _props2.maxDetail,
+          dateTimePickerClassName = _props2.className,
+          onChange = _props2.onChange,
+          value = _props2.value,
+          calendarProps = _objectWithoutProperties(_props2, ['calendarClassName', 'maxDetail', 'className', 'onChange', 'value']);
 
@@ -275,8 +291,8 @@ var className = 'react-datetime-picker__calendar';
 
-      var _props2 = this.props,
-          clockClassName = _props2.clockClassName,
-          timePickerClassName = _props2.className,
-          maxDetail = _props2.maxDetail,
-          onChange = _props2.onChange,
-          clockProps = _objectWithoutProperties(_props2, ['clockClassName', 'className', 'maxDetail', 'onChange']);
+      var _props3 = this.props,
+          clockClassName = _props3.clockClassName,
+          timePickerClassName = _props3.className,
+          maxDetail = _props3.maxDetail,
+          onChange = _props3.onChange,
+          clockProps = _objectWithoutProperties(_props3, ['clockClassName', 'className', 'maxDetail', 'onChange']);
 
@@ -317,8 +333,16 @@ var className = 'react-datetime-picker__clock';
 
-      var className = 'react-datetime-picker';
+      var _props4 = this.props,
+          className = _props4.className,
+          disabled = _props4.disabled;
+      var _state2 = this.state,
+          isCalendarOpen = _state2.isCalendarOpen,
+          isClockOpen = _state2.isClockOpen;
 
+
+      var baseClassName = 'react-datetime-picker';
+
       return _react2.default.createElement(
         'div',
         {
-          className: (0, _mergeClassNames2.default)(className, className + '--' + (this.state.isCalendarOpen || this.state.isClockOpen ? 'open' : 'closed'), className + '--' + (this.props.disabled ? 'disabled' : 'enabled'), this.props.className),
+          className: (0, _mergeClassNames2.default)(baseClassName, baseClassName + '--' + (isCalendarOpen || isClockOpen ? 'open' : 'closed'), baseClassName + '--' + (disabled ? 'disabled' : 'enabled'), className),
           onFocus: this.onFocus,
@@ -325,0 +349,0 @@ ref: function ref(_ref4) {

dist/entry.js

@@ -19,2 +19,5 @@ 'use strict';
 
-exports.default = _DateTimePicker2.default;
+exports.default = _DateTimePicker2.default;
+
+// File is created during build phase and placed in dist directory
+// eslint-disable-next-line import/no-unresolved

dist/shared/dates.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.getISOLocalDateTime = exports.getSeconds = exports.getMinutes = exports.getHours = exports.getDay = exports.getMonth = exports.getYear = undefined;
+exports.getISOLocalDateTime = exports.convert24to12 = exports.convert12to24 = exports.getSeconds = exports.getMinutes = exports.getHours = exports.getDay = exports.getMonth = exports.getYear = undefined;
 
@@ -53,2 +53,16 @@ var _dates = require('react-calendar/dist/shared/dates');
 
+Object.defineProperty(exports, 'convert12to24', {
+  enumerable: true,
+  get: function get() {
+    return _dates3.convert12to24;
+  }
+});
+Object.defineProperty(exports, 'convert24to12', {
+  enumerable: true,
+  get: function get() {
+    return _dates3.convert24to12;
+  }
+});
+
+
 // eslint-disable-next-line import/prefer-default-export
@@ -55,0 +69,0 @@ var getISOLocalDateTime = exports.getISOLocalDateTime = function getISOLocalDateTime(value) {

package.json

 {
   "name": "react-datetime-picker",
-  "version": "1.3.5",
+  "version": "1.4.0",
   "description": "A date range picker for your React app.",
@@ -8,8 +8,8 @@ "main": "dist/entry.js",
   "scripts": {
-    "build": "npm run build-js && npm run copy-styles && npm run build-styles",
+    "build": "yarn run build-js && yarn run copy-styles && yarn run build-styles",
     "build-js": "babel src -d dist --ignore __tests__",
     "build-styles": "lessc ./dist/DateTimePicker.less ./dist/DateTimePicker.css",
     "copy-styles": "node ./copy-styles.js",
-    "prepublishOnly": "npm run build",
-    "test": "npm run test-eslint && npm run test-jest",
+    "prepublishOnly": "yarn run build",
+    "test": "yarn run test-eslint && yarn run test-jest",
     "test-eslint": "eslint ./src",
@@ -48,7 +48,7 @@ "test-jest": "jest",
     "prop-types": "^15.6.0",
-    "react-calendar": "^2.15.2",
+    "react-calendar": "^2.16.1",
     "react-clock": "^2.2.1",
-    "react-date-picker": "^6.10.3",
+    "react-date-picker": "^6.11.0",
     "react-lifecycles-compat": "^3.0.4",
-    "react-time-picker": "2.4.2"
+    "react-time-picker": "2.5.0"
   },
@@ -67,8 +67,7 @@ "devDependencies": {
     "enzyme-adapter-react-16": "^1.1.1",
-    "eslint": "^4.17.0",
-    "eslint-config-airbnb": "^16.1.0",
-    "eslint-plugin-class-property": "^1.1.0",
-    "eslint-plugin-import": "^2.8.0",
-    "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.6.1",
+    "eslint": "^4.19.0",
+    "eslint-config-airbnb": "^17.0.0",
+    "eslint-plugin-import": "^2.13.0",
+    "eslint-plugin-jsx-a11y": "^6.1.0",
+    "eslint-plugin-react": "^7.9.1",
     "jest": "^22.1.4",
@@ -78,3 +77,4 @@ "jest-cli": "^22.1.4",
     "react": "^16.4.0",
-    "react-dom": "^16.4.0"
+    "react-dom": "^16.4.0",
+    "react-test-renderer": "^16.4.1"
   },
@@ -81,0 +81,0 @@ "peerDependencies": {

src/__tests__/DateTimeInput.jsx

@@ -8,2 +8,14 @@ import React from 'react';
 
+const hasFullICU = (() => {
+  try {
+    const date = new Date(2018, 0, 1, 21);
+    const formatter = new Intl.DateTimeFormat('de-DE', { hour: 'numeric' });
+    return formatter.format(date) === '21';
+  } catch (err) {
+    return false;
+  }
+})();
+
+const itIfFullICU = hasFullICU ? it : it.skip;
+
 const keyCodes = {
@@ -49,3 +61,3 @@ ArrowLeft: 37,
     const minuteInput = customInputs.find('input[name="minute"]');
-    const hourInput = customInputs.find('input[name="hour"]');
+    const hourInput = customInputs.find('input[name^="hour"]');
 
@@ -73,3 +85,3 @@ expect(customInputs).toHaveLength(5);
     const minuteInput = customInputs.find('input[name="minute"]');
-    const hourInput = customInputs.find('input[name="hour"]');
+    const hourInput = customInputs.find('input[name^="hour"]');
 
@@ -86,3 +98,3 @@ expect(customInputs).toHaveLength(4);
 
-  it('shows a given date in all inputs correctly', () => {
+  it('shows a given date in all inputs correctly (12-hour format)', () => {
     const date = new Date(2017, 8, 30, 22, 17, 0);
@@ -104,2 +116,25 @@
     expect(customInputs.at(2).getDOMNode().value).toBe('2017');
+    expect(customInputs.at(3).getDOMNode().value).toBe('10');
+    expect(customInputs.at(4).getDOMNode().value).toBe('17');
+    expect(customInputs.at(5).getDOMNode().value).toBe('0');
+  });
+
+  itIfFullICU('shows a given date in all inputs correctly (24-hour format)', () => {
+    const date = new Date(2017, 8, 30, 22, 17, 0);
+
+    const component = mount(
+      <DateTimeInput
+        locale="de-DE"
+        maxDetail="second"
+        value={date}
+      />
+    );
+
+    const nativeInput = component.find('input[type="datetime-local"]');
+    const customInputs = component.find('input[type="number"]');
+
+    expect(nativeInput.getDOMNode().value).toBe('2017-09-30T22:17');
+    expect(customInputs.at(0).getDOMNode().value).toBe('2017');
+    expect(customInputs.at(1).getDOMNode().value).toBe('9');
+    expect(customInputs.at(2).getDOMNode().value).toBe('30');
     expect(customInputs.at(3).getDOMNode().value).toBe('22');
@@ -134,8 +169,5 @@ expect(customInputs.at(4).getDOMNode().value).toBe('17');
 
-  it('renders custom inputs in a proper order (en-US)', () => {
+  it('renders custom inputs in a proper order (12-hour format)', () => {
     const component = mount(
-      <DateTimeInput
-        locale="en-US"
-        maxDetail="second"
-      />
+      <DateTimeInput maxDetail="second" />
     );
@@ -148,3 +180,3 @@
     expect(customInputs.at(2).prop('name')).toBe('year');
-    expect(customInputs.at(3).prop('name')).toBe('hour');
+    expect(customInputs.at(3).prop('name')).toBe('hour12');
     expect(customInputs.at(4).prop('name')).toBe('minute');
@@ -154,9 +186,25 @@ expect(customInputs.at(5).prop('name')).toBe('second');
 
-  it('renders proper input separators (en-US)', () => {
+  itIfFullICU('renders custom inputs in a proper order (24-hour format)', () => {
     const component = mount(
       <DateTimeInput
-        locale="en-US"
+        locale="de-DE"
+        maxDetail="second"
       />
     );
 
+    const customInputs = component.find('input[type="number"]');
+
+    expect(customInputs.at(0).prop('name')).toBe('year');
+    expect(customInputs.at(1).prop('name')).toBe('month');
+    expect(customInputs.at(2).prop('name')).toBe('day');
+    expect(customInputs.at(3).prop('name')).toBe('hour24');
+    expect(customInputs.at(4).prop('name')).toBe('minute');
+    expect(customInputs.at(5).prop('name')).toBe('second');
+  });
+
+  it('renders proper input separators', () => {
+    const component = mount(
+      <DateTimeInput />
+    );
+
     const separators = component.find('.react-datetime-picker__button__input__divider');
@@ -166,2 +214,3 @@
     expect(separators.at(0).text()).toBe('/');
+    expect(separators.at(1).text()).toBe('/');
     expect(separators.at(2).text()).toBe('\u00a0'); // Non-breaking space
@@ -168,0 +217,0 @@ expect(separators.at(3).text()).toBe(':');

src/__tests__/DateTimePicker.jsx

@@ -199,3 +199,3 @@ import React from 'react';
     const clock = component.find('Clock');
-    const input = component.find('input[name="hour"]');
+    const input = component.find('input[name^="hour"]');
 
@@ -202,0 +202,0 @@ expect(clock).toHaveLength(0);

src/DateTimeInput.jsx

@@ -8,5 +8,7 @@ import React, { PureComponent } from 'react';
 import YearInput from 'react-date-picker/dist/DateInput/YearInput';
-import HourInput from 'react-time-picker/dist/TimeInput/HourInput';
+import Hour12Input from 'react-time-picker/dist/TimeInput/Hour12Input';
+import Hour24Input from 'react-time-picker/dist/TimeInput/Hour24Input';
 import MinuteInput from 'react-time-picker/dist/TimeInput/MinuteInput';
 import SecondInput from 'react-time-picker/dist/TimeInput/SecondInput';
+import AmPm from 'react-time-picker/dist/TimeInput/AmPm';
 import Divider from './Divider';
@@ -23,2 +25,4 @@ import NativeInput from './DateTimeInput/NativeInput';
   getYear,
+  convert12to24,
+  convert24to12,
 } from './shared/dates';
@@ -33,5 +37,5 @@ import { isMaxDate, isMinDate } from './shared/propTypes';
 const datesAreDifferent = (date1, date2) => (
-  (date1 && !date2) ||
-  (!date1 && date2) ||
-  (date1 && date2 && date1.getTime() !== date2.getTime())
+  (date1 && !date2)
+  || (!date1 && date2)
+  || (date1 && date2 && date1.getTime() !== date2.getTime())
 );
@@ -67,5 +71,7 @@
     // We don't want spaces in dates
-    a.charCodeAt(0) !== 32 &&
+    a.charCodeAt(0) !== 32
     // Internet Explorer specific
-    a.charCodeAt(0) !== 8206
+    && a.charCodeAt(0) !== 8206
+    // Remove non-ASCII characters
+    && /^[\x20-\x7F]*$/.test(a)
   ))
@@ -94,6 +100,7 @@ .join('');
       // Toggling calendar visibility resets values
-      nextState.isCalendarOpen || // Flag was toggled
-      datesAreDifferent(nextValue, prevState.value)
+      nextState.isCalendarOpen // Flag was toggled
+      || datesAreDifferent(nextValue, prevState.value)
     ) {
       if (nextValue) {
+        [, nextState.amPm] = convert24to12(getHours(nextValue));
         nextState.year = getYear(nextValue);
@@ -106,2 +113,3 @@ nextState.month = getMonth(nextValue);
       } else {
+        nextState.amPm = null;
         nextState.year = null;
@@ -121,2 +129,3 @@ nextState.month = null;
   state = {
+    amPm: null,
     year: null,
@@ -181,6 +190,15 @@ month: null,
   get commonInputProps() {
+    const {
+      disabled,
+      isWidgetOpen,
+      maxDate,
+      minDate,
+      required,
+    } = this.props;
+
     return {
-      disabled: this.props.disabled,
-      maxDate: this.props.maxDate || defaultMaxDate,
-      minDate: this.props.minDate || defaultMinDate,
+      className,
+      disabled,
+      maxDate: maxDate || defaultMaxDate,
+      minDate: minDate || defaultMinDate,
       onChange: this.onChange,
@@ -190,8 +208,6 @@ onKeyDown: this.onKeyDown,
       // This is only for showing validity when editing
-      required: this.props.required || this.props.isWidgetOpen,
-      itemRef: (ref) => {
-        if (!ref) return;
-
+      required: required || isWidgetOpen,
+      itemRef: (ref, name) => {
         // Save a reference to each input field
-        this[`${ref.name}Input`] = ref;
+        this[`${name || ref.name}Input`] = ref;
       },
@@ -205,3 +221,5 @@ };
   get valueType() {
-    return this.props.maxDetail;
+    const { maxDetail } = this.props;
+
+    return maxDetail;
   }
@@ -239,6 +257,26 @@
 
-    this.setState(
-      { [name]: value ? parseInt(value, 10) : null },
-      this.onChangeExternal,
-    );
+    switch (name) {
+      case 'hour12': {
+        this.setState(
+          prevState => ({
+            hour: value ? convert12to24(parseInt(value, 10), prevState.amPm) : null,
+          }),
+          this.onChangeExternal,
+        );
+        break;
+      }
+      case 'hour24': {
+        this.setState(
+          { hour: value ? parseInt(value, 10) : null },
+          this.onChangeExternal,
+        );
+        break;
+      }
+      default: {
+        this.setState(
+          { [name]: value ? parseInt(value, 10) : null },
+          this.onChangeExternal,
+        );
+      }
+    }
   }
@@ -250,9 +288,19 @@
   onChangeNative = (event) => {
+    const { onChange } = this.props;
     const { value } = event.target;
 
-    if (this.props.onChange) {
-      this.props.onChange(value);
+    if (onChange) {
+      onChange(value);
     }
   }
 
+  onChangeAmPm = (event) => {
+    const { value } = event.target;
+
+    this.setState(
+      ({ amPm: value }),
+      this.onChangeExternal,
+    );
+  }
+
   /**
@@ -263,3 +311,5 @@ * Called after internal onChange. Checks input validity. If all fields are valid,
   onChangeExternal = () => {
-    if (this.props.onChange) {
+    const { onChange } = this.props;
+
+    if (onChange) {
       const formElements = [
@@ -269,5 +319,7 @@ this.dayInput,
         this.yearInput,
-        this.hourInput,
+        this.hour12Input,
+        this.hour24Input,
         this.minuteInput,
         this.secondInput,
+        this.amPmInput,
       ].filter(Boolean);
@@ -281,13 +333,13 @@
       if (formElements.every(formElement => formElement.value && formElement.checkValidity())) {
-        const proposedValue =
-          new Date(
-            values.year,
-            (values.month || 1) - 1,
-            values.day || 1,
-            values.hour,
-            values.minute || 0,
-            values.second || 0,
-          );
+        const hour = values.hour24 || convert12to24(values.hour12, values.amPm);
+        const proposedValue = new Date(
+          values.year,
+          (values.month || 1) - 1,
+          values.day || 1,
+          hour,
+          values.minute || 0,
+          values.second || 0,
+        );
         const processedValue = proposedValue;
-        this.props.onChange(processedValue, false);
+        onChange(processedValue, false);
       }
@@ -298,12 +350,14 @@ }
   renderDay() {
+    const { maxDetail, showLeadingZeros } = this.props;
+    const { day, month, year } = this.state;
+
     return (
       <DayInput
         key="day"
-        className={className}
-        maxDetail={this.props.maxDetail}
-        month={this.state.month}
-        showLeadingZeros={this.props.showLeadingZeros}
-        year={this.state.year}
-        value={this.state.day}
         {...this.commonInputProps}
+        maxDetail={maxDetail}
+        month={month}
+        showLeadingZeros={showLeadingZeros}
+        year={year}
+        value={day}
       />
@@ -314,10 +368,12 @@ );
   renderMonth() {
+    const { maxDetail, showLeadingZeros } = this.props;
+    const { month } = this.state;
+
     return (
       <MonthInput
         key="month"
-        className={className}
-        maxDetail={this.props.maxDetail}
-        showLeadingZeros={this.props.showLeadingZeros}
-        value={this.state.month}
         {...this.commonInputProps}
+        maxDetail={maxDetail}
+        showLeadingZeros={showLeadingZeros}
+        value={month}
       />
@@ -328,9 +384,22 @@ );
   renderYear() {
+    const { year } = this.state;
+
     return (
       <YearInput
         key="year"
-        className={className}
-        value={this.state.year}
+        {...this.commonInputProps}
+        value={year}
         valueType="day"
+      />
+    );
+  }
+
+  renderHour12() {
+    const { hour } = this.state;
+
+    return (
+      <Hour12Input
+        key="hour12"
         {...this.commonInputProps}
+        value={hour}
       />
@@ -340,9 +409,10 @@ );
 
-  renderHour() {
+  renderHour24() {
+    const { hour } = this.state;
+
     return (
-      <HourInput
-        key="hour"
-        className={className}
-        value={this.state.hour}
+      <Hour24Input
+        key="hour24"
         {...this.commonInputProps}
+        value={hour}
       />
@@ -360,8 +430,9 @@ );
 
+    const { minute } = this.state;
+
     return (
       <MinuteInput
         key="minute"
-        className={className}
-        maxDetail={this.props.maxDetail}
-        value={this.state.minute}
+        maxDetail={maxDetail}
+        value={minute}
         {...this.commonInputProps}
@@ -380,9 +451,10 @@ />
 
+    const { second } = this.state;
+
     return (
       <SecondInput
         key="second"
-        className={className}
-        maxDetail={this.props.maxDetail}
-        value={this.state.second}
         {...this.commonInputProps}
+        maxDetail={maxDetail}
+        value={second}
       />
@@ -392,2 +464,15 @@ );
 
+  renderAmPm() {
+    const { amPm } = this.state;
+
+    return (
+      <AmPm
+        key="ampm"
+        {...this.commonInputProps}
+        value={amPm}
+        onChange={this.onChangeAmPm}
+      />
+    );
+  }
+
   renderCustomDateInputs() {
@@ -408,6 +493,4 @@ const { dateDivider, datePlaceholder } = this;
         .filter(Boolean)
-        .reduce((result, element, index, array) => {
-          result.push(element);
-
-          if (index + 1 < array.length) {
+        .reduce((result, element, index) => {
+          if (index) {
             result.push(
@@ -421,2 +504,4 @@ // eslint-disable-next-line react/no-array-index-key
 
+          result.push(element);
+
           return result;
@@ -435,7 +520,7 @@ }, [])
           switch (part) {
-            case 'hour-24': return this.renderHour();
-            case 'hour-12': return this.renderHour();
+            case 'hour-12': return this.renderHour12();
+            case 'hour-24': return this.renderHour24();
             case 'minute': return this.renderMinute();
             case 'second': return this.renderSecond();
-            case 'ampm': return null; // TODO
+            case 'ampm': return this.renderAmPm();
             default: return null;
@@ -445,6 +530,4 @@ }
         .filter(Boolean)
-        .reduce((result, element, index, array) => {
-          result.push(element);
-
-          if (index + 1 < array.length) {
+        .reduce((result, element, index) => {
+          if (index && element.key !== 'ampm') {
             result.push(
@@ -458,2 +541,4 @@ // eslint-disable-next-line react/no-array-index-key
 
+          result.push(element);
+
           return result;
@@ -465,12 +550,21 @@ }, [])
   renderNativeInput() {
+    const {
+      disabled,
+      maxDate,
+      minDate,
+      name,
+      required,
+      value,
+    } = this.props;
+
     return (
       <NativeInput
         key="time"
-        disabled={this.props.disabled}
-        maxDate={this.props.maxDate || defaultMaxDate}
-        minDate={this.props.minDate || defaultMinDate}
-        name={this.props.name}
+        disabled={disabled}
+        maxDate={maxDate || defaultMaxDate}
+        minDate={minDate || defaultMinDate}
+        name={name}
         onChange={this.onChangeNative}
-        required={this.props.required}
-        value={this.props.value}
+        required={required}
+        value={value}
         valueType={this.valueType}
@@ -477,0 +571,0 @@ />

src/DateTimePicker.jsx

@@ -83,6 +83,9 @@ import React, { PureComponent } from 'react';
   onFocus = (event) => {
+    const { disabled } = this.props;
+
     // Internet Explorer still fires onFocus on disabled elements
-    if (this.props.disabled) {
+    if (disabled) {
       return;
     }
+
     switch (event.target.name) {
@@ -94,3 +97,4 @@ case 'day':
         break;
-      case 'hour':
+      case 'hour12':
+      case 'hour24':
       case 'minute':
@@ -141,3 +145,15 @@ case 'second':
   renderInputs() {
-    const { disabled } = this.props;
+    const {
+      calendarIcon,
+      clearIcon,
+      disabled,
+      locale,
+      maxDetail,
+      maxDate,
+      minDate,
+      name,
+      required,
+      showLeadingZeros,
+      value,
+    } = this.props;
 
@@ -150,15 +166,15 @@ const { isCalendarOpen, isClockOpen } = this.state;
           disabled={disabled}
-          locale={this.props.locale}
+          locale={locale}
           isWidgetOpen={isCalendarOpen || isClockOpen}
-          maxDetail={this.props.maxDetail}
-          maxDate={this.props.maxDate}
-          minDate={this.props.minDate}
-          name={this.props.name}
+          maxDetail={maxDetail}
+          maxDate={maxDate}
+          minDate={minDate}
+          name={name}
           onChange={this.onTimeChange}
           placeholder={this.placeholder}
-          required={this.props.required}
-          showLeadingZeros={this.props.showLeadingZeros}
-          value={this.props.value}
+          required={required}
+          showLeadingZeros={showLeadingZeros}
+          value={value}
         />
-        {this.props.clearIcon !== null && (
+        {clearIcon !== null && (
           <button
@@ -171,6 +187,6 @@ className="react-datetime-picker__clear-button react-datetime-picker__button__icon"
           >
-            {this.props.clearIcon}
+            {clearIcon}
           </button>
         )}
-        {this.props.calendarIcon !== null && (
+        {calendarIcon !== null && (
           <button
@@ -184,3 +200,3 @@ className="react-datetime-picker__calendar-button react-datetime-picker__button__icon"
           >
-            {this.props.calendarIcon}
+            {calendarIcon}
           </button>
@@ -290,11 +306,14 @@ )}
   render() {
-    const className = 'react-datetime-picker';
+    const { className, disabled } = this.props;
+    const { isCalendarOpen, isClockOpen } = this.state;
 
+    const baseClassName = 'react-datetime-picker';
+
     return (
       <div
         className={mergeClassNames(
+          baseClassName,
+          `${baseClassName}--${isCalendarOpen || isClockOpen ? 'open' : 'closed'}`,
+          `${baseClassName}--${disabled ? 'disabled' : 'enabled'}`,
           className,
-          `${className}--${this.state.isCalendarOpen || this.state.isClockOpen ? 'open' : 'closed'}`,
-          `${className}--${this.props.disabled ? 'disabled' : 'enabled'}`,
-          this.props.className,
         )}
@@ -301,0 +320,0 @@ onFocus={this.onFocus}

src/entry.js

@@ -5,4 +5,7 @@ import 'react-calendar/dist/Calendar.css';
 import DateTimePicker from './DateTimePicker';
+
+// File is created during build phase and placed in dist directory
+// eslint-disable-next-line import/no-unresolved
 import './DateTimePicker.css';
 
 export default DateTimePicker;

src/shared/dates.js

@@ -16,2 +16,7 @@ import { getISOLocalDate } from 'react-calendar/dist/shared/dates';
 
+export {
+  convert12to24,
+  convert24to12,
+} from 'react-time-picker/dist/shared/dates';
+
 // eslint-disable-next-line import/prefer-default-export
@@ -18,0 +23,0 @@ export const getISOLocalDateTime = (value) => {

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

109140

increased by8.34%

Lines of code

2661

increased by11.11%

Dependency changes

• + Addedreact-time-picker@2.5.0(transitive)

• - Removedreact-time-picker@2.4.2(transitive)

• Updatedreact-calendar@^2.16.1

• Updatedreact-date-picker@^6.11.0

• Updatedreact-time-picker@2.5.0