feat(datepicker): added showSelectedCount for the component

src/date_utils.ts

@@ -305,12 +305,21 @@ export function safeDateRangeFormat(
  */
 export function safeMultipleDatesFormat(
   dates: Date[],
-  props: { dateFormat: string | string[]; locale?: Locale },
+  props: {
+    dateFormat: string | string[];
+    locale?: Locale;
+    showSelectedCount?: boolean;
+  },
 ): string {
   if (!dates?.length) {
     return "";
   }
 
+  if (props?.showSelectedCount === false) {
+    const formattedAllDates = dates.map((date) => safeDateFormat(date, props));
+    return formattedAllDates.join(", ");
+  }
+
   const formattedFirstDate = dates[0] ? safeDateFormat(dates[0], props) : "";
   if (dates.length === 1) {
     return formattedFirstDate;

src/index.tsx

@@ -206,6 +206,7 @@ export type DatePickerProps = OmitUnion<
     | {
         selectsRange?: never;
         selectsMultiple?: never;
+        showSelectedCount?: never;
         onChange?: (
           date: Date | null,
           event?:
@@ -216,6 +217,7 @@ export type DatePickerProps = OmitUnion<
     | {
         selectsRange: true;
         selectsMultiple?: never;
+        showSelectedCount?: never;
         onChange?: (
           date: [Date | null, Date | null],
           event?:
@@ -226,6 +228,7 @@ export type DatePickerProps = OmitUnion<
     | {
         selectsRange?: never;
         selectsMultiple: true;
+        showSelectedCount?: boolean;
         onChange?: (
           date: Date[] | null,
           event?:
@@ -301,6 +304,7 @@ export default class DatePicker extends Component<
       calendarStartDay: undefined,
       toggleCalendarOnIconClick: false,
       usePointerEvent: false,
+      showSelectedCount: true,
     };
   }
 
@@ -1337,8 +1341,11 @@ export default class DatePicker extends Component<
 
     const customInput = this.props.customInput || <input type="text" />;
     const customInputRef = this.props.customInputRef || "ref";
-    const { dateFormat = DatePicker.defaultProps.dateFormat, locale } =
-      this.props;
+    const {
+      dateFormat = DatePicker.defaultProps.dateFormat,
+      locale,
+      showSelectedCount = DatePicker.defaultProps.showSelectedCount,
+    } = this.props;
     const inputValue =
       typeof this.props.value === "string"
         ? this.props.value
@@ -1353,6 +1360,7 @@ export default class DatePicker extends Component<
               ? safeMultipleDatesFormat(this.props.selectedDates ?? [], {
                   dateFormat,
                   locale,
+                  showSelectedCount,
                 })
               : safeDateFormat(this.props.selected, {
                   dateFormat,

src/test/date_utils_test.test.ts

@@ -51,6 +51,7 @@ import {
   getMidnightDate,
   registerLocale,
   isMonthYearDisabled,
+  safeMultipleDatesFormat,
 } from "../date_utils";
 
 registerLocale("pt-BR", ptBR);
@@ -1230,6 +1231,33 @@ describe("date_utils", () => {
     });
   });
 
+  describe("safeMultipleDatesFormat", () => {
+    const props = {
+      dateFormat: "MM/dd/yyyy",
+      locale: "en",
+    };
+
+    const dates = [
+      new Date("2024-11-14 00:00:00"),
+      new Date("2024-11-15 00:00:00"),
+      new Date("2024-11-16 00:00:00"),
+    ];
+
+    it("should return a blank string when the dates array is null", () => {
+      expect(safeMultipleDatesFormat([], props)).toBe("");
+    });
+
+    it("should return the correct count when multiple dates are selected", () => {
+      expect(safeMultipleDatesFormat(dates, props)).toBe("11/14/2024 (+2)");
+    });
+
+    it("should return each selected date when showSelectedCount is false", () => {
+      expect(
+        safeMultipleDatesFormat(dates, { ...props, showSelectedCount: false }),
+      ).toBe("11/14/2024, 11/15/2024, 11/16/2024");
+    });
+  });
+
   describe("getHolidaysMap", () => {
     it("should return a map of dateClasses", () => {
       const holidayDates = [

src/test/min_time_test.test.tsx

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