fix(TimePicker): fixed only support hh:mm format (#3280)

Tencent · Aug 26, 2024 · 36b4393 · 36b4393
1 parent cbb1b90
commit 36b4393
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 18 deletions.
diff --git a/src/time-picker/__tests__/index.test.jsx b/src/time-picker/__tests__/index.test.jsx
@@ -76,6 +76,14 @@ describe('TimePicker', () => {
       const panelNode = document.querySelector('.t-time-picker__panel');
       // format为HH:mm 只展示两列 即时分
       expect(panelNode.querySelectorAll('.t-time-picker__panel-body-scroll').length).toBe(2);
+
+      await wrapper.setProps({
+        popupProps: {
+          visible: true,
+        },
+        format: 'HH时mm分',
+      });
+      expect(panelNode.querySelectorAll('.t-time-picker__panel-body-scroll').length).toBe(2);
       panelNode.parentNode.removeChild(panelNode);
     });
 

diff --git a/src/time-picker/panel/single-panel.tsx b/src/time-picker/panel/single-panel.tsx
@@ -9,12 +9,7 @@ import customParseFormat from 'dayjs/plugin/customParseFormat';
 
 import { panelColProps } from './props';
 import {
-  EPickerCols,
-  TWELVE_HOUR_FORMAT,
-  TIME_FORMAT,
-  AM,
-  PM,
-  MERIDIEM_LIST,
+  EPickerCols, TWELVE_HOUR_FORMAT, AM, PM, MERIDIEM_LIST,
 } from '../../_common/js/time-picker/const';
 import { closestLookup } from '../../_common/js/time-picker/utils';
 import { useConfig } from '../../hooks/useConfig';
@@ -28,6 +23,8 @@ const panelOffset = {
   bottom: 21,
 };
 
+export const REGEX_FORMAT = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g;
+
 export default defineComponent({
   name: 'TTimePickerPanelCol',
   props: {
@@ -82,22 +79,40 @@ export default defineComponent({
     );
 
     onMounted(() => {
-      const match = format.value.match(TIME_FORMAT);
-
-      const [, startCol, hourCol, minuteCol, secondCol, milliSecondCol, endCol] = match;
+      const match = format.value.match(REGEX_FORMAT);
       const {
         meridiem, hour, minute, second, milliSecond,
       } = EPickerCols;
 
-      const renderCol = [
-        startCol && meridiem,
-        hourCol && hour,
-        minuteCol && minute,
-        secondCol && second,
-        milliSecondCol && milliSecond,
-        endCol && meridiem,
-      ].filter((v) => !!v);
-
+      const renderCol: EPickerCols[] = [];
+
+      match.forEach((m) => {
+        switch (m) {
+          case 'H':
+          case 'HH':
+          case 'h':
+          case 'hh':
+            renderCol.push(hour);
+            break;
+          case 'a':
+          case 'A':
+            renderCol.push(meridiem);
+            break;
+          case 'm':
+          case 'mm':
+            renderCol.push(minute);
+            break;
+          case 's':
+          case 'ss':
+            renderCol.push(second);
+            break;
+          case 'SSS':
+            renderCol.push(milliSecond);
+            break;
+          default:
+            break;
+        }
+      });
       cols.value = renderCol;
     });