Merge pull request #5737 from qburst/feat/4741/custom-range-separator

feat: ✨ Add customizable range separator for date range selection in DatePicker

Author: martijnrusschen

docs-site/src/components/Examples/index.jsx

@@ -100,6 +100,7 @@ import CustomTimeInput from "../../examples/customTimeInput?raw";
 import CloseOnScroll from "../../examples/closeOnScroll?raw";
 import CloseOnScrollCallback from "../../examples/closeOnScrollCallback?raw";
 import SelectsRange from "../../examples/selectsRange?raw";
+import SelectsRangeWithCustomSeparator from "../../examples/customRangeSeparator?raw";
 import selectsRangeWithDisabledDates from "../../examples/selectsRangeWithDisabledDates?raw";
 import CalendarStartDay from "../../examples/calendarStartDay?raw";
 import ExternalForm from "../../examples/externalForm?raw";
@@ -242,6 +243,10 @@ export default class exampleComponents extends React.Component {
       title: "Date range for one datepicker",
       component: SelectsRange,
     },
+    {
+      title: "Date range for one datepicker with custom range separator",
+      component: SelectsRangeWithCustomSeparator,
+    },
     {
       title: "Date range for one datepicker with disabled dates highlighted",
       component: selectsRangeWithDisabledDates,

docs-site/src/examples/customRangeSeparator.js

@@ -0,0 +1,21 @@
+() => {
+  const [startDate, setStartDate] = useState(new Date());
+  const [endDate, setEndDate] = useState(addDays(new Date(), 3));
+
+  const onChange = (dates) => {
+    const [start, end] = dates;
+    setStartDate(start);
+    setEndDate(end);
+  };
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={onChange}
+      startDate={startDate}
+      endDate={endDate}
+      selectsRange
+      rangeSeparator=" to "
+    />
+  );
+};

docs/index.md

@@ -92,3 +92,4 @@
 | `value`                         |      |                    |             |
 | `withPortal`                    |      | `false`            |             |
 | `yearItemNumber`                |      | `12`               |             |
+| `rangeSeparator`                |      | `" - "`            |             |

src/date_utils.ts

@@ -239,16 +239,21 @@ export const DATE_RANGE_SEPARATOR = " - ";
 export function safeDateRangeFormat(
   startDate: Date | null | undefined,
   endDate: Date | null | undefined,
-  props: { dateFormat: string | string[]; locale?: Locale },
+  props: {
+    dateFormat: string | string[];
+    locale?: Locale;
+    rangeSeparator?: string;
+  },
 ): string {
   if (!startDate) {
     return "";
   }
 
   const formattedStartDate = safeDateFormat(startDate, props);
   const formattedEndDate = endDate ? safeDateFormat(endDate, props) : "";
+  const dateRangeSeparator = props.rangeSeparator || DATE_RANGE_SEPARATOR;
 
-  return `${formattedStartDate}${DATE_RANGE_SEPARATOR}${formattedEndDate}`;
+  return `${formattedStartDate}${dateRangeSeparator}${formattedEndDate}`;
 }
 
 /**

src/index.tsx

@@ -191,6 +191,7 @@ export type DatePickerProps = OmitUnion<
     ariaInvalid?: string;
     ariaLabelledBy?: string;
     ariaRequired?: string;
+    rangeSeparator?: string;
     onChangeRaw?: (
       event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
     ) => void;
@@ -265,6 +266,7 @@ export default class DatePicker extends Component<
       monthsShown: 1,
       outsideClickIgnoreClass: OUTSIDE_CLICK_IGNORE_CLASS,
       readOnly: false,
+      rangeSeparator: DATE_RANGE_SEPARATOR,
       withPortal: false,
       selectsDisabledDaysInRange: false,
       shouldCloseOnSelect: true,
@@ -615,8 +617,16 @@ export default class DatePicker extends Component<
       event?.target instanceof HTMLInputElement ? event.target.value : "";
 
     if (selectsRange) {
+      const rangeSeparator = this.props.rangeSeparator as string;
+      const trimmedRangeSeparator = rangeSeparator.trim();
+
       const [valueStart, valueEnd] = value
-        .split(dateFormat.includes("-") ? DATE_RANGE_SEPARATOR : "-", 2)
+        .split(
+          dateFormat.includes(trimmedRangeSeparator)
+            ? rangeSeparator
+            : trimmedRangeSeparator,
+          2,
+        )
         .map((val) => val.trim());
       const startDateNew = parseDate(
         valueStart ?? "",
@@ -1340,6 +1350,7 @@ export default class DatePicker extends Component<
     const customInputRef = this.props.customInputRef || "ref";
     const { dateFormat = DatePicker.defaultProps.dateFormat, locale } =
       this.props;
+
     const inputValue =
       typeof this.props.value === "string"
         ? this.props.value
@@ -1349,6 +1360,7 @@ export default class DatePicker extends Component<
             ? safeDateRangeFormat(this.props.startDate, this.props.endDate, {
                 dateFormat,
                 locale,
+                rangeSeparator: this.props.rangeSeparator,
               })
             : this.props.selectsMultiple
               ? safeMultipleDatesFormat(this.props.selectedDates ?? [], {

src/test/date_utils_test.test.ts

@@ -1271,6 +1271,28 @@ describe("date_utils", () => {
         "04/20/2021 - 04/28/2021",
       );
     });
+
+    it("should return a formatted startDate followed by the provided rangeSeparator when endDate is null", () => {
+      const startDate = new Date("2021-04-20 00:00:00");
+      const endDate = undefined;
+      expect(
+        safeDateRangeFormat(startDate, endDate, {
+          ...props,
+          rangeSeparator: " to ",
+        }),
+      ).toBe("04/20/2021 to ");
+    });
+
+    it("should return a formatted startDate followed by the provided rangeSeparator followed by a formatted endDate when startDate and endDate both have values", () => {
+      const startDate = new Date("2021-04-20 00:00:00");
+      const endDate = new Date("2021-04-28 00:00:00");
+      expect(
+        safeDateRangeFormat(startDate, endDate, {
+          ...props,
+          rangeSeparator: " to ",
+        }),
+      ).toBe("04/20/2021 to 04/28/2021");
+    });
   });
 
   describe("getHolidaysMap", () => {

src/test/datepicker_test.test.tsx

@@ -3495,6 +3495,23 @@ describe("DatePicker", () => {
 
       expect(onChangeSpy).not.toHaveBeenCalled();
     });
+
+    it("should render custom separator when `rangeSeparator` is provided", () => {
+      const onChangeSpy = jest.fn();
+      const { container } = render(
+        <DatePicker
+          selectsRange
+          rangeSeparator=" to "
+          startDate={newDate("2025-01-01")}
+          endDate={newDate("2025-01-03")}
+          onChange={onChangeSpy}
+          dateFormat="yyyy/MM/dd"
+        />,
+      );
+
+      const input = safeQuerySelector<HTMLInputElement>(container, "input");
+      expect(input.value).toBe("2025/01/01 to 2025/01/03");
+    });
   });
 
   describe("duplicate dates when multiple months", () => {