diff --git a/src/date_utils.ts b/src/date_utils.ts index 204884692..01a12fc05 100644 --- a/src/date_utils.ts +++ b/src/date_utils.ts @@ -223,6 +223,11 @@ export function safeDateFormat( return (date && formatDate(date, formatStr, locale)) || ""; } +/** + * Used as a delimiter to separate two dates when formatting a date range + */ +export const DATE_RANGE_SEPARATOR = " - "; + /** * Safely formats a date range. * @@ -243,7 +248,7 @@ export function safeDateRangeFormat( const formattedStartDate = safeDateFormat(startDate, props); const formattedEndDate = endDate ? safeDateFormat(endDate, props) : ""; - return `${formattedStartDate} - ${formattedEndDate}`; + return `${formattedStartDate}${DATE_RANGE_SEPARATOR}${formattedEndDate}`; } /** diff --git a/src/index.tsx b/src/index.tsx index f91e869ce..eafa37658 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -49,6 +49,7 @@ import { type HighlightDate, type HolidayItem, KeyType, + DATE_RANGE_SEPARATOR, } from "./date_utils"; import PopperComponent from "./popper_component"; import Portal from "./portal"; @@ -608,7 +609,7 @@ export default class DatePicker extends Component< if (selectsRange) { const [valueStart, valueEnd] = value - .split("-", 2) + .split(dateFormat.includes("-") ? DATE_RANGE_SEPARATOR : "-", 2) .map((val) => val.trim()); const startDateNew = parseDate( valueStart ?? "", diff --git a/src/test/datepicker_test.test.tsx b/src/test/datepicker_test.test.tsx index 54d5a0c5f..b4c64021d 100644 --- a/src/test/datepicker_test.test.tsx +++ b/src/test/datepicker_test.test.tsx @@ -3443,6 +3443,35 @@ describe("DatePicker", () => { ); }); + it("should parses date range with dashes correctly", () => { + const onChangeSpy = jest.fn(); + const dateFormat = "yyyy-MM-dd"; + + const { container } = render( + , + ); + + const input = safeQuerySelector(container, "input"); + fireEvent.change(input, { + target: { + value: "2024-03-04 - 2024-05-06", + }, + }); + expect(onChangeSpy).toHaveBeenCalledTimes(1); + expect(Array.isArray(onChangeSpy.mock.calls[0][0])).toBe(true); + const [startDate, endDate] = onChangeSpy.mock.calls[0][0]; + expect(startDate).toBeTruthy(); + expect(endDate).toBeTruthy(); + expect(formatDate(startDate, dateFormat)).toBe("2024-03-04"); + expect(formatDate(endDate, dateFormat)).toBe("2024-05-06"); + }); + it("should not fire onChange a second time if user edits text box without the parsing result changing", () => { const onChangeSpy = jest.fn(); let instance: DatePicker | null = null;