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

[miro-ring]

#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
#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.

react-datepicker/src/index.tsx

Lines 344 to 349 in b0d62d5

	if (
	this.state.monthSelectedIn !== undefined &&
	prevProps.monthsShown !== this.props.monthsShown
	) {
	this.setState({ monthSelectedIn: 0 });
	}

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.