Add support for onInvalidChange prop

Author: wojtekmaj

README.md

@@ -111,6 +111,7 @@ Displays an input field complete with custom inputs, native input, and a calenda
 | onCalendarOpen       | Function called when the calendar opens.                                                                                                                                                                                                     | n/a                     | `() => alert('Calendar opened')`                                                                                                                                                                                    |
 | onChange             | Function called when the user picks a valid date. If any of the fields were excluded using custom `format`, `new Date(y, 0, 1, 0, 0, 0)`, where `y` is the current year, is going to serve as a "base".                                      | n/a                     | `(value) => alert('New date is: ', value)`                                                                                                                                                                          |
 | onFocus              | Function called when the focuses an input.                                                                                                                                                                                                   | n/a                     | `(event) => alert('Focused input: ', event.target.name)`                                                                                                                                                            |
+| onInvalidChange      | Function called when the user picks an invalid date.                                                                                                                                                                                         | n/a                     | `() => alert('Invalid date')`                                                                                                                                                                                       |
 | openCalendarOnFocus  | Whether to open the calendar on input focus. Note: It's recommended to use shouldOpenCalendar function instead.                                                                                                                              | `true`                  | `false`                                                                                                                                                                                                             |
 | portalContainer      | Element to render the calendar in using portal.                                                                                                                                                                                              | n/a                     | `document.getElementById('my-div')`                                                                                                                                                                                 |
 | rangeDivider         | Divider between date inputs.                                                                                                                                                                                                                 | `"–"`                   | `" to "`                                                                                                                                                                                                            |

package.json

@@ -43,7 +43,7 @@
     "make-event-props": "^1.4.2",
     "prop-types": "^15.6.0",
     "react-calendar": "^4.2.1",
-    "react-date-picker": "^10.0.1",
+    "react-date-picker": "^10.2.0",
     "react-fit": "^1.5.1"
   },
   "devDependencies": {

src/DateRangePicker.spec.tsx

@@ -622,6 +622,23 @@ describe('DateRangePicker', () => {
     expect(onChange).toHaveBeenCalledWith([new Date(2023, 0, 1), null]);
   });
 
+  it('calls onInvalidChange callback when changing value to an invalid one', () => {
+    const value = new Date(2023, 0, 31);
+    const onInvalidChange = vi.fn();
+
+    const { container } = render(
+      <DateRangePicker onInvalidChange={onInvalidChange} value={value} />,
+    );
+
+    const dayInput = container.querySelector('input[name="day"]') as HTMLInputElement;
+
+    act(() => {
+      fireEvent.change(dayInput, { target: { value: '32' } });
+    });
+
+    expect(onInvalidChange).toHaveBeenCalled();
+  });
+
   it('clears the value when clicking on a button', () => {
     const onChange = vi.fn();
 

src/DateRangePicker.tsx

@@ -86,6 +86,7 @@ export type DateRangePickerProps = {
   onCalendarOpen?: () => void;
   onChange?: (value: Value) => void;
   onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
+  onInvalidChange?: () => void;
   openCalendarOnFocus?: boolean;
   portalContainer?: HTMLElement | null;
   rangeDivider?: React.ReactNode;
@@ -128,6 +129,7 @@ export default function DateRangePicker(props: DateRangePickerProps) {
     onCalendarOpen,
     onChange: onChangeProps,
     onFocus: onFocusProps,
+    onInvalidChange,
     openCalendarOnFocus = true,
     rangeDivider = '–',
     required,
@@ -326,6 +328,7 @@ export default function DateRangePicker(props: DateRangePickerProps) {
       maxDate,
       maxDetail,
       minDate,
+      onInvalidChange,
       required,
       showLeadingZeros,
     };

yarn.lock

@@ -808,7 +808,7 @@ __metadata:
     prop-types: ^15.6.0
     react: ^18.2.0
     react-calendar: ^4.2.1
-    react-date-picker: ^10.0.1
+    react-date-picker: ^10.2.0
     react-dom: ^18.2.0
     react-fit: ^1.5.1
     rimraf: ^3.0.0
@@ -4047,9 +4047,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-date-picker@npm:^10.0.1":
-  version: 10.0.1
-  resolution: "react-date-picker@npm:10.0.1"
+"react-date-picker@npm:^10.2.0":
+  version: 10.2.0
+  resolution: "react-date-picker@npm:10.2.0"
   dependencies:
     "@wojtekmaj/date-utils": ^1.1.3
     clsx: ^1.2.1
@@ -4062,7 +4062,7 @@ __metadata:
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: eb2fdc9b8d843ec49a87e9776367c8952f4fd941d52dae069551c13f9752498fa71daa0f204aae82e759586e2c51d2b4ef48b1b915ca2f1ddb7be73fc4ea20fa
+  checksum: 0aaf5b7bbab59113aec542e3b807d33335a9758739797fa9bf54433f3754b8e24a36b1a53814f344a1841df64888fa0cfdc6423155533aa64ff34d0d03c6d6bd
   languageName: node
   linkType: hard