fix(datetimepickerv2): update placeholder text

carbon-design-system · May 2, 2023 · 0305301 · 0305301
1 parent c004014
commit 0305301
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/packages/react/src/components/DateTimePicker/DateTimePickerV2.test.jsx b/packages/react/src/components/DateTimePicker/DateTimePickerV2.test.jsx
@@ -607,8 +607,8 @@ describe('DateTimePickerV2', () => {
         }}
       />
     );
-    // default value is YYYY-MM-DD hh:mm A
-    expect(screen.getByText('YYYY-MM-DD hh:mm A')).toBeVisible();
+    // default value is YYYY-MM-DD hh:mm XM
+    expect(screen.getByText('YYYY-MM-DD hh:mm XM')).toBeVisible();
   });
 
   it('should clear date and time fields when click clear button in single select', () => {
@@ -641,7 +641,7 @@ describe('DateTimePickerV2', () => {
 
     userEvent.click(screen.getByText(/clear/i));
 
-    expect(screen.getByText('YYYY-MM-DD hh:mm A')).toBeVisible();
+    expect(screen.getByText('YYYY-MM-DD hh:mm XM')).toBeVisible();
     expect(screen.queryByRole('dialog')).toBeNull();
     expect(mockOnClear).toHaveBeenCalledWith({
       timeRangeKind: 'SINGLE',
@@ -685,7 +685,7 @@ describe('DateTimePickerV2', () => {
     // first open the menu
     userEvent.click(screen.getAllByText(/2020-04-01 12:34 AM/i)[0]);
     userEvent.click(screen.getByText(i18n.resetBtnLabel));
-    expect(screen.getByText('YYYY-MM-DD hh:mm A')).toBeVisible();
+    expect(screen.getByText('YYYY-MM-DD hh:mm XM')).toBeVisible();
 
     // open the calendar again
     userEvent.click(screen.getAllByLabelText('Calendar')[0]);

diff --git a/packages/react/src/components/DateTimePicker/dateTimePickerUtils.js b/packages/react/src/components/DateTimePicker/dateTimePickerUtils.js
@@ -148,8 +148,10 @@ export const parseValue = (timeRange, dateTimeMask, toLabel, hasTimeInput) => {
       break;
     }
     case PICKER_KINDS.SINGLE: {
+      // replace 'a' or 'A' in dateTimeMask to be consistent with time picker placeholder text
+      const updatedDateTimeMask = dateTimeMask.replace(/a|A/, 'XM');
       if (!value.start && !value.startDate) {
-        readableValue = dateTimeMask;
+        readableValue = updatedDateTimeMask;
         returnValue.single.start = null;
         break;
       }
@@ -162,7 +164,7 @@ export const parseValue = (timeRange, dateTimeMask, toLabel, hasTimeInput) => {
         startDate = startDate.minutes(formatedStartTime.split(':')[1]);
       } else if (hasTimeInput) {
         returnValue.absolute.startTime = null;
-        readableValue = dateTimeMask;
+        readableValue = updatedDateTimeMask;
         break;
       }
       returnValue.single.start = new Date(startDate.valueOf());