Merge pull request #4944 from luistorres/main

Add multiple months visual selection

docs-site/src/components/Examples/index.js

@@ -104,6 +104,7 @@ import CalendarStartDay from "../../examples/calendarStartDay";
 import ExternalForm from "../../examples/externalForm";
 import CalendarIcon from "../../examples/calendarIcon";
 import SelectsMultiple from "../../examples/selectsMultiple";
+import SelectsMultipleMonths from "../../examples/selectsMultipleMonths";
 import CalendarIconExternal from "../../examples/calendarIconExternal";
 import CalendarIconSvgIcon from "../../examples/calendarIconSvgIcon";
 import ToggleCalendarOnIconClick from "../../examples/toggleCalendarOnIconClick";
@@ -502,6 +503,10 @@ export default class exampleComponents extends React.Component {
       title: "Select multiple dates",
       component: SelectsMultiple,
     },
+    {
+      title: "Select multiple months",
+      component: SelectsMultipleMonths,
+    },
     {
       title: "Strict parsing",
       component: StrictParsing,

docs-site/src/examples/selectsMultipleMonths.js

@@ -0,0 +1,17 @@
+() => {
+  const [selectedDates, setSelectedDates] = useState([new Date()]);
+  const onChange = (dates) => {
+    setSelectedDates(dates);
+  };
+  return (
+    <DatePicker
+      selectedDates={selectedDates}
+      selectsMultiple
+      showMonthYearPicker
+      show
+      onChange={onChange}
+      shouldCloseOnSelect={false}
+      disabledKeyboardNavigation
+    />
+  );
+};

src/month.tsx

@@ -403,6 +403,11 @@ export default class Month extends Component<MonthProps> {
   isSelectedMonth = (day: Date, m: number, selected: Date) =>
     getMonth(selected) === m && getYear(day) === getYear(selected);
 
+  isSelectMonthInList = (day: Date, m: number, selectedDates: Date[]) =>
+    selectedDates.some((selectedDate) =>
+      this.isSelectedMonth(day, m, selectedDate),
+    );
+
   isSelectedQuarter = (day: Date, q: number, selected: Date): boolean =>
     getQuarter(day) === q && getYear(day) === getYear(selected);
 
@@ -779,20 +784,37 @@ export default class Month extends Component<MonthProps> {
     return isDisabled;
   };
 
+  getSelection() {
+    const { selected, selectedDates, selectsMultiple } = this.props;
+
+    if (selectsMultiple) {
+      return selectedDates;
+    }
+
+    if (selected) {
+      return [selected];
+    }
+
+    return undefined;
+  }
+
   getMonthClassNames = (m: number) => {
-    const { day, startDate, endDate, selected, preSelection, monthClassName } =
+    const { day, startDate, endDate, preSelection, monthClassName } =
       this.props;
     const _monthClassName = monthClassName
       ? monthClassName(setMonth(day, m))
       : undefined;
+
+    const selection = this.getSelection();
+
     return clsx(
       "react-datepicker__month-text",
       `react-datepicker__month-${m}`,
       _monthClassName,
       {
         "react-datepicker__month-text--disabled": this.isMonthDisabled(m),
-        "react-datepicker__month-text--selected": selected
-          ? this.isSelectedMonth(day, m, selected)
+        "react-datepicker__month-text--selected": selection
+          ? this.isSelectMonthInList(day, m, selection)
           : undefined,
         "react-datepicker__month-text--keyboard-selected":
           !this.props.disabledKeyboardNavigation &&

src/test/month_test.test.tsx

@@ -924,6 +924,52 @@ describe("Month", () => {
     it("should have no axe violations", () => runAxe(monthComponent));
   });
 
+  describe("if 2 months are selected in a multi selection", () => {
+    let monthComponent: HTMLElement;
+
+    beforeEach(() => {
+      monthComponent = render(
+        <Month
+          day={newDate("2015-02-01")}
+          selectedDates={[newDate("2015-02-01"), newDate("2015-03-01")]}
+          selectsMultiple
+          showMonthYearPicker
+        />,
+      ).container;
+    });
+
+    it("should return 2 selected classes in the current year", () => {
+      expect(
+        monthComponent.querySelectorAll<HTMLElement>(
+          ".react-datepicker__month-text--selected",
+        ).length,
+      ).toBe(2);
+    });
+  });
+
+  describe("if no months are selected in a multi selection", () => {
+    let monthComponent: HTMLElement;
+
+    beforeEach(() => {
+      monthComponent = render(
+        <Month
+          day={newDate("2015-02-01")}
+          selectedDates={[]}
+          selectsMultiple
+          showMonthYearPicker
+        />,
+      ).container;
+    });
+
+    it("should return 0 selected classes in the current year", () => {
+      expect(
+        monthComponent.querySelectorAll<HTMLElement>(
+          ".react-datepicker__month-text--selected",
+        ).length,
+      ).toBe(0);
+    });
+  });
+
   describe("if month is not selected", () => {
     let month: HTMLElement;