react-datepicker
react-datepicker copied to clipboard
Can not open first allowed year after date is selected
When minDate is passed as prop, for example 2022-10-1 and date selection is clicked, 2022 year calendar can not be opened by clicking on 2022 year
code example
() => {
const [showMonthYearPicker, setShowMonthYearPicker] = useState(false);
const [showYearPicker, setShowYearPicker] = useState(false);
const [selected, setSelected] = useState(new Date());
const [openDate, setOpenDate] = useState(new Date());
const renderMonthContent = (month, shortMonth, longMonth, day) => {
const fullYear = new Date(day).getFullYear();
const tooltipText = `Tooltip for month: ${longMonth} ${fullYear}`;
return <span title={tooltipText}>{shortMonth}</span>;
};
const handleChange = (date) => {
setOpenDate(date)
if(!showMonthYearPicker && !showYearPicker){
setSelected(date)
return
}
if(showMonthYearPicker) {
setShowYearPicker(false)
setShowMonthYearPicker(false)
return
}
if(showYearPicker) {
setShowYearPicker(false)
setShowMonthYearPicker(true)
}
}
return (
<DatePicker
selected={selected}
inline
openToDate={openDate}
renderMonthContent={renderMonthContent}
showMonthYearPicker={showMonthYearPicker}
showYearPicker={showYearPicker}
dateFormat="d/MM/yyyy"
minDate={new Date(2022, 10, 1)}
maxDate={new Date()}
onChange={handleChange}
renderCustomHeader={(props) => (
<div>
<div>
{!showMonthYearPicker && !showYearPicker && (
<button
onClick={() => {
setShowYearPicker(false)
setShowMonthYearPicker(true)
}}
>
{props.date.getMonth()}
</button>
)}
<button
onClick={() => {
setShowYearPicker(true)
setShowMonthYearPicker(false)
}}
>
{props.date.getFullYear()}
</button>
</div>
</div>
)}
/>
);
};
how to reproduce
- click on any date to select it
- click on year to select year
- click on 2022 year to open its months after this step will be opened months of the year date was selected before
another way to reproduce
- click on year to select year
- select any year, but no 2022
- select any month
- then again click year to select
- click 2022 year here again will be opened months of the year was selected in step 2
how it should work
- click on any date to select it
- click on year to select year
- click on 2022 year to open its months
- select december (the month after minDate)
- select date