Kiarash-Z/react-modern-calendar-datepicker

Visible month does not track current value

Opened this issue · 3 comments

Within a visible month the selection moves when value={myValue} is updated. However the currently visible month does not seem to change when the new value is in a different month.

One suggestion might be to expose a track:(''start|'end'|'none') prop.

@colin-reid hey did you find any workaround for this? I got the same issue.

Not really, I have an ugly hack of reloading the whole calendar but it doesn't work well enough to share.

I had this same problem and found a workaround for it.
First by debugging I found out that the date values array of the calendar would always insert any new value to the end of it. Then, by trial and error, noticed that by de-selecting the FIRST selected value of the array (the first date ever picked), the calendar would change the visible month to the next value's month. So in short, the calendar always wants to show the month of the first value of the array.
This is a way to not change the visible month of the calendar, and it ocurred to me to try and insert any new selected date to the beginning of the array, and did it like this:

const [selectedDays, _setSelectedDays] = useState([]);

const setSelectedDays = (value) => {
  value.unshift(value.pop()); // Move the last array value to the top of the array
  _setSelectedDays(value); // ...then update the value of the calendar
};

return (
  <Calendar
    value={selectedDays}
    onChange={setSelectedDays}
  ></Calendar>
);

I hope it helps while this bug gets fixed.