TimeSelect: add maxTime, resolve #1826 (#1987)

examples/docs/en-US/time-picker.md

@@ -161,6 +161,7 @@ Can pick an arbitrary time range.
 | end | end time | string | — | 18:00 |
 | step | time step | string | — | 00:30 |
 | minTime | minimum time, any time before this time will be disabled | string | — | 00:00 |
+| maxTime | maximum time, any time after this time will be disabled | string | — | - |
 
 ### Time Picker Options
 | Attribute      | Description          | Type      | Accepted Values       | Default  |

examples/docs/zh-CN/time-picker.md

@@ -168,6 +168,7 @@
 | end | 结束时间 | string | — | 18:00 |
 | step | 间隔时间 | string | — | 00:30 |
 | minTime | 最小时间，小于该时间的时间段将被禁用 | string | — | 00:00 |
+| maxTime | 最大时间，大于该时间的时间段将被禁用 | string | — | - |
 
 ### Time Picker Options
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |

packages/date-picker/src/panel/time-select.vue

@@ -70,8 +70,11 @@
 
   export default {
     watch: {
-      minTime(val) {
+      value(val) {
-        if (this.value && val && compareTime(this.value, val) === -1) {
+        if (!val) return;
+        if (this.minTime && compareTime(val, this.minTime) < 0) {
+          this.$emit('pick');
+        } else if (this.maxTime && compareTime(val, this.maxTime) > 0) {
           this.$emit('pick');
         }
       }
@@ -98,6 +101,7 @@
         value: '',
         visible: false,
         minTime: '',
+        maxTime: '',
         width: 0
       };
     },
@@ -115,7 +119,8 @@
           while (compareTime(current, end) <= 0) {
             result.push({
               value: current,
-              disabled: compareTime(current, this.minTime || '-1:-1') <= 0
+              disabled: compareTime(current, this.minTime || '-1:-1') <= 0 ||
+                compareTime(current, this.maxTime || '100:100') > 0
             });
             current = nextTime(current, step);
           }

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

@@ -140,4 +140,62 @@ describe('TimeSelect', () => {
       }, 50);
     }, 50);
   });
+
+  it('set maxTime', done => {
+    vm = createVue(`
+      <el-time-select
+        ref="picker"
+        :picker-options="{
+          maxTime: '14:30',
+          step: '00:30'
+        }">
+      </el-time-select>
+    `, true);
+    const input = vm.$el.querySelector('input');
+    const picker = vm.$refs.picker;
+
+    input.focus();
+    input.blur();
+
+    setTimeout(_ => {
+      const elm = picker.picker.$el.querySelector('.disabled');
+
+      expect(elm.textContent).to.equal('15:00');
+      destroyVM(vm);
+      done();
+    }, 50);
+  });
+
+  it('maxTime > value', done => {
+    vm = createVue({
+      template: `
+        <el-time-select
+          ref="picker"
+          v-model="value"
+          :picker-options="{
+            maxTime: '14:30'
+          }">
+        </el-time-select>
+      `,
+      data() {
+        return { value: '09:30' };
+      }
+    }, true);
+    const input = vm.$el.querySelector('input');
+    const picker = vm.$refs.picker;
+
+    input.focus();
+    input.blur();
+
+    setTimeout(_ => {
+      vm.value = '10:30';
+
+      setTimeout(_ => {
+        expect(picker.picker.value).to.equal('09:30');
+        destroyVM(vm);
+        done();
+      }, 50);
+    }, 50);
+  });
+
 });