TimePicker: selectable range will affect to column minutes in spinner (#12312)

packages/date-picker/src/basic/time-spinner.vue

@@ -27,9 +27,9 @@
         ref="minutes">
         <li
           @click="handleClick('minutes', { value: key, disabled: false })"
-          v-for="(minute, key) in 60"
+          v-for="(enabled, key) in minutesList"
           class="el-time-spinner__item"
-          :class="{ 'active': key === minutes }">{{ ('0' + key).slice(-2) }}</li>
+          :class="{ 'active': key === minutes, disabled: !enabled }">{{ ('0' + key).slice(-2) }}</li>
       </el-scrollbar>
       <el-scrollbar
         v-show="showSeconds"
@@ -99,7 +99,7 @@
 </template>
 
 <script type="text/babel">
-  import { getRangeHours, modifyTime } from '../util';
+  import { getRangeHours, getRangeMinutes, modifyTime } from '../util';
   import ElScrollbar from 'element-ui/packages/scrollbar';
   import RepeatClick from 'element-ui/src/directives/repeat-click';
 
@@ -137,6 +137,9 @@
       hoursList() {
         return getRangeHours(this.selectableRange);
       },
+      minutesList() {
+        return getRangeMinutes(this.selectableRange, this.hours);
+      },
       arrowHourList() {
         const hours = this.hours;
         return [

packages/date-picker/src/util/index.js

@@ -131,6 +131,39 @@ export const getRangeHours = function(ranges) {
   return hours;
 };
 
+function setRangeData(arr, start, end, value) {
+  for (let i = start; i < end; i++) {
+    arr[i] = value;
+  }
+}
+
+export const getRangeMinutes = function(ranges, hour) {
+  const minutes = new Array(60);
+
+  if (ranges.length > 0) {
+    ranges.forEach(range => {
+      const start = range[0];
+      const end = range[1];
+      const startHour = start.getHours();
+      const startMinute = start.getMinutes();
+      const endHour = end.getHours();
+      const endMinute = end.getMinutes();
+      if (startHour === hour && endHour !== hour) {
+        setRangeData(minutes, startMinute, 60, true);
+      } else if (startHour === hour && endHour === hour) {
+        setRangeData(minutes, startMinute, endMinute + 1, true);
+      } else if (startHour !== hour && endHour === hour) {
+        setRangeData(minutes, 0, endMinute + 1, true);
+      } else if (startHour < hour && endHour > hour) {
+        setRangeData(minutes, 0, 60, true);
+      }
+    });
+  } else {
+    setRangeData(minutes, 0, 60, true);
+  }
+  return minutes;
+};
+
 export const range = function(n) {
   // see https://stackoverflow.com/questions/3746725/create-a-javascript-array-containing-1-n
   return Array.apply(null, {length: n}).map((_, n) => n);

test/unit/specs/time-picker.spec.js

@@ -202,7 +202,7 @@ describe('TimePicker', () => {
   it('selectableRange', done => {
     vm = createTest(TimePicker, {
       pickerOptions: {
-        selectableRange: '18:30:00 - 20:30:00'
+        selectableRange: ['17:30:00 - 18:30:00', '18:50:00 - 20:30:00', '21:00:00 - 22:00:00']
       }
     }, true);
     const input = vm.$el.querySelector('input');
@@ -218,9 +218,19 @@ describe('TimePicker', () => {
         .map(node => Number(node.textContent));
 
       hoursEl.querySelectorAll('.disabled')[0].click();
-      expect(disabledHours).to.not.include.members([18, 19, 20]);
+      expect(disabledHours).to.not.include.members([17, 18, 19, 20, 21, 22]);
+
+      const minutesEl = list[1];
+      hoursEl.querySelectorAll('.el-time-spinner__item')[18].click();
+      setTimeout(_ => {
+        const disabledMinutes = [].slice
+          .call(minutesEl.querySelectorAll('.disabled'))
+          .map(node => Number(node.textContent));
+        expect(disabledMinutes.every(t => t > 30 && t < 50)).to.equal(true);
+        expect(disabledMinutes.length).to.equal(19);
         done();
       }, DELAY);
+    }, DELAY);
   });
 
   it('event focus and blur', done => {