react-date-picker - npm Package Compare versions

Comparing version 7.5.0 to 7.5.1

dist/DateInput.js

@@ -91,22 +91,29 @@ "use strict";
 
-var getValueFrom = function getValueFrom(value) {
-  if (!value) {
-    return null;
+var getValueFromRange = function getValueFromRange(valueOrArrayOfValues, index) {
+  if (Array.isArray(valueOrArrayOfValues)) {
+    return valueOrArrayOfValues[index];
   }
 
-  var rawValueFrom = value instanceof Array && value.length === 2 ? value[0] : value;
+  return valueOrArrayOfValues;
+};
 
-  if (!rawValueFrom) {
+var parseAndValidateDate = function parseAndValidateDate(rawValue) {
+  if (!rawValue) {
     return null;
   }
 
-  var valueFromDate = new Date(rawValueFrom);
+  var valueDate = new Date(rawValue);
 
-  if (isNaN(valueFromDate.getTime())) {
-    throw new Error("Invalid date: ".concat(value));
+  if (isNaN(valueDate.getTime())) {
+    throw new Error("Invalid date: ".concat(rawValue));
   }
 
-  return valueFromDate;
+  return valueDate;
 };
 
+var getValueFrom = function getValueFrom(value) {
+  var valueFrom = getValueFromRange(value, 0);
+  return parseAndValidateDate(valueFrom);
+};
+
 var getDetailValueFrom = function getDetailValueFrom(value, minDate, maxDate, maxDetail) {
@@ -124,19 +131,4 @@ var valueFrom = getValueFrom(value);
 var getValueTo = function getValueTo(value) {
-  if (!value) {
-    return null;
-  }
-
-  var rawValueTo = value instanceof Array && value.length === 2 ? value[1] : value;
-
-  if (!rawValueTo) {
-    return null;
-  }
-
-  var valueToDate = new Date(rawValueTo);
-
-  if (isNaN(valueToDate.getTime())) {
-    throw new Error("Invalid date: ".concat(value));
-  }
-
-  return valueToDate;
+  var valueTo = getValueFromRange(value, 1);
+  return parseAndValidateDate(valueTo);
 };
@@ -167,17 +159,7 @@
 
-var findPreviousInput = function findPreviousInput(element) {
-  var previousElement = element;
-
-  do {
-    previousElement = previousElement.previousElementSibling;
-  } while (previousElement && !isValidInput(previousElement));
-
-  return previousElement;
-};
-
-var findNextInput = function findNextInput(element) {
+var findInput = function findInput(element, property) {
   var nextElement = element;
 
   do {
-    nextElement = nextElement.nextElementSibling;
+    nextElement = nextElement[property];
   } while (nextElement && !isValidInput(nextElement));
@@ -252,10 +234,2 @@
         case 'ArrowLeft':
-          {
-            event.preventDefault();
-            var input = event.target;
-            var previousInput = findPreviousInput(input);
-            focus(previousInput);
-            break;
-          }
-
         case 'ArrowRight':
@@ -265,4 +239,5 @@ case _this.divider:
             event.preventDefault();
-            var _input = event.target;
-            var nextInput = findNextInput(_input);
+            var input = event.target;
+            var property = event.key === 'ArrowLeft' ? 'previousElementSibling' : 'nextElementSibling';
+            var nextInput = findInput(input, property);
             focus(nextInput);
@@ -343,3 +318,3 @@ break;
       var _this$state = _this.state,
-          value = _this$state.day,
+          day = _this$state.day,
           month = _this$state.month,
@@ -358,3 +333,3 @@ year = _this$state.year;
         showLeadingZeros: showLeadingZerosFromFormat || showLeadingZeros,
-        value: value,
+        value: day,
         year: year
@@ -367,3 +342,3 @@ }));
       var _this$state2 = _this.state,
-          value = _this$state2.month,
+          month = _this$state2.month,
           year = _this$state2.year;
@@ -380,3 +355,3 @@
         showLeadingZeros: showLeadingZerosFromFormat || showLeadingZeros,
-        value: value,
+        value: month,
         year: year
@@ -445,4 +420,4 @@ }));
           name = _this$props2.name,
-          required = _this$props2.required,
-          value = _this$props2.value;
+          required = _this$props2.required;
+      var value = this.state.value;
       return _react.default.createElement(_NativeInput.default, {
@@ -614,2 +589,3 @@ key: "date",
   disabled: _propTypes.default.bool,
+  format: _propTypes.default.string,
   isCalendarOpen: _propTypes.default.bool,
@@ -625,4 +601,4 @@ locale: _propTypes.default.string,
   showLeadingZeros: _propTypes.default.bool,
-  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.instanceOf(Date)])
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.instanceOf(Date), _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date))])
 };
 (0, _reactLifecyclesCompat.polyfill)(DateInput);

dist/DateInput/Input.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.default = void 0;
+exports.default = Input;
 
@@ -23,3 +23,3 @@ var _react = _interopRequireDefault(require("react"));
 
-var Input = function Input(_ref) {
+function Input(_ref) {
   var className = _ref.className,
@@ -74,3 +74,3 @@ disabled = _ref.disabled,
   })];
-};
+}
 
@@ -92,4 +92,2 @@ Input.propTypes = {
   placeholder: '--'
-};
-var _default = Input;
-exports.default = _default;
+};

dist/DatePicker.js

@@ -370,2 +370,3 @@ "use strict";
   disabled: _propTypes.default.bool,
+  format: _propTypes.default.string,
   isOpen: _propTypes.default.bool,
@@ -372,0 +373,0 @@ name: _propTypes.default.string,

dist/Divider.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.default = void 0;
+exports.default = Divider;
 
@@ -15,3 +15,3 @@ var _react = _interopRequireDefault(require("react"));
 
-var Divider = function Divider(_ref) {
+function Divider(_ref) {
   var children = _ref.children;
@@ -21,8 +21,6 @@ return _react.default.createElement("span", {
   }, children);
-};
+}
 
 Divider.propTypes = {
   children: _propTypes.default.node
-};
-var _default = Divider;
-exports.default = _default;
+};

package.json

 {
   "name": "react-date-picker",
-  "version": "7.5.0",
+  "version": "7.5.1",
   "description": "A date picker for your React app.",
@@ -5,0 +5,0 @@ "main": "dist/entry.js",

src/__tests__/DateInput.jsx

@@ -93,3 +93,3 @@ import React from 'react';
 
-  it('shows a given date in all inputs correctly', () => {
+  it('shows a given date in all inputs correctly given Date (12-hour format)', () => {
     const date = new Date(2017, 8, 30);
@@ -107,9 +107,47 @@
 
-    expect(nativeInput.getDOMNode().value).toBe('2017-09-30');
-    expect(customInputs.at(0).getDOMNode().value).toBe('9');
-    expect(customInputs.at(1).getDOMNode().value).toBe('30');
-    expect(customInputs.at(2).getDOMNode().value).toBe('2017');
+    expect(nativeInput.prop('value')).toBe('2017-09-30');
+    expect(customInputs.at(0).prop('value')).toBe(9);
+    expect(customInputs.at(1).prop('value')).toBe(30);
+    expect(customInputs.at(2).prop('value')).toBe(2017);
   });
 
-  itIfFullICU('shows a given date in all inputs correctly (de-DE locale)', () => {
+  it('shows a given date in all inputs correctly given array of Date objects (12-hour format)', () => {
+    const date = [new Date(2017, 8, 30), new Date(2017, 8, 31, 0, 0, 0, -1)];
+
+    const component = mount(
+      <DateInput
+        {...defaultProps}
+        value={date}
+      />
+    );
+
+    const nativeInput = component.find('input[type="date"]');
+    const customInputs = component.find('input[type="number"]');
+
+    expect(nativeInput.prop('value')).toBe('2017-09-30');
+    expect(customInputs.at(0).prop('value')).toBe(9);
+    expect(customInputs.at(1).prop('value')).toBe(30);
+    expect(customInputs.at(2).prop('value')).toBe(2017);
+  });
+
+  it('shows a given date in all inputs correctly given ISO string (12-hour format)', () => {
+    const date = '2017-09-30T00:00:00.000';
+
+    const component = mount(
+      <DateInput
+        {...defaultProps}
+        value={date}
+      />
+    );
+
+    const nativeInput = component.find('input[type="date"]');
+    const customInputs = component.find('input[type="number"]');
+
+    expect(nativeInput.prop('value')).toBe('2017-09-30');
+    expect(customInputs.at(0).prop('value')).toBe(9);
+    expect(customInputs.at(1).prop('value')).toBe(30);
+    expect(customInputs.at(2).prop('value')).toBe(2017);
+  });
+
+  itIfFullICU('shows a given date in all inputs correctly given Date (24-hour format)', () => {
     const date = new Date(2017, 8, 30);
@@ -128,12 +166,52 @@
 
-    expect(nativeInput.getDOMNode().value).toBe('2017-09-30');
-    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(nativeInput.prop('value')).toBe('2017-09-30');
+    expect(customInputs.at(0).prop('value')).toBe(2017);
+    expect(customInputs.at(1).prop('value')).toBe(9);
+    expect(customInputs.at(2).prop('value')).toBe(30);
   });
 
-  it('shows empty value in all inputs correctly', () => {
+  itIfFullICU('shows a given date in all inputs correctly given array of Date objects (24-hour format)', () => {
+    const date = [new Date(2017, 8, 30), new Date(2017, 8, 31, 0, 0, 0, -1)];
+
     const component = mount(
       <DateInput
         {...defaultProps}
+        locale="de-DE"
+        value={date}
+      />
+    );
+
+    const nativeInput = component.find('input[type="date"]');
+    const customInputs = component.find('input[type="number"]');
+
+    expect(nativeInput.prop('value')).toBe('2017-09-30');
+    expect(customInputs.at(0).prop('value')).toBe(2017);
+    expect(customInputs.at(1).prop('value')).toBe(9);
+    expect(customInputs.at(2).prop('value')).toBe(30);
+  });
+
+  itIfFullICU('shows a given date in all inputs correctly given ISO string (24-hour format)', () => {
+    const date = '2017-09-30T00:00:00.000';
+
+    const component = mount(
+      <DateInput
+        {...defaultProps}
+        locale="de-DE"
+        value={date}
+      />
+    );
+
+    const nativeInput = component.find('input[type="date"]');
+    const customInputs = component.find('input[type="number"]');
+
+    expect(nativeInput.prop('value')).toBe('2017-09-30');
+    expect(customInputs.at(0).prop('value')).toBe(2017);
+    expect(customInputs.at(1).prop('value')).toBe(9);
+    expect(customInputs.at(2).prop('value')).toBe(30);
+  });
+
+  it('shows empty value in all inputs correctly given null', () => {
+    const component = mount(
+      <DateInput
+        {...defaultProps}
         value={null}
@@ -146,8 +224,25 @@ />
 
-    expect(nativeInput.getDOMNode().value).toBe('');
-    expect(customInputs.at(0).getDOMNode().value).toBe('');
-    expect(customInputs.at(1).getDOMNode().value).toBe('');
-    expect(customInputs.at(2).getDOMNode().value).toBe('');
+    expect(nativeInput.prop('value')).toBeFalsy();
+    expect(customInputs.at(0).prop('value')).toBeFalsy();
+    expect(customInputs.at(1).prop('value')).toBeFalsy();
+    expect(customInputs.at(2).prop('value')).toBeFalsy();
   });
 
+  it('shows empty value in all inputs correctly given an array of nulls', () => {
+    const component = mount(
+      <DateInput
+        {...defaultProps}
+        value={[null, null]}
+      />
+    );
+
+    const nativeInput = component.find('input[type="date"]');
+    const customInputs = component.find('input[type="number"]');
+
+    expect(nativeInput.prop('value')).toBeFalsy();
+    expect(customInputs.at(0).prop('value')).toBeFalsy();
+    expect(customInputs.at(1).prop('value')).toBeFalsy();
+    expect(customInputs.at(2).prop('value')).toBeFalsy();
+  });
+
   it('clears the value correctly', () => {
@@ -168,9 +263,9 @@ const date = new Date(2017, 8, 30);
 
-    expect(nativeInput.getDOMNode().value).toBe('');
-    expect(customInputs.at(0).getDOMNode().value).toBe('');
-    expect(customInputs.at(1).getDOMNode().value).toBe('');
-    expect(customInputs.at(2).getDOMNode().value).toBe('');
+    expect(nativeInput.prop('value')).toBeFalsy();
+    expect(customInputs.at(0).prop('value')).toBeFalsy();
+    expect(customInputs.at(1).prop('value')).toBeFalsy();
+    expect(customInputs.at(2).prop('value')).toBeFalsy();
   });
 
-  it('renders custom inputs in a proper order', () => {
+  it('renders custom inputs in a proper order (12-hour format)', () => {
     const component = mount(
@@ -187,3 +282,3 @@ <DateInput {...defaultProps} />
 
-  itIfFullICU('renders custom inputs in a proper order (de-DE locale)', () => {
+  itIfFullICU('renders custom inputs in a proper order (24-hour format)', () => {
     const component = mount(
@@ -190,0 +285,0 @@ <DateInput

src/__tests__/DatePicker.jsx

@@ -31,2 +31,14 @@ import React from 'react';
 
+  it('passes format to DateInput', () => {
+    const format = 'y-MM-dd';
+
+    const component = mount(
+      <DatePicker format={format} />
+    );
+
+    const dateInput = component.find('DateInput');
+
+    expect(dateInput.prop('format')).toBe(format);
+  });
+
   it('applies className to its wrapper when given a string', () => {
@@ -243,2 +255,20 @@ const className = 'testClassName';
   });
+
+  it('clears the value when clicking on a button', () => {
+    const onChange = jest.fn();
+
+    const component = mount(
+      <DatePicker onChange={onChange} />
+    );
+
+    const calendar = component.find('Calendar');
+    const button = component.find('button.react-date-picker__clear-button');
+
+    expect(calendar).toHaveLength(0);
+
+    button.simulate('click');
+    component.update();
+
+    expect(onChange).toHaveBeenCalledWith(null);
+  });
 });

src/DateInput.jsx

@@ -38,22 +38,30 @@ import React, { PureComponent } from 'react';
 
-const getValueFrom = (value) => {
-  if (!value) {
-    return null;
+const getValueFromRange = (valueOrArrayOfValues, index) => {
+  if (Array.isArray(valueOrArrayOfValues)) {
+    return valueOrArrayOfValues[index];
   }
 
-  const rawValueFrom = value instanceof Array && value.length === 2 ? value[0] : value;
+  return valueOrArrayOfValues;
+};
 
-  if (!rawValueFrom) {
+const parseAndValidateDate = (rawValue) => {
+  if (!rawValue) {
     return null;
   }
 
-  const valueFromDate = new Date(rawValueFrom);
+  const valueDate = new Date(rawValue);
 
-  if (isNaN(valueFromDate.getTime())) {
-    throw new Error(`Invalid date: ${value}`);
+  if (isNaN(valueDate.getTime())) {
+    throw new Error(`Invalid date: ${rawValue}`);
   }
 
-  return valueFromDate;
+  return valueDate;
 };
 
+const getValueFrom = (value) => {
+  const valueFrom = getValueFromRange(value, 0);
+
+  return parseAndValidateDate(valueFrom);
+};
+
 const getDetailValueFrom = (value, minDate, maxDate, maxDetail) => {
@@ -72,19 +80,5 @@ const valueFrom = getValueFrom(value);
 const getValueTo = (value) => {
-  if (!value) {
-    return null;
-  }
+  const valueTo = getValueFromRange(value, 1);
 
-  const rawValueTo = value instanceof Array && value.length === 2 ? value[1] : value;
-
-  if (!rawValueTo) {
-    return null;
-  }
-
-  const valueToDate = new Date(rawValueTo);
-
-  if (isNaN(valueToDate.getTime())) {
-    throw new Error(`Invalid date: ${value}`);
-  }
-
-  return valueToDate;
+  return parseAndValidateDate(valueTo);
 };
@@ -117,14 +111,6 @@
 
-const findPreviousInput = (element) => {
-  let previousElement = element;
-  do {
-    previousElement = previousElement.previousElementSibling;
-  } while (previousElement && !isValidInput(previousElement));
-  return previousElement;
-};
-
-const findNextInput = (element) => {
+const findInput = (element, property) => {
   let nextElement = element;
   do {
-    nextElement = nextElement.nextElementSibling;
+    nextElement = nextElement[property];
   } while (nextElement && !isValidInput(nextElement));
@@ -330,10 +316,3 @@ return nextElement;
     switch (event.key) {
-      case 'ArrowLeft': {
-        event.preventDefault();
-
-        const input = event.target;
-        const previousInput = findPreviousInput(input);
-        focus(previousInput);
-        break;
-      }
+      case 'ArrowLeft':
       case 'ArrowRight':
@@ -344,3 +323,4 @@ case this.divider: {
         const input = event.target;
-        const nextInput = findNextInput(input);
+        const property = event.key === 'ArrowLeft' ? 'previousElementSibling' : 'nextElementSibling';
+        const nextInput = findInput(input, property);
         focus(nextInput);
@@ -423,3 +403,3 @@ break;
     const { showLeadingZeros } = this.props;
-    const { day: value, month, year } = this.state;
+    const { day, month, year } = this.state;
 
@@ -438,3 +418,3 @@ if (currentMatch && currentMatch.length > 2) {
         showLeadingZeros={showLeadingZerosFromFormat || showLeadingZeros}
-        value={value}
+        value={day}
         year={year}
@@ -447,3 +427,3 @@ />
     const { showLeadingZeros } = this.props;
-    const { month: value, year } = this.state;
+    const { month, year } = this.state;
 
@@ -461,3 +441,3 @@ if (currentMatch && currentMatch.length > 2) {
         showLeadingZeros={showLeadingZerosFromFormat || showLeadingZeros}
-        value={value}
+        value={month}
         year={year}
@@ -499,4 +479,4 @@ />
       required,
-      value,
     } = this.props;
+    const { value } = this.state;
 
@@ -543,2 +523,3 @@ return (
   disabled: PropTypes.bool,
+  format: PropTypes.string,
   isCalendarOpen: PropTypes.bool,
@@ -557,2 +538,3 @@ locale: PropTypes.string,
     PropTypes.instanceOf(Date),
+    PropTypes.arrayOf(PropTypes.instanceOf(Date)),
   ]),
@@ -559,0 +541,0 @@ };

src/DateInput/Input.jsx

@@ -9,3 +9,3 @@ import React from 'react';
 
-const Input = ({
+export default function Input({
   className,
@@ -25,3 +25,3 @@ disabled,
   value,
-}) => {
+}) {
   const hasLeadingZero = showLeadingZeros && value !== null && value < 10;
@@ -63,3 +63,3 @@
   ];
-};
+}
 
@@ -83,3 +83,1 @@ Input.propTypes = {
 };
-
-export default Input;

src/DatePicker.jsx

@@ -271,2 +271,3 @@ import React, { PureComponent } from 'react';
   disabled: PropTypes.bool,
+  format: PropTypes.string,
   isOpen: PropTypes.bool,
@@ -273,0 +274,0 @@ name: PropTypes.string,

src/Divider.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
 
-const Divider = ({ children }) => (
-  <span className="react-date-picker__inputGroup__divider">
-    {children}
-  </span>
-);
+export default function Divider({ children }) {
+  return (
+    <span className="react-date-picker__inputGroup__divider">
+      {children}
+    </span>
+  );
+}
 
@@ -13,3 +15,1 @@ Divider.propTypes = {
 };
-
-export default Divider;

No alert changes

Improved metrics

Total package byte prevSize

161638

increased by2.07%

Lines of code

3829

increased by1.73%

No dependency changes