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;