Merge pull request #5948 from tejas-fullstack/fix/5939

Fix/5939 : The calendar doesn't display the startDate as first month

Author: martijnrusschen

src/index.tsx

@@ -339,6 +339,9 @@ export class DatePicker extends Component<DatePickerProps, DatePickerState> {
     ) {
       this.setState({ monthSelectedIn: 0 });
     }
+    if (this.props.selectsRange && this.state.monthSelectedIn !== 0) {
+      this.setState({ monthSelectedIn: 0 });
+    }
     if (prevProps.highlightDates !== this.props.highlightDates) {
       this.setState({
         highlightDates: getHighLightDaysMap(this.props.highlightDates),

src/test/datepicker_test.test.tsx

@@ -2843,6 +2843,39 @@ describe("DatePicker", () => {
     expect(instance!.state.monthSelectedIn).toEqual(0);
   });
 
+  it("should set monthSelectedIn to 0 when selectsRange is true", () => {
+    let instance: DatePicker | null = null;
+    const { rerender } = render(
+      <DatePicker
+        ref={(node) => {
+          instance = node;
+        }}
+        monthsShown={2}
+        inline
+      />,
+    );
+    expect(instance).toBeTruthy();
+    act(() => {
+      (
+        instance!.state as unknown as { monthSelectedIn: number }
+      ).monthSelectedIn = 1;
+    });
+    expect(instance!.state.monthSelectedIn).toEqual(1);
+
+    rerender(
+      <DatePicker
+        ref={(node) => {
+          instance = node;
+        }}
+        monthsShown={2}
+        inline
+        selectsRange
+      />,
+    );
+
+    expect(instance!.state.monthSelectedIn).toEqual(0);
+  });
+
   it("should disable non-jumping if prop focusSelectedMonth is true", () => {
     let instance: DatePicker | null = null;
     const { container } = render(