react-datepicker icon indicating copy to clipboard operation
react-datepicker copied to clipboard

Can not open first allowed year after date is selected

Open andreymaklakov opened this issue 8 months ago • 0 comments

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

  1. click on any date to select it
  2. click on year to select year
  3. 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

  1. click on year to select year
  2. select any year, but no 2022
  3. select any month
  4. then again click year to select
  5. click 2022 year here again will be opened months of the year was selected in step 2

how it should work

  1. click on any date to select it
  2. click on year to select year
  3. click on 2022 year to open its months
  4. select december (the month after minDate)
  5. select date

andreymaklakov avatar Apr 26 '25 12:04 andreymaklakov