Merge pull request #6067 from kykim00/feature/format-multiple-dates

feat: add formatMultipleDates prop to DatePicker

Author: martijnrusschen

docs-site/src/components/Examples/config.tsx

@@ -96,6 +96,7 @@ import SpecificDateRange from "../../examples/ts/specificDateRange?raw";
 import ExcludeTimePeriod from "../../examples/ts/excludeTimePeriod?raw";
 import SelectsMultiple from "../../examples/ts/selectsMultiple?raw";
 import SelectsMultipleMonths from "../../examples/ts/selectsMultipleMonths?raw";
+import SelectsMultipleFormat from "../../examples/ts/selectsMultipleFormat?raw";
 import StrictParsing from "../../examples/ts/strictParsing?raw";
 import TabIndex from "../../examples/ts/tabIndex?raw";
 import Today from "../../examples/ts/today?raw";
@@ -501,6 +502,10 @@ export const EXAMPLE_CONFIG: IExampleConfig[] = [
     title: "Select multiple dates",
     component: SelectsMultiple,
   },
+  {
+    title: "Select multiple dates with custom format",
+    component: SelectsMultipleFormat,
+  },
   {
     title: "Select multiple months",
     component: SelectsMultipleMonths,

docs-site/src/examples/ts/selectsMultipleFormat.tsx

@@ -0,0 +1,27 @@
+const SelectsMultipleFormat = () => {
+  const [selectedDates, setSelectedDates] = useState<Date[]>([]);
+
+  const onChange = (dates: Date[] | null) => {
+    setSelectedDates(dates ?? []);
+  };
+
+  const formatMultipleDates = (
+    dates: Date[],
+    formatDate: (date: Date) => string,
+  ) => {
+    return dates.map(formatDate).join(" | ");
+  };
+
+  return (
+    <DatePicker
+      selectedDates={selectedDates}
+      selectsMultiple
+      onChange={onChange}
+      shouldCloseOnSelect={false}
+      disabledKeyboardNavigation
+      formatMultipleDates={formatMultipleDates}
+    />
+  );
+};
+
+render(SelectsMultipleFormat);

src/index.tsx

@@ -218,6 +218,7 @@ export type DatePickerProps = OmitUnion<
     | {
         selectsRange?: never;
         selectsMultiple?: never;
+        formatMultipleDates?: never;
         onChange?: (
           date: Date | null,
           event?:
@@ -228,6 +229,7 @@ export type DatePickerProps = OmitUnion<
     | {
         selectsRange: true;
         selectsMultiple?: never;
+        formatMultipleDates?: never;
         onChange?: (
           date: [Date | null, Date | null],
           event?:
@@ -238,8 +240,12 @@ export type DatePickerProps = OmitUnion<
     | {
         selectsRange?: never;
         selectsMultiple: true;
+        formatMultipleDates?: (
+          dates: Date[],
+          formatDate: (date: Date) => string,
+        ) => string;
         onChange?: (
-          date: Date[] | null,
+          dates: Date[] | null,
           event?:
             | React.MouseEvent<HTMLElement>
             | React.KeyboardEvent<HTMLElement>,
@@ -448,6 +454,7 @@ export class DatePicker extends Component<DatePickerProps, DatePickerState> {
       selectedDates,
       selectsMultiple,
       selectsRange,
+      formatMultipleDates,
       value,
     } = this.props;
     const dateFormat =
@@ -466,6 +473,11 @@ export class DatePicker extends Component<DatePickerProps, DatePickerState> {
         rangeSeparator,
       });
     } else if (selectsMultiple) {
+      if (formatMultipleDates) {
+        const formatDateFn = (date: Date) =>
+          safeDateFormat(date, { dateFormat, locale });
+        return formatMultipleDates(selectedDates ?? [], formatDateFn);
+      }
       return safeMultipleDatesFormat(selectedDates ?? [], {
         dateFormat,
         locale,

src/test/min_time_test.test.tsx

@@ -24,6 +24,7 @@ const DatePickerWithState = (
       | "dateFormat"
       | "selectsRange"
       | "selectsMultiple"
+      | "formatMultipleDates"
       | "onSelect"
     >,
 ) => {

src/test/multiple_selected_dates.test.tsx

@@ -93,4 +93,46 @@ describe("Multiple Dates Selected", function () {
     expect(input).not.toBeNull();
     expect(input?.value).toBe("01/01/2024 (+2)");
   });
+
+  it("should override default format when formatMultipleDates is provided", () => {
+    const { container: datePicker } = getDatePicker({
+      selectsMultiple: true,
+      selectedDates: [
+        new Date("2024/01/01"),
+        new Date("2024/01/15"),
+        new Date("2024/03/15"),
+      ],
+      formatMultipleDates: (dates, formatDate) =>
+        dates.map(formatDate).join(" | "),
+    });
+
+    const input = datePicker.querySelector("input");
+
+    expect(input).not.toBeNull();
+    expect(input?.value).toBe("01/01/2024 | 01/15/2024 | 03/15/2024");
+  });
+
+  it("should pass correct arguments to formatMultipleDates", () => {
+    const selectedDates = [new Date("2024/01/01"), new Date("2024/01/15")];
+    const mockFormatter = jest.fn(
+      (dates: Date[], formatDate: (d: Date) => string) =>
+        dates.map(formatDate).join(", "),
+    );
+
+    getDatePicker({
+      selectsMultiple: true,
+      selectedDates,
+      formatMultipleDates: mockFormatter,
+    });
+
+    expect(mockFormatter).toHaveBeenCalledTimes(1);
+
+    const [receivedDates, receivedFormatDate] = mockFormatter.mock.calls[0]!;
+    expect(receivedDates).toHaveLength(2);
+    expect(receivedDates[0]?.getTime()).toBe(selectedDates[0]?.getTime());
+    expect(receivedDates[1]?.getTime()).toBe(selectedDates[1]?.getTime());
+
+    expect(typeof receivedFormatDate).toBe("function");
+    expect(receivedFormatDate(new Date("2024/01/01"))).toBe("01/01/2024");
+  });
 });