diff --git a/packages/components/time-picker/src/time-picker-com/basic-time-spinner.vue b/packages/components/time-picker/src/time-picker-com/basic-time-spinner.vue
index de72a093a2..55394d0d6f 100755
--- a/packages/components/time-picker/src/time-picker-com/basic-time-spinner.vue
+++ b/packages/components/time-picker/src/time-picker-com/basic-time-spinner.vue
@@ -179,18 +179,26 @@ const getAmPmFlag = (hour: number) => {
 
 const emitSelectRange = (type: TimeUnit) => {
   let range = [0, 0]
-  if (!format || format === DEFAULT_FORMATS_TIME) {
-    switch (type) {
-      case 'hours':
-        range = [0, 2]
-        break
-      case 'minutes':
-        range = [3, 5]
-        break
-      case 'seconds':
-        range = [6, 8]
-        break
-    }
+  const actualFormat = format || DEFAULT_FORMATS_TIME
+  const hourIndex = actualFormat.indexOf('HH')
+  const minuteIndex = actualFormat.indexOf('mm')
+  const secondIndex = actualFormat.indexOf('ss')
+  switch (type) {
+    case 'hours':
+      if (hourIndex !== -1) {
+        range = [hourIndex, hourIndex + 2]
+      }
+      break
+    case 'minutes':
+      if (minuteIndex !== -1) {
+        range = [minuteIndex, minuteIndex + 2]
+      }
+      break
+    case 'seconds':
+      if (secondIndex !== -1) {
+        range = [secondIndex, secondIndex + 2]
+      }
+      break
   }
   const [left, right] = range
 
diff --git a/packages/components/time-picker/src/time-picker-com/panel-time-pick.vue b/packages/components/time-picker/src/time-picker-com/panel-time-pick.vue
index 138896d82e..d749712231 100644
--- a/packages/components/time-picker/src/time-picker-com/panel-time-pick.vue
+++ b/packages/components/time-picker/src/time-picker-com/panel-time-pick.vue
@@ -116,10 +116,25 @@ const setSelectionRange = (start: number, end: number) => {
 }
 
 const changeSelectionRange = (step: number) => {
-  const list = [0, 3].concat(showSeconds.value ? [6] : [])
-  const mapping = ['hours', 'minutes'].concat(
-    showSeconds.value ? ['seconds'] : []
-  )
+  const actualFormat = props.format
+  const hourIndex = actualFormat.indexOf('HH')
+  const minuteIndex = actualFormat.indexOf('mm')
+  const secondIndex = actualFormat.indexOf('ss')
+  const list: number[] = []
+  const mapping: string[] = []
+  if (hourIndex !== -1) {
+    list.push(hourIndex)
+    mapping.push('hours')
+  }
+  if (minuteIndex !== -1) {
+    list.push(minuteIndex)
+    mapping.push('minutes')
+  }
+  if (secondIndex !== -1 && showSeconds.value) {
+    list.push(secondIndex)
+    mapping.push('seconds')
+  }
+
   const index = list.indexOf(selectionRange.value[0])
   const next = (index + step + list.length) % list.length
   timePickerOptions['start_emitSelectRange'](mapping[next])