When the date selection is canceled, the start month is set to last month.

[miro-ring]

https://github.com/Hacker0x01/react-datepicker/issues/3875

Same for this. Any solution??

[balajis-qb]

Hi @dongkyun-dev, I'll look into this issue.

[SaiBalaji202]

Hi, Can you please explain a bit more on this issue? What's the expected behaviour and actual behaviour? Also if possible share the sample code that can reproduce the issue?

Currently I tried with the below code and it's working for me

() => {
  const [startDate, setStartDate] = useState(new Date());
  const [endDate, setEndDate] = useState(null);

  const handleChange = ([newStartDate, newEndDate]) => {
    setStartDate(newStartDate);
    setEndDate(newEndDate);
  };

  return (
    <DatePicker
    selectsRange
      startDate={startDate}
      endDate={endDate}
      dateFormat="MM/yyyy"
      onChange={handleChange}
      focusSelectedMonth={false}
      monthsShown={2}
      minDate={new Date()}
      shouldCloseOnSelect={false}
      isClearable
    />
  );
};

[miro-ring]

@SaiBalaji202 https://github.com/Hacker0x01/react-datepicker/issues/3875 You can check expected behaviour in this link. If there’s anything else you need, please let me know by comment.

@balajis-qb Thanks. https://github.com/Hacker0x01/react-datepicker/blob/b0d62d56c89ac145254215872b291848e8c0a83a/src/index.tsx#L344-L349 I can solve this issue by changing monthsShown temporary.

[SaiBalaji202]

I couldn't get the actual issue described. Can you explain the issue once again with the expected and the actual behaviour? If you could share the sample code that reproduce the error, that would be even more helpful.

Are you saying the issue is with showPreviousMonths? As showPreviousMonths is disabled, we shouldn't show the last month of the current month? Currently for few cases, it's showing the previous months after clear, right?

For example

() => {
  const [startDate, setStartDate] = useState(null);
  return (
    <DatePicker
      showIcon
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      showPreviousMonths={false}
      monthsShown={2}
       minDate={new Date()}
       isClearable
    />
  );
};

In this code, if I select any date from the current month (December 2024), November is not showing after cleanup. But if I select any date from the right side month (January, 2025 in our case), & then clear the date, now when I reopen it's showing November 2024 and Dec 2024 (which is wrong) and we need to display Dec 2024 and Jan 2025. Am I understanding the issue correctly?

If my understanding is not correct, please share more details.

[Bjorn86]

I couldn't get the actual issue described. Can you explain the issue once again with the expected and the actual behaviour? If you could share the sample code that reproduce the error, that would be even more helpful.

This problem, under different headings, has been found in user questions from you since 2019. And for most of them there is no response. Since I have also encountered it, I will try to describe to you the behavior we face and what we expect. Let me tell you right away that in my case the calendar is not initially hidden on the page, but is displayed permanently as a widget. The calendar displays 3 months, the first of which (leftmost) is the current month. Current behavior:

• if you select the period preceding the current month, then do a period reset, the calendar will display the current month as the first month, and this is the expected behavior
• if you select the period after the current month and then reset the period, then in my case there are possible variants. Regardless of whether we have made a calendar cover for future periods, if the period was selected in the second month among the displayed months, then after the reset the current month will be the second in the calendar, if the selection was made in the third month, then after the reset the current month will be the third.

This in no way corresponds to the expected behavior, which is that after resetting the current month always should remain first. Also in my case, adding the showPreviousMonths props has no effect on the above behavior. The only thing that helps in this situation is adding focusSelectedMonth, it always returns the current month as the first month after reset, but in my case I can't use it, because it breaks the logic of period selection by the user. It would be great if you could add a prop that allows to specify the start month rigidly, ignoring other behavior.

[6mn12j]

openToDate lets you control the initial month shown. I used it and got the result I wanted.

[github-actions[bot]]

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.

[github-actions[bot]]

This issue was closed because it has been stalled for 10 days with no activity.