fix(DateRangePicker): fix not auto switching to the end calendar when…

… only one calendar is displayed (#3781)

docs/pages/components/date-range-picker/fragments/basic.md

@@ -1,9 +1,11 @@
 <!--start-code-->
 
 ```js
-import { DateRangePicker, Stack } from 'rsuite';
+import { DateRangePicker } from 'rsuite';
 
-const App = () => <DateRangePicker />;
+const App = () => {
+  return <DateRangePicker />;
+};
 
 ReactDOM.render(<App />, document.getElementById('root'));
 ```

src/DateRangePicker/DateRangePicker.tsx

@@ -263,6 +263,10 @@ const DateRangePicker = React.forwardRef((props: DateRangePickerProps, ref) => {
     'DateRangePicker',
     overrideLocale
   );
+
+  // Default gap between two calendars, if `showOneCalendar` is set, the gap is 0
+  const calendarGap = showOneCalendar ? 0 : 1;
+
   const rangeFormatStr = `${formatStr}${character}${formatStr}`;
 
   const [value, setValue] = useControlled(valueProp, defaultValue ?? null);
@@ -340,7 +344,7 @@ const DateRangePicker = React.forwardRef((props: DateRangePickerProps, ref) => {
       const startDate = copyTime({ from: getCalendarDatetime('start'), to: dateRange[0] });
       const endDate = copyTime({
         from: getCalendarDatetime('end'),
-        to: dateRange.length === 1 ? addMonths(startDate, 1) : dateRange[1]
+        to: dateRange.length === 1 ? addMonths(startDate, calendarGap) : dateRange[1]
       });
 
       nextValue = [startDate, endDate];
@@ -352,7 +356,10 @@ const DateRangePicker = React.forwardRef((props: DateRangePickerProps, ref) => {
     const nextCalendarDate = getSafeCalendarDate({
       value: nextValue,
       calendarKey,
-      allowAameMonth: onlyShowMonth
+
+      // When only the month is displayed and only one calendar is displayed,
+      // there is no need to add a month and two calendar panels are allowed to display the same month
+      allowSameMonth: onlyShowMonth || showOneCalendar
     });
 
     setCalendarDate(nextCalendarDate);
@@ -518,6 +525,12 @@ const DateRangePicker = React.forwardRef((props: DateRangePickerProps, ref) => {
         setHoverDateRange([nextSelectDates[0] as Date, nextSelectDates[0] as Date]);
       }
 
+      if (isSelectedIdle) {
+        setActiveCalendarKey('end');
+      } else {
+        setActiveCalendarKey('start');
+      }
+
       setSelectedDates(nextSelectDates);
       setCalendarDateRange({ dateRange: nextSelectDates, calendarKey, eventName: 'changeDate' });
       onSelect?.(date, event);
@@ -597,7 +610,7 @@ const DateRangePicker = React.forwardRef((props: DateRangePickerProps, ref) => {
       const [startDate, endData] = value;
       nextCalendarDate = [
         startDate,
-        isSameMonth(startDate, endData) ? addMonths(endData, 1) : endData
+        isSameMonth(startDate, endData) ? addMonths(endData, calendarGap) : endData
       ];
     } else {
       // Reset the date on the calendar to the default date

src/DateRangePicker/styles/index.less

@@ -62,11 +62,11 @@
     }
   }
 
-  .rs-picker-daterange-panel-show-one-calendar .rs-picker-toolbar {
-    max-width: @date-range-picker-calendar-default-width;
-
-    &-ranges {
-      width: 190px;
+  .rs-picker-daterange-panel-show-one-calendar {
+    .rs-picker-toolbar {
+      &-ranges {
+        width: 190px;
+      }
     }
   }
 
@@ -105,6 +105,7 @@
       bottom: -1px;
       border-bottom: 2px solid #3498ff;
       left: 0;
+      transition: left 0.3s;
     }
   }
 

src/DateRangePicker/test/DateRangePickerSpec.tsx

@@ -1161,6 +1161,26 @@ describe('DateRangePicker', () => {
       expect(screen.queryByTestId('calendar-end')).to.be.not.exist;
     });
 
+    it('Should allow the start and end dates to be in the same month', () => {
+      render(
+        <DateRangePicker
+          showOneCalendar
+          open
+          defaultValue={[new Date('2024-01-01'), new Date('2024-01-02')]}
+        />
+      );
+
+      expect(screen.getByRole('button', { name: 'Select month' })).to.have.text('Jan 2024');
+      expect(screen.queryByTestId('calendar-start')).to.be.exist;
+      expect(screen.queryByTestId('calendar-end')).to.be.not.exist;
+
+      fireEvent.click(screen.getByRole('gridcell', { name: '01 Jan 2024' }));
+
+      expect(screen.getByRole('button', { name: 'Select month' })).to.have.text('Jan 2024');
+      expect(screen.queryByTestId('calendar-start')).to.be.not.exist;
+      expect(screen.queryByTestId('calendar-end')).to.be.exist;
+    });
+
     it('Should be able to switch the calendar by clicking on the date', () => {
       render(
         <DateRangePicker

src/DateRangePicker/utils.ts

@@ -17,16 +17,16 @@ import {
 export function getSafeCalendarDate({
   value,
   calendarKey = 'start',
-  allowAameMonth
+  allowSameMonth
 }: {
   value: [] | [Date] | [Date, Date] | null;
   calendarKey?: 'start' | 'end';
-  allowAameMonth?: boolean;
+  allowSameMonth?: boolean;
 }): DateRange {
   // Update calendarDate if the value is not null
   value = value ?? [];
 
-  const gap = allowAameMonth ? 0 : 1;
+  const gap = allowSameMonth ? 0 : 1;
 
   if (value[0] && value[1]) {
     const diffMonth = differenceInCalendarMonths(value[1], value[0]);

src/styles/variables.less

@@ -774,7 +774,6 @@
 @date-range-picker-header-padding-vertical:       8px;
 @date-range-picker-header-font-size:              @font-size-base;
 @date-range-picker-header-line-height:            @line-height-base;
-@date-range-picker-calendar-default-width:        255px;
 
 // Input Picker