Skip to content

Can not open first allowed year after date is selected #5600

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
andreymaklakov opened this issue Apr 26, 2025 · 0 comments
Open

Can not open first allowed year after date is selected #5600

andreymaklakov opened this issue Apr 26, 2025 · 0 comments

Comments

@andreymaklakov
Copy link

andreymaklakov commented Apr 26, 2025

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant