showPreviousMonths={true} is not working properly

[gianpierobenvenuto]

You can see this issue in action on the "Show previous month" example found on the demo website https://reactdatepicker.com/

What happens?

If you have showPreviousMonths={true} and you click any day it will jump to the previous month instead. This also applies to different cases such as implementations with selectsRange={true} and monthsShown={2}.

[Kenan-Kuzgun]

<DatePicker
ref={datepickerRef}
locale="tr"
dateFormat="dd MMMM yyyy"
selectsRange={true}
showPreviousMonths={true}
monthsShown={2}
onChange={(update) => {
setDateRange(update);
}}
customInput={}
startDate={startDate}
endDate={endDate}
maxDate={maxDate}
minDate={minDate}
onApply={(start, end) => {
setStartDate(start);
setEndDate(end);
}}
>

 Same issue ! 

[Burak-Ozlece]

same issue too

[comountainclimber]

Any update on this? Its super broken

[Kenan-Kuzgun]

No, we couldn't fix it.

[comountainclimber]

Ok I actually was able to hack my way around this issue with something like the following:

const START_OF_LAST_MONTH = startOfMonth(subMonths(new Date(), 1));
const [startDate, setStartDate] = useState(START_OF_LAST_MONTH);
const [initialized, setInitialized] = useState(false);
useEffect(
  function clearPreviousMonthStartDate() {
    if (!initialized) {
      setStartDate(null);
      setInitialized(true);
    }
    return function resetInitializedState() {
      setInitialized(false);
    };
  },
  [startDate, initialized]
);

return (
  <DatePicker
    fixedHeight
    open
    onChange={([start, end]) => {
      setStartDate(start);
      setEndDate(end);
    }}
    monthsShown={2}
    inline
    selectsRange
    startDate={startDate}
    endDate={endDate}
    maxDate={maximumDate}
    minDate={minimumDate}
    renderDayContents={renderCustomDayContents}
    disabledKeyboardNavigation
  />
);

This will render the picker with the visual appearance of what showPreviousMonths prop provides