Hacker0x01 / react-datepicker

A simple and reusable datepicker component for React
https://reactdatepicker.com/
MIT License
7.89k stars 2.23k forks source link

Implementing alternative flow for date picker #3452

Open krzempekk opened 2 years ago

krzempekk commented 2 years ago

Is your feature request related to a problem? Please describe. I would like to implement custom flow with react-datepicker, allowing user to first select month using month picker and then year using year picker. Code looks roughly like this:

const CustomMonthYearComponent = () => {
    const [startDate, setStartDate] = useState(new Date());
    const [isMonthSelected, setIsMonthSelected] = useState(false);

    const monthYearProps = !isMonthSelected
        ? {
              showMonthYearPicker: true,
              onChange: undefined,
              onSelect: (date: Date) => {
                  setStartDate(date);
                  setIsMonthSelected(true);
              },
              shouldCloseOnSelect: false,
          }
        : {
              showYearPicker: true,
              onChange: undefined,
              onSelect: (date: Date) => {
                  setStartDate(date);
              },
          };

    return (
        <DatePicker
            selected={startDate}
            dateFormat="MM/yyyy"
            {...monthYearProps}
        />
    );
};

This, however, will not work, because when year is selected, the date is set to the beginning of this year.

Describe the solution you'd like I wonder what is the rationale behind setting start of the year when the year is selected (same happens for month). In order not to break existing implementations it would be great if there were boolean prop to control this behaviour.

Describe alternatives you've considered Alternative for my case is to save selected month from month picker in other place and later merge it with selected year.

stale[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

github-actions[bot] commented 1 week ago

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 10 days.