react-flatpickr
react-flatpickr copied to clipboard
Weekdays header expands to long when option showMonth is depending on state and switches from two to one month view
Hi when I define a state like this
const [numberOfMonthShown, setNumberOfMonthShown] = useState(numberOfMonth());
and define flatpickr like this (number of month shown depending on the state)
<Flatpickr
onChange={(selectedDates, representation, instance) => doCheckSelectedPeriod(selectedDates, instance)}
onClose={(selectedDates) => doOnClose(selectedDates)}
options={
{
dateFormat: "l d M",
defaultDate: defaultRange(),
mode: "range",
showMonths: numberOfMonthShown,
shorthandCurrentMonth: true,
locale: { firstDayOfWeek: 1},
wrap: true,
}
}
>
and the state numberOfMonthShown changes from 2 to 1 and I open the date picker the first time it opens and shows (like expected) one month but the weekday header is too long. If I then close and then open the date picker the second time it is fine (and keeps being fine). See this screenshot from the first opening.
The change of the numberOfMonth state is triggered by an event listener that listens to the resize event. So the intention is to show one month if the screen is small and have a two month view if the screen is large.
Thanks in advance!