Merge pull request #2376 from teamleadercrm/date-picker-input-fixes

DatePickerInput fixes

CHANGELOG.md

@@ -10,6 +10,8 @@
 
 ### Fixed
 
+- `DatePickerInput`: fix the DatePicker input value not changing if the selectedDate prop changes and extend `DayPickerProps` with React's DayPickerProps ([@BeirlaenAaron](https://github.com/BeirlaenAaron)) in [#2376](https://github.com/teamleadercrm/ui/pull/2376))
+
 ### Dependency updates
 
 ## [16.2.1] - 2022-09-23

src/components/datepicker/DatePickerInput.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useState } from 'react';
+import React, { ReactNode, useEffect, useState } from 'react';
 import Box, { pickBoxProps } from '../box';
 import DatePicker from '.';
 import Icon from '../icon';
@@ -13,6 +13,7 @@ import { GenericComponent } from '../../@types/types';
 import { SIZES } from '../../constants';
 import { InputProps } from '../input/Input';
 import { PopoverProps } from '../popover/Popover';
+import { DayPickerProps as ReactDayPickerProps } from 'react-day-picker';
 
 interface DatePickerInputProps extends Omit<BoxProps, 'size' | 'onChange'> {
   /** A class name for the wrapper to give custom styles. */
@@ -47,7 +48,7 @@ interface DatePickerInputProps extends Omit<BoxProps, 'size' | 'onChange'> {
   openPickerOnFocus?: boolean;
 }
 
-interface DayPickerProps {
+interface DayPickerProps extends Omit<ReactDayPickerProps, 'modifiers'> {
   numberOfMonths?: number;
   showOutsideDays?: boolean;
   showWeekNumbers?: boolean;
@@ -130,6 +131,10 @@ const DatePickerInput: GenericComponent<DatePickerInputProps> = ({
     );
   };
 
+  useEffect(() => {
+    setSelectedDate(others.selectedDate);
+  }, [others.selectedDate]);
+
   const boxProps = pickBoxProps(others);
   const datePickerClassNames = cx(theme['date-picker-input'], theme[`is-${datePickerSize || size}`]);