t0gre / react-datepicker

An easily internationalizable, accessible, mobile-friendly datepicker library for the web, build with styled-components.
https://react-datepicker.netlify.com/
MIT License
331 stars 54 forks source link

initialVisibleMonth ignored when startDate and endDate are set #148

Open lsmilesbd opened 1 year ago

lsmilesbd commented 1 year ago

@datepicker-react/hooks or @datepicker-react/styled version e.g. @datepicker-react/hooks@2.8.4

Describe the bug When passing in a startDate and endDate parameter to the in addition to a initialVisibleMonth useDatePicker hook, the initialVisibleMonth is ignored, and the the initialVisibleMonth defaults to the startDate

Source code (including props configuration) Steps to reproduce the behavior:

const [state, setState] = useState({
    startDate: new Date(2020, 1, 1),
    endDate: new Date(2022, 1, 1),
    focusedInput: START_DATE
  });
  const {
    firstDayOfWeek,
    activeMonths,
    isDateSelected,
    isDateHovered,
    isFirstOrLastSelectedDate,
    isDateBlocked,
    isDateFocused,
    onDateHover,
    onDateSelect,
    onDateFocus,
    goToPreviousMonths,
    goToNextMonths
  } = useDatepicker({
    startDate: state.startDate,
    endDate: state.endDate,
    focusedInput: state.focusedInput,
    onDatesChange: handleDateChange,
    initialVisibleMonth: new Date(2022, 1, 1),
    numberOfMonths: 2
  });

  function handleDateChange(data) {
    if (!data.focusedInput) {
      setState({ ...data, focusedInput: START_DATE });
    } else {
      setState(data);
    }
  }

codeSandbox link

Screenshots/Gifs If applicable, add screenshots or gifs to help explain your problem. initialVisibleMonth param respected:

Screenshot 2023-03-08 at 15 55 52

initialVisibleMonth ignored, view is set to startDate:

Screenshot 2023-03-08 at 15 55 28

Desktop (please complete the following information): N/A

Smartphone (please complete the following information): N/A

Is the issue reproducible in Storybook? Unknown - netlify link returns a 404

Additional context Add any other context about the problem here. It is an edge case where the datepicker is pre-filled with a range over 2 months.

I have been using this as a workaround

React.useEffect(() => goToDate(endDate, [goToDate]);

as a workaround to go to the current date