DatePicker: make type responsive(#4417)

packages/date-picker/src/picker.vue

@@ -220,7 +220,8 @@ export default {
     return {
       pickerVisible: false,
       showClose: false,
-      currentValue: ''
+      currentValue: '',
+      unwatchPickerOptions: null
     };
   },
 
@@ -411,7 +412,26 @@ export default {
     showPicker() {
       if (this.$isServer) return;
       if (!this.picker) {
-        this.panel.defaultValue = this.defaultValue || this.currentValue;
+        this.mountPicker();
+      }
+      this.pickerVisible = this.picker.visible = true;
+
+      this.updatePopper();
+
+      if (this.currentValue instanceof Date) {
+        this.picker.date = new Date(this.currentValue.getTime());
+      } else {
+        this.picker.value = this.currentValue;
+      }
+      this.picker.resetView && this.picker.resetView();
+
+      this.$nextTick(() => {
+        this.picker.ajustScrollTop && this.picker.ajustScrollTop();
+      });
+    },
+
+    mountPicker() {
+      this.panel.defaultValue = this.currentValue;
       this.picker = new Vue(this.panel).$mount();
       this.picker.popperClass = this.popperClass;
       this.popperElm = this.picker.$el;
@@ -443,10 +463,9 @@ export default {
         }
       };
       updateOptions();
-        this.$watch('pickerOptions', () => updateOptions(), { deep: true });
+      this.unwatchPickerOptions = this.$watch('pickerOptions', () => updateOptions(), { deep: true });
 
       this.$el.appendChild(this.picker.$el);
-        this.pickerVisible = this.picker.visible = true;
       this.picker.resetView && this.picker.resetView();
 
       this.picker.$on('dodestroy', this.doDestroy);
@@ -460,22 +479,17 @@ export default {
         this.refInput.setSelectionRange(start, end);
         this.refInput.focus();
       });
-      } else {
-        this.pickerVisible = this.picker.visible = true;
+    },
+
+    unmountPicker() {
+      if (this.picker) {
+        this.picker.$destroy();
+        this.picker.$off();
+        if (typeof this.unwatchPickerOptions === 'function') {
+          this.unwatchPickerOptions();
         }
-
-      this.updatePopper();
-
-      if (this.currentValue instanceof Date) {
-        this.picker.date = new Date(this.currentValue.getTime());
-      } else {
-        this.picker.value = this.currentValue;
+        this.picker.$el.parentNode.removeChild(this.picker.$el);
       }
-      this.picker.resetView && this.picker.resetView();
-
-      this.$nextTick(() => {
-        this.picker.ajustScrollTop && this.picker.ajustScrollTop();
-      });
     }
   }
 };

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

@@ -21,6 +21,18 @@ export default {
     }
   },
 
+  watch: {
+    type(type) {
+      if (this.picker) {
+        this.unmountPicker();
+        this.panel = getPanel(type);
+        this.mountPicker();
+      } else {
+        this.panel = getPanel(type);
+      }
+    }
+  },
+
   created() {
     this.panel = getPanel(this.type);
   }

packages/date-picker/src/picker/time-picker.js

@@ -17,6 +17,20 @@ export default {
     };
   },
 
+  watch: {
+    isRange(isRange) {
+      if (this.picker) {
+        this.unmountPicker();
+        this.type = isRange ? 'timerange' : 'time';
+        this.panel = isRange ? TimeRangePanel : TimePanel;
+        this.mountPicker();
+      } else {
+        this.type = isRange ? 'timerange' : 'time';
+        this.panel = isRange ? TimeRangePanel : TimePanel;
+      }
+    }
+  },
+
   created() {
     this.type = this.isRange ? 'timerange' : 'time';
     this.panel = this.isRange ? TimeRangePanel : TimePanel;