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,58 +412,9 @@ export default {
     showPicker() {
       if (this.$isServer) return;
       if (!this.picker) {
-        this.panel.defaultValue = this.defaultValue || this.currentValue;
-        this.picker = new Vue(this.panel).$mount();
-        this.picker.popperClass = this.popperClass;
-        this.popperElm = this.picker.$el;
-        this.picker.width = this.reference.getBoundingClientRect().width;
-        this.picker.showTime = this.type === 'datetime' || this.type === 'datetimerange';
-        this.picker.selectionMode = this.selectionMode;
-        if (this.format) {
-          this.picker.format = this.format;
-        }
-
-        const updateOptions = () => {
-          const options = this.pickerOptions;
-
-          if (options && options.selectableRange) {
-            let ranges = options.selectableRange;
-            const parser = TYPE_VALUE_RESOLVER_MAP.datetimerange.parser;
-            const format = DEFAULT_FORMATS.timerange;
-
-            ranges = Array.isArray(ranges) ? ranges : [ranges];
-            this.picker.selectableRange = ranges.map(range => parser(range, format, this.rangeSeparator));
-          }
-
-          for (const option in options) {
-            if (options.hasOwnProperty(option) &&
-                // 忽略 time-picker 的该配置项
-                option !== 'selectableRange') {
-              this.picker[option] = options[option];
-            }
-          }
-        };
-        updateOptions();
-        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);
-        this.picker.$on('pick', (date = '', visible = false) => {
-          this.$emit('input', date);
-          this.pickerVisible = this.picker.visible = visible;
-          this.picker.resetView && this.picker.resetView();
-        });
-
-        this.picker.$on('select-range', (start, end) => {
-          this.refInput.setSelectionRange(start, end);
-          this.refInput.focus();
-        });
-      } else {
-        this.pickerVisible = this.picker.visible = true;
+        this.mountPicker();
       }
+      this.pickerVisible = this.picker.visible = true;
 
       this.updatePopper();
 
@@ -476,6 +428,68 @@ export default {
       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;
+      this.picker.width = this.reference.getBoundingClientRect().width;
+      this.picker.showTime = this.type === 'datetime' || this.type === 'datetimerange';
+      this.picker.selectionMode = this.selectionMode;
+      if (this.format) {
+        this.picker.format = this.format;
+      }
+
+      const updateOptions = () => {
+        const options = this.pickerOptions;
+
+        if (options && options.selectableRange) {
+          let ranges = options.selectableRange;
+          const parser = TYPE_VALUE_RESOLVER_MAP.datetimerange.parser;
+          const format = DEFAULT_FORMATS.timerange;
+
+          ranges = Array.isArray(ranges) ? ranges : [ranges];
+          this.picker.selectableRange = ranges.map(range => parser(range, format, this.rangeSeparator));
+        }
+
+        for (const option in options) {
+          if (options.hasOwnProperty(option) &&
+              // 忽略 time-picker 的该配置项
+              option !== 'selectableRange') {
+            this.picker[option] = options[option];
+          }
+        }
+      };
+      updateOptions();
+      this.unwatchPickerOptions = this.$watch('pickerOptions', () => updateOptions(), { deep: true });
+
+      this.$el.appendChild(this.picker.$el);
+      this.picker.resetView && this.picker.resetView();
+
+      this.picker.$on('dodestroy', this.doDestroy);
+      this.picker.$on('pick', (date = '', visible = false) => {
+        this.$emit('input', date);
+        this.pickerVisible = this.picker.visible = visible;
+        this.picker.resetView && this.picker.resetView();
+      });
+
+      this.picker.$on('select-range', (start, end) => {
+        this.refInput.setSelectionRange(start, end);
+        this.refInput.focus();
+      });
+    },
+
+    unmountPicker() {
+      if (this.picker) {
+        this.picker.$destroy();
+        this.picker.$off();
+        if (typeof this.unwatchPickerOptions === 'function') {
+          this.unwatchPickerOptions();
+        }
+        this.picker.$el.parentNode.removeChild(this.picker.$el);
+      }
     }
   }
 };

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;