react-datetime-picker - npm Package Compare versions

Comparing version 2.5.0 to 2.6.0

dist/DateTimeInput.js

@@ -166,3 +166,4 @@ "use strict";
 
-var _renderCustomInputs = function renderCustomInputs(placeholder, elementFunctions) {
+var _renderCustomInputs = function renderCustomInputs(placeholder, elementFunctions, allowMultipleInstances) {
+  var usedFunctions = [];
   var pattern = new RegExp(Object.keys(elementFunctions).map(function (el) {
@@ -185,3 +186,9 @@ return "".concat(el, "+");
       })];
-      res.push(renderFunction(currentMatch));
+
+      if (!allowMultipleInstances && usedFunctions.includes(renderFunction)) {
+        res.push(currentMatch);
+      } else {
+        res.push(renderFunction(currentMatch));
+        usedFunctions.push(renderFunction);
+      }
     }
@@ -378,4 +385,9 @@
       })) {
-        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 year = parseInt(values.year, 10);
+        var month = parseInt(values.month || 1, 10);
+        var day = parseInt(values.day || 1, 10);
+        var hour = parseInt(values.hour24 || (0, _dates.convert12to24)(values.hour12, values.amPm) || 0, 10);
+        var minute = parseInt(values.minute || 0, 10);
+        var second = parseInt(values.second || 0, 10);
+        var proposedValue = new Date(year, month - 1, day, hour, minute, second);
         var processedValue = proposedValue;
@@ -459,2 +471,10 @@ onChange(processedValue, false);
 
+    _defineProperty(_assertThisInitialized(_this), "renderHour", function (currentMatch) {
+      if (/h/.test(currentMatch)) {
+        return _this.renderHour12(currentMatch);
+      }
+
+      return _this.renderHour24(currentMatch);
+    });
+
     _defineProperty(_assertThisInitialized(_this), "renderHour12", function (currentMatch) {
@@ -565,2 +585,3 @@ var hourAriaLabel = _this.props.hourAriaLabel;
       var placeholder = this.placeholder;
+      var format = this.props.format;
       var elementFunctions = {
@@ -570,4 +591,4 @@ d: this.renderDay,
         y: this.renderYear,
-        h: this.renderHour12,
-        H: this.renderHour24,
+        h: this.renderHour,
+        H: this.renderHour,
         m: this.renderMinute,
@@ -577,3 +598,4 @@ s: this.renderSecond,
       };
-      return _renderCustomInputs(placeholder, elementFunctions);
+      var allowMultipleInstances = typeof format !== 'undefined';
+      return _renderCustomInputs(placeholder, elementFunctions, allowMultipleInstances);
     }
@@ -841,2 +863,5 @@ }, {
 };
+
+var isValue = _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].instanceOf(Date)]);
+
 DateTimeInput.propTypes = {
@@ -862,5 +887,5 @@ amPmAriaLabel: _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))]),
+  value: _propTypes["default"].oneOfType([isValue, _propTypes["default"].arrayOf(isValue)]),
   yearAriaLabel: _propTypes["default"].string
 };
 (0, _reactLifecyclesCompat.polyfill)(DateTimeInput);

dist/DateTimePicker.js

@@ -32,10 +32,6 @@ "use strict";
 
-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; } }
 
-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; }
-
 function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -45,2 +41,12 @@
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(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"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -267,2 +273,3 @@
           dayAriaLabel = _this$props3.dayAriaLabel,
+          disableCalendar = _this$props3.disableCalendar,
           disabled = _this$props3.disabled,
@@ -287,11 +294,23 @@ format = _this$props3.format,
           isClockOpen = _this$state3.isClockOpen;
+
+      var _concat = [].concat(value),
+          _concat2 = _slicedToArray(_concat, 1),
+          valueFrom = _concat2[0];
+
+      var ariaLabelProps = {
+        amPmAriaLabel: amPmAriaLabel,
+        dayAriaLabel: dayAriaLabel,
+        hourAriaLabel: hourAriaLabel,
+        minuteAriaLabel: minuteAriaLabel,
+        monthAriaLabel: monthAriaLabel,
+        nativeInputAriaLabel: nativeInputAriaLabel,
+        secondAriaLabel: secondAriaLabel,
+        yearAriaLabel: yearAriaLabel
+      };
       return _react["default"].createElement("div", {
         className: "".concat(baseClassName, "__wrapper")
-      }, _react["default"].createElement(_DateTimeInput["default"], {
-        amPmAriaLabel: amPmAriaLabel,
+      }, _react["default"].createElement(_DateTimeInput["default"], _extends({}, ariaLabelProps, {
         className: "".concat(baseClassName, "__inputGroup"),
-        dayAriaLabel: dayAriaLabel,
         disabled: disabled,
         format: format,
-        hourAriaLabel: hourAriaLabel,
         isWidgetOpen: isCalendarOpen || isClockOpen,
@@ -302,14 +321,9 @@ locale: locale,
         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 && _react["default"].createElement("button", {
+        value: valueFrom
+      })), clearIcon !== null && _react["default"].createElement("button", {
         "aria-label": clearAriaLabel,
@@ -321,3 +335,3 @@ className: "".concat(baseClassName, "__clear-button ").concat(baseClassName, "__button"),
         type: "button"
-      }, clearIcon), calendarIcon !== null && _react["default"].createElement("button", {
+      }, clearIcon), calendarIcon !== null && !disableCalendar && _react["default"].createElement("button", {
         "aria-label": calendarAriaLabel,
@@ -335,5 +349,6 @@ className: "".concat(baseClassName, "__calendar-button ").concat(baseClassName, "__button"),
     value: function renderCalendar() {
+      var disableCalendar = this.props.disableCalendar;
       var isCalendarOpen = this.state.isCalendarOpen;
 
-      if (isCalendarOpen === null) {
+      if (isCalendarOpen === null || disableCalendar) {
         return null;
@@ -371,8 +386,14 @@ }
           clockClassName = _this$props5.clockClassName,
-          timePickerClassName = _this$props5.className,
+          dateTimePickerClassName = _this$props5.className,
           maxDetail = _this$props5.maxDetail,
           onChange = _this$props5.onChange,
-          clockProps = _objectWithoutProperties(_this$props5, ["clockClassName", "className", "maxDetail", "onChange"]);
+          value = _this$props5.value,
+          clockProps = _objectWithoutProperties(_this$props5, ["clockClassName", "className", "maxDetail", "onChange", "value"]);
 
       var className = "".concat(baseClassName, "__clock");
+
+      var _concat3 = [].concat(value),
+          _concat4 = _slicedToArray(_concat3, 1),
+          valueFrom = _concat4[0];
+
       var maxDetailIndex = allViews.indexOf(maxDetail);
@@ -384,3 +405,4 @@ return _react["default"].createElement(_reactFit["default"], null, _react["default"].createElement("div", {
         renderMinuteHand: maxDetailIndex > 0,
-        renderSecondHand: maxDetailIndex > 1
+        renderSecondHand: maxDetailIndex > 1,
+        value: valueFrom
       }, clockProps))));
@@ -490,3 +512,6 @@ }
 };
-DateTimePicker.propTypes = _objectSpread({}, _entry["default"].propTypes, {}, _entry2["default"].propTypes, {
+
+var isValue = _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].instanceOf(Date)]);
+
+DateTimePicker.propTypes = {
   amPmAriaLabel: _propTypes["default"].string,
@@ -500,2 +525,4 @@ calendarAriaLabel: _propTypes["default"].string,
   clockClassName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string)]),
+  dayAriaLabel: _propTypes["default"].string,
+  disableCalendar: _propTypes["default"].bool,
   disableClock: _propTypes["default"].bool,
@@ -512,2 +539,3 @@ disabled: _propTypes["default"].bool,
   minuteAriaLabel: _propTypes["default"].string,
+  monthAriaLabel: _propTypes["default"].string,
   name: _propTypes["default"].string,
@@ -520,7 +548,9 @@ nativeInputAriaLabel: _propTypes["default"].string,
   onClockOpen: _propTypes["default"].func,
+  onFocus: _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)])
-});
+  value: _propTypes["default"].oneOfType([isValue, _propTypes["default"].arrayOf(isValue)]),
+  yearAriaLabel: _propTypes["default"].string
+};
 (0, _reactLifecyclesCompat.polyfill)(DateTimePicker);

package.json

 {
   "name": "react-datetime-picker",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "A date range picker for your React app.",
@@ -54,6 +54,6 @@ "main": "dist/entry.js",
     "react-clock": "^2.3.0",
-    "react-date-picker": "^7.6.0",
+    "react-date-picker": "^7.7.0",
     "react-fit": "^1.0.3",
     "react-lifecycles-compat": "^3.0.4",
-    "react-time-picker": "^3.6.0"
+    "react-time-picker": "^3.6.1"
   },
@@ -60,0 +60,0 @@ "devDependencies": {

README.md

@@ -1,2 +0,2 @@
-![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
+[![npm](https://img.shields.io/npm/v/react-datetime-picker.svg)](https://www.npmjs.com/package/react-datetime-picker) ![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
 ) ![dev dependencies](https://img.shields.io/david/dev/wojtekmaj/react-datetime-picker.svg
@@ -100,3 +100,4 @@ ) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)
 |disabled|Whether the date picker should be disabled.|`false`|`true`|
-|disableClock|Whether the clock should be disabled.|`false`|`true`|
+|disableCalendar|When set to `true`, will remove the clock and the button toggling its visibility.|`false`|`true`|
+|disableClock|When set to `true`, will remove the clock.|`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"`|
@@ -121,5 +122,5 @@ |hourAriaLabel|`aria-label` for the hour input.|n/a|`"Hour"`|
 |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`|
+|required|Whether datetime 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`|
+|showLeadingZeros|Whether leading zeros should be rendered in datetime 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>|
@@ -126,0 +127,0 @@ |yearAriaLabel|`aria-label` for the year input.|n/a|`"Year"`|

src/__tests__/DateTimePicker.jsx

@@ -31,3 +31,3 @@ import React from 'react';
 
-  it('passes format to DateInput', () => {
+  it('passes format to DateTimeInput', () => {
     const format = 'y-MM-dd h:mm:ss a';
@@ -39,5 +39,5 @@
 
-    const dateInput = component.find('DateTimeInput');
+    const dateTimeInput = component.find('DateTimeInput');
 
-    expect(dateInput.prop('format')).toBe(format);
+    expect(dateTimeInput.prop('format')).toBe(format);
   });
@@ -54,2 +54,3 @@
       monthAriaLabel: 'Month',
+      nativeInputAriaLabel: 'Date and time',
       secondAriaLabel: 'Second',
@@ -69,11 +70,39 @@ yearAriaLabel: 'Year'
     expect(clearButton.prop('aria-label')).toBe(ariaLabelProps.clearAriaLabel);
+    expect(dateTimeInput.prop('amPmAriaLabel')).toBe(ariaLabelProps.amPmAriaLabel);
     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('monthAriaLabel')).toBe(ariaLabelProps.monthAriaLabel);
+    expect(dateTimeInput.prop('nativeInputAriaLabel')).toBe(ariaLabelProps.nativeInputAriaLabel);
     expect(dateTimeInput.prop('secondAriaLabel')).toBe(ariaLabelProps.secondAriaLabel);
+    expect(dateTimeInput.prop('yearAriaLabel')).toBe(ariaLabelProps.yearAriaLabel);
   });
 
+  describe('passes value to DateTimeInput', () => {
+    it('passes single value to DateTimeInput', () => {
+      const value = new Date(2019, 0, 1);
+
+      const component = mount(
+        <DateTimePicker value={value} />
+      );
+
+      const dateTimeInput = component.find('DateTimeInput');
+
+      expect(dateTimeInput.prop('value')).toBe(value);
+    });
+
+    it('passes the first item of an array of values to DateTimeInput', () => {
+      const value1 = new Date(2019, 0, 1);
+      const value2 = new Date(2019, 6, 1);
+
+      const component = mount(
+        <DateTimePicker value={[value1, value2]} />
+      );
+
+      const dateTimeInput = component.find('DateTimeInput');
+
+      expect(dateTimeInput.prop('value')).toBe(value1);
+    });
+  });
+
   it('applies className to its wrapper when given a string', () => {
@@ -177,2 +206,14 @@ const className = 'testClassName';
 
+  it('does not render Calendar component when given disableCalendar & isCalendarOpen flags', () => {
+    const component = mount(
+      <DateTimePicker disableCalendar isCalendarOpen />
+    );
+
+    const dateTimeInput = component.find('DateTimeInput');
+    const calendar = component.find('Calendar');
+
+    expect(dateTimeInput).toHaveLength(1);
+    expect(calendar).toHaveLength(0);
+  });
+
   it('does not render Clock component when given disableClock & isClockOpen flags', () => {
@@ -179,0 +220,0 @@ const component = mount(

src/DateTimeInput.jsx

@@ -114,3 +114,4 @@ import React, { PureComponent } from 'react';
 
-const renderCustomInputs = (placeholder, elementFunctions) => {
+const renderCustomInputs = (placeholder, elementFunctions, allowMultipleInstances) => {
+  const usedFunctions = [];
   const pattern = new RegExp(
@@ -131,2 +132,3 @@ Object.keys(elementFunctions).map(el => `${el}+`).join('|'), 'g',
       const currentMatch = matches && matches[index];
+
       if (currentMatch) {
@@ -140,3 +142,9 @@ const renderFunction = (
         );
-        res.push(renderFunction(currentMatch));
+
+        if (!allowMultipleInstances && usedFunctions.includes(renderFunction)) {
+          res.push(currentMatch);
+        } else {
+          res.push(renderFunction(currentMatch));
+          usedFunctions.push(renderFunction);
+        }
       }
@@ -525,11 +533,10 @@ return res;
     ) {
-      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 year = parseInt(values.year, 10);
+      const month = parseInt(values.month || 1, 10);
+      const day = parseInt(values.day || 1, 10);
+      const hour = parseInt(values.hour24 || convert12to24(values.hour12, values.amPm) || 0, 10);
+      const minute = parseInt(values.minute || 0, 10);
+      const second = parseInt(values.second || 0, 10);
+
+      const proposedValue = new Date(year, month - 1, day, hour, minute, second);
       const processedValue = proposedValue;
@@ -614,2 +621,10 @@ onChange(processedValue, false);
 
+  renderHour = (currentMatch) => {
+    if (/h/.test(currentMatch)) {
+      return this.renderHour12(currentMatch);
+    }
+
+    return this.renderHour24(currentMatch);
+  };
+
   renderHour12 = (currentMatch) => {
@@ -726,2 +741,4 @@ const { hourAriaLabel } = this.props;
     const { placeholder } = this;
+    const { format } = this.props;
+
     const elementFunctions = {
@@ -731,4 +748,4 @@ d: this.renderDay,
       y: this.renderYear,
-      h: this.renderHour12,
-      H: this.renderHour24,
+      h: this.renderHour,
+      H: this.renderHour,
       m: this.renderMinute,
@@ -739,3 +756,4 @@ s: this.renderSecond,
 
-    return renderCustomInputs(placeholder, elementFunctions);
+    const allowMultipleInstances = typeof format !== 'undefined';
+    return renderCustomInputs(placeholder, elementFunctions, allowMultipleInstances);
   }
@@ -791,2 +809,7 @@
 
+const isValue = PropTypes.oneOfType([
+  PropTypes.string,
+  PropTypes.instanceOf(Date),
+]);
+
 DateTimeInput.propTypes = {
@@ -813,5 +836,4 @@ amPmAriaLabel: PropTypes.string,
   value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.instanceOf(Date),
-    PropTypes.arrayOf(PropTypes.instanceOf(Date)),
+    isValue,
+    PropTypes.arrayOf(isValue),
   ]),
@@ -818,0 +840,0 @@ yearAriaLabel: PropTypes.string,

src/DateTimePicker.jsx

@@ -195,2 +195,3 @@ import React, { PureComponent } from 'react';
       dayAriaLabel,
+      disableCalendar,
       disabled,
@@ -213,14 +214,24 @@ format,
     } = this.props;
-
     const { isCalendarOpen, isClockOpen } = this.state;
 
+    const [valueFrom] = [].concat(value);
+
+    const ariaLabelProps = {
+      amPmAriaLabel,
+      dayAriaLabel,
+      hourAriaLabel,
+      minuteAriaLabel,
+      monthAriaLabel,
+      nativeInputAriaLabel,
+      secondAriaLabel,
+      yearAriaLabel,
+    };
+
     return (
       <div className={`${baseClassName}__wrapper`}>
         <DateTimeInput
-          amPmAriaLabel={amPmAriaLabel}
+          {...ariaLabelProps}
           className={`${baseClassName}__inputGroup`}
-          dayAriaLabel={dayAriaLabel}
           disabled={disabled}
           format={format}
-          hourAriaLabel={hourAriaLabel}
           isWidgetOpen={isCalendarOpen || isClockOpen}
@@ -231,13 +242,8 @@ locale={locale}
           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}
+          value={valueFrom}
         />
@@ -256,3 +262,3 @@ {clearIcon !== null && (
         )}
-        {calendarIcon !== null && (
+        {calendarIcon !== null && !disableCalendar && (
           <button
@@ -275,5 +281,6 @@ aria-label={calendarAriaLabel}
   renderCalendar() {
+    const { disableCalendar } = this.props;
     const { isCalendarOpen } = this.state;
 
-    if (isCalendarOpen === null) {
+    if (isCalendarOpen === null || disableCalendar) {
       return null;
@@ -317,5 +324,6 @@ }
       clockClassName,
-      className: timePickerClassName, // Unused, here to exclude it from clockProps
+      className: dateTimePickerClassName, // Unused, here to exclude it from clockProps
       maxDetail,
       onChange,
+      value,
       ...clockProps
@@ -325,2 +333,3 @@ } = this.props;
     const className = `${baseClassName}__clock`;
+    const [valueFrom] = [].concat(value);
 
@@ -336,2 +345,3 @@ const maxDetailIndex = allViews.indexOf(maxDetail);
             renderSecondHand={maxDetailIndex > 1}
+            value={valueFrom}
             {...clockProps}
@@ -412,5 +422,8 @@ />
 
+const isValue = PropTypes.oneOfType([
+  PropTypes.string,
+  PropTypes.instanceOf(Date),
+]);
+
 DateTimePicker.propTypes = {
-  ...Calendar.propTypes,
-  ...Clock.propTypes,
   amPmAriaLabel: PropTypes.string,
@@ -433,2 +446,4 @@ calendarAriaLabel: PropTypes.string,
   ]),
+  dayAriaLabel: PropTypes.string,
+  disableCalendar: PropTypes.bool,
   disableClock: PropTypes.bool,
@@ -445,2 +460,3 @@ disabled: PropTypes.bool,
   minuteAriaLabel: PropTypes.string,
+  monthAriaLabel: PropTypes.string,
   name: PropTypes.string,
@@ -453,2 +469,3 @@ nativeInputAriaLabel: PropTypes.string,
   onClockOpen: PropTypes.func,
+  onFocus: PropTypes.func,
   required: PropTypes.bool,
@@ -458,7 +475,8 @@ secondAriaLabel: PropTypes.string,
   value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.instanceOf(Date),
+    isValue,
+    PropTypes.arrayOf(isValue),
   ]),
+  yearAriaLabel: PropTypes.string,
 };
 
 polyfill(DateTimePicker);

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

180916

increased by2.49%

Lines of code

4428

increased by2.33%

Number of lines in readme file

153

increased by0.66%

Dependency changes

• Updatedreact-date-picker@^7.7.0

• Updatedreact-time-picker@^3.6.1