fix(DatePicker): fix inconsistency between month selectable state and…

… ok button clickable state (#2984)

src/Calendar/MonthDropdown.tsx

@@ -37,6 +37,21 @@ export interface RowProps {
 
 const monthMap = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
 
+export function isEveryDateInMonth(
+  year: number,
+  month: number,
+  predicate: (date: Date) => boolean
+): boolean {
+  const days = DateUtils.getDaysInMonth(new Date(year, month));
+
+  for (let i = 1; i <= days; i++) {
+    if (!predicate(new Date(year, month, i))) {
+      return false;
+    }
+  }
+  return true;
+}
+
 const MonthDropdown: RsRefForwardingComponent<'div', MonthDropdownProps> = React.forwardRef(
   (props: MonthDropdownProps, ref) => {
     const {
@@ -66,15 +81,7 @@ const MonthDropdown: RsRefForwardingComponent<'div', MonthDropdownProps> = React
     const isMonthDisabled = useCallback(
       (year, month) => {
         if (disabledMonth) {
-          const days = DateUtils.getDaysInMonth(new Date(year, month));
-
-          // If all dates in a month are disabled, disable the current month
-          for (let i = 1; i <= days; i++) {
-            if (!disabledMonth(new Date(year, month, i))) {
-              return false;
-            }
-          }
-          return true;
+          return isEveryDateInMonth(year, month, disabledMonth);
         }
 
         return false;

src/DatePicker/DatePicker.tsx

@@ -7,6 +7,7 @@ import IconCalendar from '@rsuite/icons/legacy/Calendar';
 import IconClockO from '@rsuite/icons/legacy/ClockO';
 import CalendarContainer from '../Calendar/CalendarContainer';
 import useCalendarDate from '../Calendar/useCalendarDate';
+import { isEveryDateInMonth } from '../Calendar/MonthDropdown';
 import Toolbar, { RangeType } from './Toolbar';
 import Stack from '../Stack';
 import PredefinedRanges from './PredefinedRanges';
@@ -79,7 +80,11 @@ export interface DatePickerProps
   /** one tap to select */
   oneTap?: boolean;
 
-  /** Disabled date */
+  /**
+   * Whether to disable a date on the calendar view
+   *
+   * @returns date should be disabled (not selectable)
+   */
   disabledDate?: (date?: Date) => boolean;
 
   /** Disabled hours */
@@ -443,6 +448,27 @@ const DatePicker: RsRefForwardingComponent<'div', DatePickerProps> = React.forwa
       [disabledDateProp, props]
     );
 
+    /**
+     * Whether "OK" button is disabled
+     *
+     * - If format is date, disable ok button if selected date is disabled
+     * - If format is month, disable ok button if all dates in the month of selected date are disabled
+     */
+    const isOKButtonDisabled = useCallback(
+      (selectedDate: Date): boolean => {
+        if (DateUtils.shouldRenderMonth(formatStr) && !DateUtils.shouldRenderDate(formatStr)) {
+          return isEveryDateInMonth(
+            selectedDate.getFullYear(),
+            selectedDate.getMonth(),
+            disabledToolbarHandle
+          );
+        }
+
+        return disabledToolbarHandle(selectedDate);
+      },
+      [disabledToolbarHandle, formatStr]
+    );
+
     const calendarProps = useMemo(
       () =>
         mapValues(
@@ -522,7 +548,7 @@ const DatePicker: RsRefForwardingComponent<'div', DatePickerProps> = React.forwa
                 locale={locale}
                 ranges={bottomRanges}
                 calendarDate={calendarDate}
-                disabledOkBtn={disabledToolbarHandle}
+                disabledOkBtn={isOKButtonDisabled}
                 disabledShortcut={disabledToolbarHandle}
                 onClickShortcut={handleShortcutPageDate}
                 onOk={handleOK}

src/DatePicker/test/DatePickerSpec.tsx

@@ -11,6 +11,7 @@ import { DateUtils } from '../../utils';
 
 import GearIcon from '@rsuite/icons/Gear';
 import { PickerHandle } from '../../Picker';
+import { isBefore } from 'date-fns';
 
 describe('DatePicker', () => {
   it('Should render a div with "rs-picker-date" class', () => {
@@ -399,6 +400,31 @@ describe('DatePicker', () => {
     });
   });
 
+  it('Should be consistent whether a month can be selected and whether OK button is enabled when that month is selected', () => {
+    // Disable the dates before 2022-12-21
+    // Set value to 2022-11-20 (disabled)
+    // The month 2022-12 should be enabled because not all dates in that month are disabled
+    // The OK button should also be enabled because 2022-12 (currently selected) is selectable
+    render(
+      <DatePicker
+        defaultOpen
+        calendarDefaultDate={new Date(2022, 11, 20)}
+        disabledDate={date => isBefore(date as Date, new Date(2022, 11, 21))}
+        format="yyyy-MM"
+        defaultValue={new Date(2022, 11, 20)}
+      />
+    );
+
+    // TODO use a11y queries and matchers
+    expect(
+      // The currently selected month is 2022-12
+      document.querySelector(
+        '.rs-calendar-month-dropdown-cell-active .rs-calendar-month-dropdown-cell-content'
+      )
+    ).not.to.have.class('disabled');
+    expect(screen.getByRole('button', { name: 'OK' })).to.have.property('disabled', false);
+  });
+
   it('Should call `onOpen` callback', done => {
     const doneOp = () => {
       done();