DatePicker: Add calculation of select range position

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') {
+        const { start, end } = this.calculateSelectRangePostion(type);
-          this.$emit('select-range', 0, 2);
+        if (start > -1) {
-        } else if (type === 'minutes') {
+          this.$emit('select-range', start, end + 1);
-          this.$emit('select-range', 3, 5);
-        } else if (type === 'seconds') {
-          this.$emit('select-range', 6, 8);
         }
         this.currentScrollbar = type;
       },

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>

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">