Support selecting multiple dates

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

@@ -101,6 +101,7 @@ import selectsRangeWithDisabledDates from "../../examples/selectsRangeWithDisabl
 import CalendarStartDay from "../../examples/calendarStartDay";
 import ExternalForm from "../../examples/externalForm";
 import CalendarIcon from "../../examples/calendarIcon";
+import SelectsMultiple from "../../examples/selectsMultiple";
 import CalendarIconExternal from "../../examples/calendarIconExternal";
 import CalendarIconSvgIcon from "../../examples/calendarIconSvgIcon";
 import ToggleCalendarOnIconClick from "../../examples/toggleCalendarOnIconClick";
@@ -484,6 +485,10 @@ export default class exampleComponents extends React.Component {
       title: "Specific Time Range",
       component: ExcludeTimePeriod,
     },
+    {
+      title: "Select multiple dates",
+      component: SelectsMultiple,
+    },
     {
       title: "Strict parsing",
       component: StrictParsing,

docs-site/src/examples/selectsMultiple.js

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

src/calendar.jsx

@@ -162,6 +162,8 @@ export default class Calendar extends React.Component {
     selectsStart: PropTypes.bool,
     selectsRange: PropTypes.bool,
     selectsDisabledDaysInRange: PropTypes.bool,
+    selectsMultiple: PropTypes.bool,
+    selectedDates: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
     showMonthDropdown: PropTypes.bool,
     showPreviousMonths: PropTypes.bool,
     showMonthYearDropdown: PropTypes.bool,
@@ -920,6 +922,8 @@ export default class Calendar extends React.Component {
             selectsEnd={this.props.selectsEnd}
             selectsRange={this.props.selectsRange}
             selectsDisabledDaysInRange={this.props.selectsDisabledDaysInRange}
+            selectsMultiple={this.props.selectsMultiple}
+            selectedDates={this.props.selectedDates}
             showWeekNumbers={this.props.showWeekNumbers}
             startDate={this.props.startDate}
             endDate={this.props.endDate}

src/date_utils.js

@@ -185,6 +185,23 @@
   return `${formattedStartDate} - ${formattedEndDate}`;
 }
 
+export function safeMultipleDatesFormat(dates, props) {
+  if (!dates || !dates.length) {
+    return "";
+  }
+  const formattedFirstDate = safeDateFormat(dates[0], props);
+  if (dates.length === 1) {
+    return formattedFirstDate;
+  }
+  if (dates.length === 2) {
+    const formattedSecondDate = safeDateFormat(dates[1], props);
+    return `${formattedFirstDate}, ${formattedSecondDate}`;
+  }
+
+  const extraDatesCount = dates.length - 1;
+  return `${formattedFirstDate} (+${extraDatesCount})`;
+}
+
 // ** Date Setters **
 
 export function setTime(date, { hour = 0, minute = 0, second = 0 }) {

src/day.jsx

@@ -42,6 +42,8 @@
     showWeekPicker: PropTypes.bool,
     showWeekNumber: PropTypes.bool,
     selectsDisabledDaysInRange: PropTypes.bool,
+    selectsMultiple: PropTypes.bool,
+    selectedDates: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
     startDate: PropTypes.instanceOf(Date),
     renderDayContents: PropTypes.func,
     handleOnKeyDown: PropTypes.func,
@@ -93,14 +95,25 @@
 
   isSameDay = (other) => isSameDay(this.props.day, other);
 
-  isKeyboardSelected = () =>
-    !this.props.disabledKeyboardNavigation &&
-    !(
-      this.isSameDay(this.props.selected) ||
-      this.isSameWeek(this.props.selected)
-    ) &&
-    (this.isSameDay(this.props.preSelection) ||
-      this.isSameWeek(this.props.preSelection));
+  isKeyboardSelected = () => {
+    if (this.props.disabledKeyboardNavigation) {
+      return false;
+    }
+    if (this.props.selectsMultiple) {
+      const isSelectedDate = (this.props.selectedDates || []).some((date) =>
+        this.isSameDay(date)
+      );
+      return !isSelectedDate && this.isSameDay(this.props.preSelection);
+    } else {
+      return !(
+        this.isSameDay(this.props.selected) ||
+        this.isSameWeek(this.props.selected)
+      ) && (
+        this.isSameDay(this.props.preSelection) ||
+        this.isSameWeek(this.props.preSelection)
+      );
+    }
+  };
 
   isDisabled = () => isDayDisabled(this.props.day, this.props);
 
@@ -275,9 +288,13 @@
   };
 
   isCurrentDay = () => this.isSameDay(newDate());
-
-  isSelected = () =>
-    this.isSameDay(this.props.selected) || this.isSameWeek(this.props.selected);
+
+  isSelected = () => {
+    if (this.props.selectsMultiple && this.props.selectedDates) {
+      return this.props.selectedDates.some((date) => this.isSameDay(date));
+    }
+    return this.isSameDay(this.props.selected) || this.isSameWeek(this.props.selected);
+  }; 
 
   getClassNames = (date) => {
     const dayClassName = this.props.dayClassName

src/index.jsx

@@ -45,6 +45,7 @@
   isSameDay,
   isMonthDisabled,
   isYearDisabled,
+  safeMultipleDatesFormat,
   getHolidaysMap,
   isDateBefore,
 } from "./date_utils";
@@ -230,6 +231,8 @@
     selectsStart: PropTypes.bool,
     selectsRange: PropTypes.bool,
     selectsDisabledDaysInRange: PropTypes.bool,
+    selectsMultiple: PropTypes.bool,
+    selectedDates: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
     showMonthDropdown: PropTypes.bool,
     showPreviousMonths: PropTypes.bool,
     showMonthYearDropdown: PropTypes.bool,
@@ -621,12 +624,20 @@
       }
     }
 
-    const { onChange, selectsRange, startDate, endDate } = this.props;
+    const {
+      onChange,
+      selectsRange,
+      startDate,
+      endDate,
+      selectsMultiple,
+      selectedDates,
+    } = this.props;
 
     if (
       !isEqual(this.props.selected, changedDate) ||
       this.props.allowSameDay ||
-      selectsRange
+      selectsRange ||
+      selectsMultiple
     ) {
       if (changedDate !== null) {
         if (
@@ -667,6 +678,26 @@
         if (isRangeFilled) {
           onChange([changedDate, null], event);
         }
+      } else if (selectsMultiple) {
+        const noSelectedDates = !selectedDates || selectedDates.length === 0;
+
+        if (noSelectedDates) {
+          onChange([changedDate], event);
+        } else {
+          const isChangedDateAlreadySelected = selectedDates.some(
+            (selectedDate) => isSameDay(selectedDate, changedDate)
+          );
+
+          if (isChangedDateAlreadySelected) {
+            const nextDates = selectedDates.filter(
+              (selectedDate) => !isSameDay(selectedDate, changedDate)
+            );
+
+            onChange(nextDates, event);
+          } else {
+            onChange([...selectedDates, changedDate], event);
+          }
+        }
       } else {
         onChange(changedDate, event);
       }
@@ -1011,6 +1042,8 @@
         selectsStart={this.props.selectsStart}
         selectsEnd={this.props.selectsEnd}
         selectsRange={this.props.selectsRange}
+        selectsMultiple={this.props.selectsMultiple}
+        selectedDates={this.props.selectedDates}
         startDate={this.props.startDate}
         endDate={this.props.endDate}
         excludeDates={this.props.excludeDates}
@@ -1194,6 +1227,8 @@
             this.props.endDate,
             this.props,
           )
+        : this.props.selectsMultiple
+        ? safeMultipleDatesFormat(this.props.selectedDates, this.props)
         : safeDateFormat(this.props.selected, this.props);
 
     return React.cloneElement(customInput, {

src/month.jsx

@@ -99,6 +99,8 @@ export default class Month extends React.Component {
     selectsStart: PropTypes.bool,
     selectsRange: PropTypes.bool,
     selectsDisabledDaysInRange: PropTypes.bool,
+    selectsMultiple: PropTypes.bool,
+    selectedDates: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
     showWeekNumbers: PropTypes.bool,
     startDate: PropTypes.instanceOf(Date),
     setOpen: PropTypes.func,
@@ -330,6 +332,8 @@ export default class Month extends React.Component {
           selectsEnd={this.props.selectsEnd}
           selectsRange={this.props.selectsRange}
           selectsDisabledDaysInRange={this.props.selectsDisabledDaysInRange}
+          selectsMultiple={this.props.selectsMultiple}
+          selectedDates={this.props.selectedDates}
           showWeekNumber={this.props.showWeekNumbers}
           showWeekPicker={this.props.showWeekPicker}
           startDate={this.props.startDate}

src/week.jsx

@@ -52,6 +52,8 @@ export default class Week extends React.Component {
     selectsEnd: PropTypes.bool,
     selectsStart: PropTypes.bool,
     selectsRange: PropTypes.bool,
+    selectsMultiple: PropTypes.bool,
+    selectedDates: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
     selectsDisabledDaysInRange: PropTypes.bool,
     showWeekNumber: PropTypes.bool,
     showWeekPicker: PropTypes.bool,
@@ -166,6 +168,8 @@ export default class Week extends React.Component {
             showWeekPicker={this.props.showWeekPicker}
             showWeekNumber={this.props.showWeekNumber}
             selectsDisabledDaysInRange={this.props.selectsDisabledDaysInRange}
+            selectsMultiple={this.props.selectsMultiple}
+            selectedDates={this.props.selectedDates}
             startDate={this.props.startDate}
             endDate={this.props.endDate}
             dayClassName={this.props.dayClassName}

test/multiple_selected_dates.test.js

@@ -0,0 +1,32 @@
+import React from "react";
+import DatePicker from "../src";
+import TestUtils from "react-dom/test-utils";
+
+describe("Multiple Dates Selected", function () {
+  function getDatePicker(extraProps) {
+    return TestUtils.renderIntoDocument(
+      <DatePicker
+        selectsMultiple
+        onChange={() => {}}
+        shouldCloseOnSelect={false}
+        disabledKeyboardNavigation
+        {...extraProps}
+      />,
+    );
+  }
+
+  it("should handle text format for multiple selections", () => {
+    const datePicker = getDatePicker({
+      selectsMultiple: true,
+      selectedDates: [new Date("2024/01/01"), new Date("2024/01/15")],
+    });
+
+    expect(datePicker.input.value).toBe("01/01/2024, 01/15/2024");
+  });
+
+  it("should have multiple highlighted days", () => {
+    const datePicker = getDatePicker({
+      selectedDates: [new Date("2024/01/01"), new Date("2024/01/15")],
+    });
+  });
+});