diff --git a/src/date_utils.ts b/src/date_utils.ts index 3ab13719e5..c2817ebc6f 100644 --- a/src/date_utils.ts +++ b/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; diff --git a/src/index.tsx b/src/index.tsx index 1b4186971f..a924ec4ff8 100644 --- a/src/index.tsx +++ b/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 || ; 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, diff --git a/src/test/date_utils_test.test.ts b/src/test/date_utils_test.test.ts index a3d5c25117..041ea7905d 100644 --- a/src/test/date_utils_test.test.ts +++ b/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 = [ diff --git a/src/test/min_time_test.test.tsx b/src/test/min_time_test.test.tsx index 0360a10222..cc0fc13e16 100644 --- a/src/test/min_time_test.test.tsx +++ b/src/test/min_time_test.test.tsx @@ -24,6 +24,7 @@ const DatePickerWithState = ( | "dateFormat" | "selectsRange" | "selectsMultiple" + | "showSelectedCount" | "onSelect" >, ) => {