Skip to content

'--in-selecting-range' Class on the End Date is working not as expecte #5502

@balajis-qb

Description

@balajis-qb

Describe the bug
--in-selecting-range class over the days in the DatePicker is applied wrongly.

To Reproduce

() => {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);
  return (
    <>
      <DatePicker
        selected={startDate}
        onChange={(date) => setStartDate(date)}
        selectsStart
        startDate={startDate}
        endDate={endDate}
      />
      <DatePicker
        selected={endDate}
        onChange={(date) => setEndDate(date)}
        selectsEnd
        startDate={startDate}
        endDate={endDate}
        minDate={startDate}
      />
    </>
  );
};
  1. Select the Start Date in the Start Date Picker
  2. Select an End Date in the End Date Picker
  3. Navigate to the next month in the End Date Picker
  4. We can notice --in-selecting-range class highlight over all the days till the selected endDate

Expected behavior
--in-selecting-range class should be only applied when the endDate is not selected till the pre-selected-date.

Screenshots
Image
If you notice in the above screenshot, we can see the --in-selecting-range class is getting applied over the wrong set of dates, eventhough I already selected the endDate.

Note: This issue is only there in the End Date Picker
Related Issue: #5490

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions