From 028d8e5a4031aaccf4af105023f707e03ec387fb Mon Sep 17 00:00:00 2001
From: Aex <spryti@qq.com>
Date: Mon, 23 Aug 2021 16:23:55 +0000
Subject: [PATCH] DatePicker:  Add calculation of select range position

---
 .../date-picker/src/basic/time-spinner.vue    | 30 +++++++++++++++----
 packages/date-picker/src/panel/time-range.vue |  6 ++--
 packages/date-picker/src/panel/time.vue       |  3 +-
 3 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/packages/date-picker/src/basic/time-spinner.vue b/packages/date-picker/src/basic/time-spinner.vue
index aaf9cf3ad..4e741895d 100644
--- a/packages/date-picker/src/basic/time-spinner.vue
+++ b/packages/date-picker/src/basic/time-spinner.vue
@@ -120,6 +120,7 @@
         default: true
       },
       arrowControl: Boolean,
+      format: String,
       amPmMode: {
         type: String,
         default: '' // 'a': am/pm; 'A': AM/PM
@@ -206,13 +207,30 @@
         }
       },
 
+      calculateSelectRangePostion(type) {
+        const reg = /[Hhms]/g;
+        const postion = { start: -1, end: -1 };
+        const maskTypeMap = { H: 'hours', h: 'hours', m: 'minutes', s: 'seconds' };
+
+        while (true) {
+          const match = reg.exec(this.format);
+          if (!match) break;
+          const { 0: mask, index } = match;
+          if (maskTypeMap[mask] === type) {
+            if (postion.start === -1) {
+              postion.start = postion.end = index;
+            } else {
+              postion.end = index;
+            }
+          }
+        }
+        return postion;
+      },
+
       emitSelectRange(type) {
-        if (type === 'hours') {
-          this.$emit('select-range', 0, 2);
-        } else if (type === 'minutes') {
-          this.$emit('select-range', 3, 5);
-        } else if (type === 'seconds') {
-          this.$emit('select-range', 6, 8);
+        const { start, end } = this.calculateSelectRangePostion(type);
+        if (start > -1) {
+          this.$emit('select-range', start, end + 1);
         }
         this.currentScrollbar = type;
       },
diff --git a/packages/date-picker/src/panel/time-range.vue b/packages/date-picker/src/panel/time-range.vue
index f6ce5395f..17527ef7a 100644
--- a/packages/date-picker/src/panel/time-range.vue
+++ b/packages/date-picker/src/panel/time-range.vue
@@ -19,7 +19,8 @@
               @change="handleMinChange"
               :arrow-control="arrowControl"
               @select-range="setMinSelectionRange"
-              :date="minDate">
+              :date="minDate"
+              :format="format">
             </time-spinner>
           </div>
         </div>
@@ -35,7 +36,8 @@
               @change="handleMaxChange"
               :arrow-control="arrowControl"
               @select-range="setMaxSelectionRange"
-              :date="maxDate">
+              :date="maxDate"
+              :format="format">
             </time-spinner>
           </div>
         </div>
diff --git a/packages/date-picker/src/panel/time.vue b/packages/date-picker/src/panel/time.vue
index b2f97e6ca..dfd557e9a 100644
--- a/packages/date-picker/src/panel/time.vue
+++ b/packages/date-picker/src/panel/time.vue
@@ -12,7 +12,8 @@
           :show-seconds="showSeconds"
           :am-pm-mode="amPmMode"
           @select-range="setSelectionRange"
-          :date="date">
+          :date="date"
+          :format="format">
         </time-spinner>
       </div>
       <div class="el-time-panel__footer">