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 @@
   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 @@
     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 &&