picking the correct dash is a very, very big deal

Author: hoorayimhelping

src/components/DatePicker/Common.tsx

@@ -103,7 +103,7 @@ export const DateRangePickerInput = ({
     if (selectedEndDate) {
       formattedValue = (
         <span>
-          {selectedDateFormatter.format(selectedStartDate)} -{" "}
+          {selectedDateFormatter.format(selectedStartDate)} –{" "}
           {selectedDateFormatter.format(selectedEndDate)}
         </span>
       );
@@ -115,7 +115,7 @@ export const DateRangePickerInput = ({
             color="muted"
             component="span"
           >
-            - end date
+            – end date
           </Text>
         </span>
       );
@@ -182,7 +182,7 @@ export const DateTimePickerInput = ({
               .format(selectedStartDate)
               .replace("AM", "am")
               .replace("PM", "pm")}{" "}
-            -{" "}
+            –{" "}
             {selectedDateTimeFormatter
               .format(selectedEndDate)
               .replace("AM", "am")
@@ -197,7 +197,7 @@ export const DateTimePickerInput = ({
               .format(selectedStartDate)
               .replace("AM", "am")
               .replace("PM", "pm")}{" "}
-            - {selectedDateTimeDateFormatter.format(selectedEndDate)},{" "}
+            – {selectedDateTimeDateFormatter.format(selectedEndDate)},{" "}
             <Text
               color="muted"
               component="span"
@@ -219,7 +219,7 @@ export const DateTimePickerInput = ({
               color="muted"
               component="span"
             >
-              - end date
+              – end date
             </Text>
           </span>
         );
@@ -238,7 +238,7 @@ export const DateTimePickerInput = ({
               component="span"
             >
               {" "}
-              - end date
+              – end date
             </Text>
           </span>
         );

src/components/DatePicker/DateRangePicker.test.tsx

@@ -209,7 +209,7 @@ describe("DateRangePicker", () => {
 
       await userEvent.click(getByTestId("daterangepicker-input"));
 
-      expect(getByText("Jul 01, 2020 - Jul 04, 2020")).toBeInTheDocument();
+      expect(getByText("Jul 01, 2020 – Jul 04, 2020")).toBeInTheDocument();
       expect(getByText("Jun 2020")).toBeInTheDocument();
       expect(getByText("May 2020")).toBeInTheDocument();
       expect(getByText("Apr 2020")).toBeInTheDocument();
@@ -315,7 +315,7 @@ describe("DateRangePicker", () => {
 
       await userEvent.click(getByTestId("daterangepicker-input"));
 
-      await userEvent.click(getByTestId("Jul 01, 2020 - Jul 04, 2020"));
+      await userEvent.click(getByTestId("Jul 01, 2020 – Jul 04, 2020"));
       expect(getByText("Jul 01, 2020 – Jul 04, 2020")).toBeInTheDocument();
     });
 
@@ -374,7 +374,7 @@ describe("DateRangePicker", () => {
 
       await userEvent.click(getByTestId("daterangepicker-input"));
 
-      expect(getByText("Mar 01, 2020 - Mar 04, 2020")).toBeInTheDocument();
+      expect(getByText("Mar 01, 2020 – Mar 04, 2020")).toBeInTheDocument();
       expect(getByText("Feb 2020")).toBeInTheDocument();
       expect(getByText("Jan 2020")).toBeInTheDocument();
       expect(getByText("Dec 2019")).toBeInTheDocument();

src/components/DatePicker/DateRangePicker.tsx

@@ -243,7 +243,7 @@ const PredefinedDates = ({
             ? monthFormatter.format(startDate)
             : `${selectedDateFormatter.format(
                 startDate
-              )} - ${selectedDateFormatter.format(endDate)}`.trim();
+              )} – ${selectedDateFormatter.format(endDate)}`.trim();
 
           return (
             <StyledDropdownItem

src/components/DatePicker/DateTimePicker.test.tsx

@@ -30,7 +30,7 @@ describe("DateTimePicker", () => {
     );
 
     expect(getByTestId("datetimepicker-input").textContent).toBe(
-      "Jul 04, 00:00 - end date"
+      "Jul 04, 00:00 – end date"
     );
   });
 
@@ -47,7 +47,7 @@ describe("DateTimePicker", () => {
     );
 
     expect(getByTestId("datetimepicker-input").textContent).toBe(
-      "Jul 04, 12:00 am - Jul 05, 00:00"
+      "Jul 04, 12:00 am – Jul 05, 00:00"
     );
   });
 
@@ -61,7 +61,7 @@ describe("DateTimePicker", () => {
       />
     );
 
-    expect(getByText("start date - end date")).toBeInTheDocument();
+    expect(getByText("start date – end date")).toBeInTheDocument();
   });
 
   describe("selecting dates", () => {
@@ -84,7 +84,7 @@ describe("DateTimePicker", () => {
       await userEvent.click(getByText("4"));
       await userEvent.click(getByText("4"));
 
-      expect(getByText("start date - end date")).toBeInTheDocument();
+      expect(getByText("start date – end date")).toBeInTheDocument();
     });
 
     it("calls onSelectDateRange when a date range is selected and passes in the selected date range", async () => {
@@ -118,7 +118,7 @@ describe("DateTimePicker", () => {
       await userEvent.click(getByText("10"));
 
       expect(getByTestId("datetimepicker-input").textContent).toBe(
-        "Jul 10, 00:00 - end date"
+        "Jul 10, 00:00 – end date"
       );
     });
 
@@ -142,7 +142,7 @@ describe("DateTimePicker", () => {
         await userEvent.click(getByText("4"));
 
         expect(getByTestId("datetimepicker-input").textContent).toBe(
-          "Jul 04, 00:00 - end date"
+          "Jul 04, 00:00 – end date"
         );
       });
 
@@ -159,7 +159,7 @@ describe("DateTimePicker", () => {
         await userEvent.click(getByText("01:30 am"));
 
         expect(getByTestId("datetimepicker-input").textContent).toBe(
-          "Jul 04, 01:30 am - end date"
+          "Jul 04, 01:30 am – end date"
         );
       });
 
@@ -176,7 +176,7 @@ describe("DateTimePicker", () => {
         await userEvent.click(getByText("11"));
 
         expect(getByTestId("datetimepicker-input").textContent).toBe(
-          "Jul 04, 01:30 am - Jul 11, 00:00"
+          "Jul 04, 01:30 am – Jul 11, 00:00"
         );
       });
 
@@ -194,7 +194,7 @@ describe("DateTimePicker", () => {
         await userEvent.click(getByText("02:30 pm"));
 
         expect(getByTestId("datetimepicker-input").textContent).toBe(
-          "Jul 04, 01:30 am - Jul 11, 02:30 pm"
+          "Jul 04, 01:30 am – Jul 11, 02:30 pm"
         );
       });
     });
@@ -309,7 +309,7 @@ describe("DateTimePicker", () => {
       await userEvent.click(getByText("Past 15 minutes"));
 
       expect(getByTestId("datetimepicker-input").textContent).toBe(
-        "Jul 04, 11:15 am - Jul 04, 11:30 am"
+        "Jul 04, 11:15 am – Jul 04, 11:30 am"
       );
     });
   });

src/components/DatePicker/DateTimePicker.tsx

@@ -332,7 +332,7 @@ export const DateTimePicker = ({
   futureStartDatesDisabled = false,
   maxRangeLength = -1,
   onSelectDateRange,
-  placeholder = "start date - end date",
+  placeholder = "start date – end date",
   predefinedTimesList,
 }: DateTimePickerProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);