feat: improve the boundary of disabledtime (#597)

Author: mengxiong10

__test__/time-panel.test.js

@@ -70,19 +70,19 @@ describe('TimePanel', () => {
       },
     });
     const hour = wrapper.find('[data-type=hour] li:nth-child(2)');
-    hour.trigger('click');
+    await hour.trigger('click');
     expect(wrapper.emitted().select[0][0]).toEqual(new Date(2019, 9, 10, 1));
     await wrapper.setProps({ value: new Date(2019, 9, 10, 1) });
     const minute = wrapper.find('[data-type=minute] li:nth-child(2)');
-    minute.trigger('click');
+    await minute.trigger('click');
     expect(wrapper.emitted().select[1][0]).toEqual(new Date(2019, 9, 10, 1, 1));
     await wrapper.setProps({ value: new Date(2019, 9, 10, 1, 1) });
     const second = wrapper.find('[data-type=second] li:nth-child(2)');
-    second.trigger('click');
+    await second.trigger('click');
     expect(wrapper.emitted().select[2][0]).toEqual(new Date(2019, 9, 10, 1, 1, 1));
     await wrapper.setProps({ value: new Date(2019, 9, 10, 1, 1, 1) });
     const pm = wrapper.find('[data-type=ampm] li:nth-child(2)');
-    pm.trigger('click');
+    await pm.trigger('click');
     expect(wrapper.emitted().select[3][0]).toEqual(new Date(2019, 9, 10, 13, 1, 1));
   });
 

example/demo/DisabledDateTime.vue

@@ -9,13 +9,13 @@
       ></date-picker>
     </section>
     <section>
-      <p>Not before 09:00</p>
+      <p>Not before 09:30</p>
       <date-picker
         v-model="value3"
         value-type="format"
         type="time"
         placeholder="HH:mm:ss"
-        :default-value="new Date().setHours(9, 0, 0, 0)"
+        :default-value="new Date().setHours(9, 30, 0, 0)"
         :disabled-time="notBeforeNineOClock"
       ></date-picker>
     </section>
@@ -50,7 +50,7 @@ export default {
       return date < today || date > new Date(today.getTime() + 7 * 24 * 3600 * 1000);
     },
     notBeforeNineOClock(date) {
-      return date.getHours() < 9;
+      return date < new Date(date.getTime()).setHours(9, 30, 0, 0);
     },
     notBeforeToday(date) {
       return date < new Date(new Date().setHours(0, 0, 0, 0));

src/time/list-columns.vue

@@ -11,7 +11,7 @@
           v-for="(item, j) in col.list"
           :key="item.value"
           :data-index="j"
-          :class="[`${prefixClass}-time-item`, getClasses(item.value)]"
+          :class="[`${prefixClass}-time-item`, getClasses(item.value, col.type)]"
         >
           {{ item.text }}
         </li>

src/time/time-panel.vue

@@ -120,10 +120,12 @@ export default {
       default: 100,
     },
   },
+  data() {
+    return {
+      innerValue: getValidDate(this.value, this.defaultValue),
+    };
+  },
   computed: {
-    innerValue() {
-      return getValidDate(this.value, this.defaultValue);
-    },
     title() {
       const titleFormat = this.timeTitleFormat;
       const date = new Date(this.innerValue);
@@ -147,25 +149,61 @@ export default {
       return obj;
     },
   },
+  watch: {
+    value: {
+      immediate: true,
+      handler() {
+        this.innerValue = getValidDate(this.value, this.defaultValue);
+      },
+    },
+  },
   methods: {
     formatDate(date, fmt) {
       return format(date, fmt, { locale: this.getLocale().formatLocale });
     },
-    isDisabled(date) {
-      return this.disabledTime(new Date(date));
+    isDisabledTime(value) {
+      return this.disabledTime(new Date(value));
+    },
+    isDisabledHour(date) {
+      const value = new Date(date);
+      return (
+        this.isDisabledTime(value) &&
+        this.isDisabledTime(value.setMinutes(0, 0, 0)) &&
+        this.isDisabledTime(value.setMinutes(59, 59, 999))
+      );
+    },
+    isDisabledMinute(date) {
+      const value = new Date(date);
+      return (
+        this.isDisabledTime(value) &&
+        this.isDisabledTime(value.setSeconds(0, 0)) &&
+        this.isDisabledTime(value.setSeconds(59, 999))
+      );
+    },
+    isDisabled(date, type) {
+      if (type === 'hour') {
+        return this.isDisabledHour(date);
+      }
+      if (type === 'minute') {
+        return this.isDisabledMinute(date);
+      }
+      return this.isDisabledTime(date);
     },
     handleSelect(value, type) {
       const date = new Date(value);
-      if (!this.isDisabled(value)) {
-        this.$emit('select', date, type);
+      if (!this.isDisabled(value, type)) {
+        this.innerValue = date;
+        if (!this.isDisabledTime(date)) {
+          this.$emit('select', date, type);
+        }
       }
     },
     handleClickTitle() {
       this.$emit('clicktitle');
     },
-    getClasses(value) {
+    getClasses(value, type) {
       const cellDate = new Date(value);
-      if (this.isDisabled(value)) {
+      if (this.isDisabled(value, type)) {
         return 'disabled';
       }
       if (cellDate.getTime() === this.innerValue.getTime()) {