Merge pull request #3740 from carbon-design-system/fix-datetimepicker…

…v2-locale fix(datetimepickerv2): fix locale issue
carbon-design-system · Mar 3, 2023 · 40bfd63 · 40bfd63
2 parents f2beb29 + 1d8a754
commit 40bfd63
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 17 deletions.
diff --git a/packages/react/src/components/DateTimePicker/DateTimePicker.test.e2e.jsx b/packages/react/src/components/DateTimePicker/DateTimePicker.test.e2e.jsx
@@ -551,8 +551,8 @@ describe('DateTimePicker', () => {
       // Unsaved changes
       cy.findAllByLabelText('Calendar').eq(0).click();
       cy.findByText('Absolute').should('be.visible').click();
-      cy.findByText('25').should('be.visible').click();
-      cy.findByText('26').should('be.visible').click();
+      cy.findAllByText('25').click({ multiple: true, force: true });
+      cy.findAllByText('26').click({ multiple: true, force: true });
       cy.findByLabelText('Start time').type('11:30');
       cy.get('body').click();
       // Preserves only saved changes

diff --git a/packages/react/src/components/DateTimePicker/DateTimePickerV2.story.jsx b/packages/react/src/components/DateTimePicker/DateTimePickerV2.story.jsx
@@ -199,6 +199,7 @@ export const SingleSelect = () => {
         })}
         style={{ zIndex: number('zIndex', 0) }}
         renderInPortal={boolean('renderInPortal', true)}
+        locale={text('locale', 'en')}
       />
       <div style={{ height: '10rem' }} />
     </div>

diff --git a/packages/react/src/components/DateTimePicker/DateTimePickerV2.test.e2e.jsx b/packages/react/src/components/DateTimePicker/DateTimePickerV2.test.e2e.jsx
@@ -1332,8 +1332,8 @@ describe('DateTimePickerV2', () => {
       // Unsaved changes in relative range
       cy.findAllByLabelText('Calendar').eq(0).click();
       cy.findByText('Absolute').should('be.visible').click();
-      cy.findByText('25').should('be.visible').click();
-      cy.findByText('26').should('be.visible').click();
+      cy.findAllByText('25').click({ multiple: true, force: true });
+      cy.findAllByText('26').click({ multiple: true, force: true });
       cy.findByLabelText('Start time').type('14:30');
 
       cy.get('body').click();
@@ -1470,7 +1470,7 @@ describe('DateTimePickerV2', () => {
     cy.findByTestId('date-time-picker__field').should('have.text', 'YYYY-MM-DD HH:mm');
     // Unsaved changes
     cy.findByTestId('date-time-picker__field').click();
-    cy.findByText('28').click();
+    cy.findAllByText('28').click({ multiple: true, force: true });
     cy.findByLabelText('Start time').type('11:11{enter}');
     cy.get('body').click();
     // Empty value preserved

diff --git a/packages/react/src/components/DateTimePicker/DateTimePickerV2WithTimeSpinner.jsx b/packages/react/src/components/DateTimePicker/DateTimePickerV2WithTimeSpinner.jsx
@@ -341,7 +341,7 @@ const DateTimePicker = ({
   const is24hours = useMemo(() => {
     const [, time] = dateTimeMask.split(' ');
     const hoursMask = time?.split(':')[0];
-    return hoursMask === 'HH';
+    return hoursMask.includes('H');
   }, [dateTimeMask]);
   const isSingleSelect = useMemo(() => datePickerType === 'single', [datePickerType]);
 

diff --git a/packages/react/src/components/DateTimePicker/dateTimePickerUtils.js b/packages/react/src/components/DateTimePicker/dateTimePickerUtils.js
@@ -8,8 +8,18 @@ import dayjs from '../../utils/dayjs';
 
 const { iotPrefix } = settings;
 
+/** check if current time is 24 hours
+ *
+ * @param {string} dateTimeMask like YYYY-MM-DD HH:MM
+ * @returns true or false
+ */
+const is24hours = (dateTimeMask) => {
+  const [, time] = dateTimeMask.split(' ');
+  const hoursMask = time?.split(':')[0];
+  return hoursMask.includes('H');
+};
+
 /** convert time from 12 hours to 24 hours, if time12hour is 24 hours format, return immediately
- * *
  * @param {Object} object hh:mm A time oject
  * @returns HH:mm time object
  */
@@ -101,10 +111,9 @@ export const parseValue = (timeRange, dateTimeMask, toLabel) => {
     case PICKER_KINDS.ABSOLUTE: {
       let startDate = dayjs(value.start ?? value.startDate);
       if (value.startTime) {
-        const is12hour = dayjs(value.startTime, 'hh:mm A', true).isValid();
-        const formatedStartTime = is12hour
-          ? format12hourTo24hour(value.startTime)
-          : value.startTime;
+        const formatedStartTime = is24hours(dateTimeMask)
+          ? value.startTime
+          : format12hourTo24hour(value.startTime);
         startDate = startDate.hours(formatedStartTime.split(':')[0]);
         startDate = startDate.minutes(formatedStartTime.split(':')[1]);
       }
@@ -121,8 +130,9 @@ export const parseValue = (timeRange, dateTimeMask, toLabel) => {
       if (value.end ?? value.endDate) {
         let endDate = dayjs(value.end ?? value.endDate);
         if (value.endTime) {
-          const is12hour = dayjs(value.endTime, 'hh:mm A', true).isValid();
-          const formatedEndTime = is12hour ? format12hourTo24hour(value.endTime) : value.endTime;
+          const formatedEndTime = is24hours(dateTimeMask)
+            ? value.endTime
+            : format12hourTo24hour(value.endTime);
           endDate = endDate.hours(formatedEndTime.split(':')[0]);
           endDate = endDate.minutes(formatedEndTime.split(':')[1]);
         }
@@ -146,10 +156,9 @@ export const parseValue = (timeRange, dateTimeMask, toLabel) => {
       }
       let startDate = dayjs(value.start ?? value.startDate);
       if (value.startTime) {
-        const is12hour = dayjs(value.startTime, 'hh:mm A', true).isValid();
-        const formatedStartTime = is12hour
-          ? format12hourTo24hour(value.startTime)
-          : value.startTime;
+        const formatedStartTime = is24hours(dateTimeMask)
+          ? value.startTime
+          : format12hourTo24hour(value.startTime);
         startDate = startDate.hours(formatedStartTime.split(':')[0]);
         startDate = startDate.minutes(formatedStartTime.split(':')[1]);
       }