iov-design 2.15.60 → 2.15.62

package/lib/date-picker.js

@@ -97,20 +97,19 @@ module.exports =
 // This module is a runtime utility for cleaner component module output and will
 // be included in the final webpack user bundle.
 
-function normalizeComponent (
+function normalizeComponent(
   scriptExports,
   render,
   staticRenderFns,
   functionalTemplate,
   injectStyles,
   scopeId,
-  moduleIdentifier, /* server only */
+  moduleIdentifier /* server only */,
   shadowMode /* vue-cli only */
 ) {
   // Vue.extend constructor export interop
-  var options = typeof scriptExports === 'function'
-    ? scriptExports.options
-    : scriptExports
+  var options =
+    typeof scriptExports === 'function' ? scriptExports.options : scriptExports
 
   // render functions
   if (render) {
@@ -130,7 +129,8 @@ function normalizeComponent (
   }
 
   var hook
-  if (moduleIdentifier) { // server build
+  if (moduleIdentifier) {
+    // server build
     hook = function (context) {
       // 2.3 injection
       context =
@@ -155,7 +155,12 @@ function normalizeComponent (
     options._ssrRegister = hook
   } else if (injectStyles) {
     hook = shadowMode
-      ? function () { injectStyles.call(this, this.$root.$options.shadowRoot) }
+      ? function () {
+          injectStyles.call(
+            this,
+            (options.functional ? this.parent : this).$root.$options.shadowRoot
+          )
+        }
       : injectStyles
   }
 
@@ -164,18 +169,16 @@ function normalizeComponent (
       // for template-only hot-reload because in that case the render fn doesn't
       // go through the normalizer
       options._injectStyles = hook
-      // register for functioal component in vue file
+      // register for functional component in vue file
       var originalRender = options.render
-      options.render = function renderWithStyleInjection (h, context) {
+      options.render = function renderWithStyleInjection(h, context) {
         hook.call(context)
         return originalRender(h, context)
       }
     } else {
       // inject component registration as beforeCreate hook
       var existing = options.beforeCreate
-      options.beforeCreate = existing
-        ? [].concat(existing, hook)
-        : [hook]
+      options.beforeCreate = existing ? [].concat(existing, hook) : [hook]
     }
   }
 
@@ -278,95 +281,12 @@ module.exports = require("iov-design/lib/scrollbar");
 
 "use strict";
 
-// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/panel/time.vue?vue&type=template&id=3d939089&
-var render = function() {
-  var _vm = this
-  var _h = _vm.$createElement
-  var _c = _vm._self._c || _h
-  return _c(
-    "transition",
-    {
-      attrs: { name: "el-zoom-in-top" },
-      on: {
-        "after-leave": function($event) {
-          _vm.$emit("dodestroy")
-        }
-      }
-    },
-    [
-      _c(
-        "div",
-        {
-          directives: [
-            {
-              name: "show",
-              rawName: "v-show",
-              value: _vm.visible,
-              expression: "visible"
-            }
-          ],
-          staticClass: "el-time-panel el-popper",
-          class: _vm.popperClass
-        },
-        [
-          _c(
-            "div",
-            {
-              staticClass: "el-time-panel__content",
-              class: { "has-seconds": _vm.showSeconds }
-            },
-            [
-              _c("time-spinner", {
-                ref: "spinner",
-                attrs: {
-                  "arrow-control": _vm.useArrow,
-                  "show-seconds": _vm.showSeconds,
-                  "am-pm-mode": _vm.amPmMode,
-                  date: _vm.date
-                },
-                on: {
-                  change: _vm.handleChange,
-                  "select-range": _vm.setSelectionRange
-                }
-              })
-            ],
-            1
-          ),
-          _c("div", { staticClass: "el-time-panel__footer" }, [
-            _c(
-              "button",
-              {
-                staticClass: "el-time-panel__btn cancel",
-                attrs: { type: "button" },
-                on: { click: _vm.handleCancel }
-              },
-              [_vm._v(_vm._s(_vm.t("el.datepicker.cancel")))]
-            ),
-            _c(
-              "button",
-              {
-                staticClass: "el-time-panel__btn",
-                class: { confirm: !_vm.disabled },
-                attrs: { type: "button" },
-                on: {
-                  click: function($event) {
-                    _vm.handleConfirm()
-                  }
-                }
-              },
-              [_vm._v(_vm._s(_vm.t("el.datepicker.confirm")))]
-            )
-          ])
-        ]
-      )
-    ]
-  )
-}
+// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/panel/time.vue?vue&type=template&id=07486175
+var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition',{attrs:{"name":"el-zoom-in-top"},on:{"after-leave":function($event){_vm.$emit('dodestroy')}}},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.visible),expression:"visible"}],staticClass:"el-time-panel el-popper",class:_vm.popperClass},[_c('div',{staticClass:"el-time-panel__content",class:{ 'has-seconds': _vm.showSeconds }},[_c('time-spinner',{ref:"spinner",attrs:{"arrow-control":_vm.useArrow,"show-seconds":_vm.showSeconds,"am-pm-mode":_vm.amPmMode,"date":_vm.date},on:{"change":_vm.handleChange,"select-range":_vm.setSelectionRange}})],1),_c('div',{staticClass:"el-time-panel__footer"},[_c('button',{staticClass:"el-time-panel__btn cancel",attrs:{"type":"button"},on:{"click":_vm.handleCancel}},[_vm._v(_vm._s(_vm.t('el.datepicker.cancel')))]),_c('button',{staticClass:"el-time-panel__btn",class:{confirm: !_vm.disabled},attrs:{"type":"button"},on:{"click":function($event){_vm.handleConfirm()}}},[_vm._v(_vm._s(_vm.t('el.datepicker.confirm')))])])])])}
 var staticRenderFns = []
 render._withStripped = true
 
-
-// CONCATENATED MODULE: ./packages/date-picker/src/panel/time.vue?vue&type=template&id=3d939089&
+// CONCATENATED MODULE: ./packages/date-picker/src/panel/time.vue?vue&type=template&id=07486175
 
 // EXTERNAL MODULE: external "iov-design/lib/utils/date-util"
 var date_util_ = __webpack_require__(1);
@@ -378,7 +298,7 @@ var locale_default = /*#__PURE__*/__webpack_require__.n(locale_);
 // EXTERNAL MODULE: ./packages/date-picker/src/basic/time-spinner.vue + 4 modules
 var time_spinner = __webpack_require__(35);
 
-// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/panel/time.vue?vue&type=script&lang=js&
+// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/panel/time.vue?vue&type=script&lang=js
 //
 //
 //
@@ -416,7 +336,7 @@ var time_spinner = __webpack_require__(35);
 
 
 
-/* harmony default export */ var timevue_type_script_lang_js_ = ({
+/* harmony default export */ var timevue_type_script_lang_js = ({
   mixins: [locale_default.a],
 
   components: {
@@ -570,8 +490,8 @@ var time_spinner = __webpack_require__(35);
     this.$emit('mounted');
   }
 });
-// CONCATENATED MODULE: ./packages/date-picker/src/panel/time.vue?vue&type=script&lang=js&
- /* harmony default export */ var panel_timevue_type_script_lang_js_ = (timevue_type_script_lang_js_); 
+// CONCATENATED MODULE: ./packages/date-picker/src/panel/time.vue?vue&type=script&lang=js
+ /* harmony default export */ var panel_timevue_type_script_lang_js = (timevue_type_script_lang_js); 
 // EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
 var componentNormalizer = __webpack_require__(0);
 
@@ -584,7 +504,7 @@ var componentNormalizer = __webpack_require__(0);
 /* normalize component */
 
 var component = Object(componentNormalizer["a" /* default */])(
-  panel_timevue_type_script_lang_js_,
+  panel_timevue_type_script_lang_js,
   render,
   staticRenderFns,
   false,
@@ -594,9 +514,6 @@ var component = Object(componentNormalizer["a" /* default */])(
   
 )
 
-/* hot reload */
-if (false) { var api; }
-component.options.__file = "packages/date-picker/src/panel/time.vue"
 /* harmony default export */ var time = __webpack_exports__["a"] = (component.exports);
 
 /***/ }),
@@ -646,209 +563,17 @@ component.options.__file = "packages/date-picker/src/panel/time.vue"
 
 "use strict";
 
-// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/picker.vue?vue&type=template&id=79ae069f&
-var render = function() {
-  var _vm = this
-  var _h = _vm.$createElement
-  var _c = _vm._self._c || _h
-  return !_vm.ranged
-    ? _c(
-        "el-input",
-        _vm._b(
-          {
-            directives: [
-              {
-                name: "clickoutside",
-                rawName: "v-clickoutside",
-                value: _vm.handleClose,
-                expression: "handleClose"
-              }
-            ],
-            ref: "reference",
-            staticClass: "el-date-editor",
-            class: "el-date-editor--" + _vm.type,
-            attrs: {
-              readonly:
-                !_vm.editable ||
-                _vm.readonly ||
-                _vm.type === "dates" ||
-                _vm.type === "week" ||
-                _vm.type === "years" ||
-                _vm.type === "months",
-              disabled: _vm.pickerDisabled,
-              size: _vm.pickerSize,
-              name: _vm.name,
-              placeholder: _vm.placeholder,
-              value: _vm.displayValue,
-              validateEvent: false
-            },
-            on: {
-              focus: _vm.handleFocus,
-              input: function(value) {
-                return (_vm.userInput = value)
-              },
-              change: _vm.handleChange
-            },
-            nativeOn: {
-              keydown: function($event) {
-                return _vm.handleKeydown($event)
-              },
-              mouseenter: function($event) {
-                return _vm.handleMouseEnter($event)
-              },
-              mouseleave: function($event) {
-                _vm.showClose = false
-              }
-            }
-          },
-          "el-input",
-          _vm.firstInputId,
-          false
-        ),
-        [
-          _c("template", { slot: "prefixLabel" }, [_vm._t("prefixLabel")], 2),
-          !_vm.showClose
-            ? _c("i", {
-                staticClass: "el-input__icon",
-                class: _vm.triggerClass,
-                attrs: { slot: "prefix" },
-                on: { click: _vm.handleFocus },
-                slot: "prefix"
-              })
-            : _vm._e(),
-          _vm.haveTrigger
-            ? _c("i", {
-                staticClass: "el-input__icon",
-                class: [
-                  _vm.showClose ? "" + _vm.clearIcon + " el-input__clear" : ""
-                ],
-                attrs: { slot: "suffix" },
-                on: { click: _vm.handleClickIcon },
-                slot: "suffix"
-              })
-            : _vm._e()
-        ],
-        2
-      )
-    : _c(
-        "div",
-        {
-          directives: [
-            {
-              name: "clickoutside",
-              rawName: "v-clickoutside",
-              value: _vm.handleClose,
-              expression: "handleClose"
-            }
-          ],
-          ref: "reference",
-          staticClass: "el-date-editor el-range-editor el-input__inner",
-          class: [
-            "el-date-editor--" + _vm.type,
-            _vm.pickerSize ? "el-range-editor--" + _vm.pickerSize : "",
-            _vm.pickerDisabled ? "is-disabled" : "",
-            _vm.pickerVisible ? "is-active" : ""
-          ],
-          on: {
-            click: _vm.handleRangeClick,
-            mouseenter: _vm.handleMouseEnter,
-            mouseleave: function($event) {
-              _vm.showClose = false
-            },
-            keydown: _vm.handleKeydown
-          }
-        },
-        [
-          _vm.$slots.prefixLabel
-            ? _c(
-                "div",
-                { staticClass: "el-input-group__prefix-label" },
-                [_vm._t("prefixLabel")],
-                2
-              )
-            : _vm._e(),
-          _c(
-            "input",
-            _vm._b(
-              {
-                staticClass: "el-range-input",
-                attrs: {
-                  autocomplete: "off",
-                  placeholder: _vm.startPlaceholder,
-                  disabled: _vm.pickerDisabled,
-                  readonly: !_vm.editable || _vm.readonly,
-                  name: _vm.name && _vm.name[0]
-                },
-                domProps: { value: _vm.displayValue && _vm.displayValue[0] },
-                on: {
-                  input: _vm.handleStartInput,
-                  change: _vm.handleStartChange,
-                  focus: _vm.handleFocus
-                }
-              },
-              "input",
-              _vm.firstInputId,
-              false
-            )
-          ),
-          _vm.$slots["range-separator"]
-            ? _c(
-                "span",
-                { staticClass: "el-range-separator" },
-                [_vm._t("range-separator")],
-                2
-              )
-            : _vm.rangeSeparator
-            ? _c("span", { staticClass: "el-range-separator" }, [
-                _vm._v("\n      " + _vm._s(_vm.rangeSeparator) + "\n    ")
-              ])
-            : _c("span", { staticClass: "el-range-separator" }, [
-                _c("i", { staticClass: "iov-icon-arrow-half-right" })
-              ]),
-          _c(
-            "input",
-            _vm._b(
-              {
-                staticClass: "el-range-input",
-                attrs: {
-                  autocomplete: "off",
-                  placeholder: _vm.endPlaceholder,
-                  disabled: _vm.pickerDisabled,
-                  readonly: !_vm.editable || _vm.readonly,
-                  name: _vm.name && _vm.name[1]
-                },
-                domProps: { value: _vm.displayValue && _vm.displayValue[1] },
-                on: {
-                  input: _vm.handleEndInput,
-                  change: _vm.handleEndChange,
-                  focus: _vm.handleFocus
-                }
-              },
-              "input",
-              _vm.secondInputId,
-              false
-            )
-          ),
-          _c("i", {
-            staticClass: "el-input__icon el-range__close-icon",
-            class: [
-              _vm.showClose ? "" + _vm.clearIcon + " el-input__clear" : ""
-            ],
-            on: { click: _vm.handleClickIcon }
-          }),
-          !_vm.showClose
-            ? _c("i", {
-                class: ["el-input__icon", "el-range__icon", _vm.triggerClass]
-              })
-            : _vm._e()
-        ]
-      )
-}
+// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/picker.vue?vue&type=template&id=3b0d134c
+var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (!_vm.ranged)?_c('el-input',_vm._b({directives:[{name:"clickoutside",rawName:"v-clickoutside",value:(_vm.handleClose),expression:"handleClose"}],ref:"reference",staticClass:"el-date-editor",class:'el-date-editor--' + _vm.type,attrs:{"readonly":!_vm.editable || _vm.readonly || _vm.type === 'dates' || _vm.type === 'week' || _vm.type === 'years' || _vm.type === 'months',"disabled":_vm.pickerDisabled,"size":_vm.pickerSize,"name":_vm.name,"placeholder":_vm.placeholder,"value":_vm.displayValue,"validateEvent":false},on:{"focus":_vm.handleFocus,"input":function (value) { return _vm.userInput = value; },"change":_vm.handleChange},nativeOn:{"keydown":function($event){return _vm.handleKeydown($event)},"mouseenter":function($event){return _vm.handleMouseEnter($event)},"mouseleave":function($event){_vm.showClose = false}}},'el-input',_vm.firstInputId,false),[_c('template',{slot:"prefixLabel"},[_vm._t("prefixLabel")],2),(!_vm.showClose)?_c('i',{staticClass:"el-input__icon",class:_vm.triggerClass,attrs:{"slot":"prefix"},on:{"click":_vm.handleFocus},slot:"prefix"}):_vm._e(),(_vm.haveTrigger)?_c('i',{staticClass:"el-input__icon",class:[_vm.showClose ? '' + _vm.clearIcon + ' el-input__clear' : ''],attrs:{"slot":"suffix"},on:{"click":_vm.handleClickIcon},slot:"suffix"}):_vm._e()],2):_c('div',{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:(_vm.handleClose),expression:"handleClose"}],ref:"reference",staticClass:"el-date-editor el-range-editor el-input__inner",class:[
+    'el-date-editor--' + _vm.type,
+    _vm.pickerSize ? ("el-range-editor--" + _vm.pickerSize) : '',
+    _vm.pickerDisabled ? 'is-disabled' : '',
+    _vm.pickerVisible ? 'is-active' : ''
+  ],on:{"click":_vm.handleRangeClick,"mouseenter":_vm.handleMouseEnter,"mouseleave":function($event){_vm.showClose = false},"keydown":_vm.handleKeydown}},[(_vm.$slots.prefixLabel)?_c('div',{staticClass:"el-input-group__prefix-label"},[_vm._t("prefixLabel")],2):_vm._e(),_c('input',_vm._b({staticClass:"el-range-input",attrs:{"autocomplete":"off","placeholder":_vm.startPlaceholder,"disabled":_vm.pickerDisabled,"readonly":!_vm.editable || _vm.readonly,"name":_vm.name && _vm.name[0]},domProps:{"value":_vm.displayValue && _vm.displayValue[0]},on:{"input":_vm.handleStartInput,"change":_vm.handleStartChange,"focus":_vm.handleFocus}},'input',_vm.firstInputId,false)),(_vm.$slots['range-separator'])?_c('span',{staticClass:"el-range-separator"},[_vm._t("range-separator")],2):(_vm.rangeSeparator)?_c('span',{staticClass:"el-range-separator"},[_vm._v("\n      "+_vm._s(_vm.rangeSeparator)+"\n    ")]):_c('span',{staticClass:"el-range-separator"},[_c('i',{staticClass:"iov-icon-arrow-half-right"})]),_c('input',_vm._b({staticClass:"el-range-input",attrs:{"autocomplete":"off","placeholder":_vm.endPlaceholder,"disabled":_vm.pickerDisabled,"readonly":!_vm.editable || _vm.readonly,"name":_vm.name && _vm.name[1]},domProps:{"value":_vm.displayValue && _vm.displayValue[1]},on:{"input":_vm.handleEndInput,"change":_vm.handleEndChange,"focus":_vm.handleFocus}},'input',_vm.secondInputId,false)),_c('i',{staticClass:"el-input__icon el-range__close-icon",class:[_vm.showClose ? '' + _vm.clearIcon + ' el-input__clear' : ''],on:{"click":_vm.handleClickIcon}}),(!_vm.showClose)?_c('i',{class:['el-input__icon', 'el-range__icon', _vm.triggerClass]}):_vm._e()])}
 var staticRenderFns = []
 render._withStripped = true
 
-
-// CONCATENATED MODULE: ./packages/date-picker/src/picker.vue?vue&type=template&id=79ae069f&
+// CONCATENATED MODULE: ./packages/date-picker/src/picker.vue?vue&type=template&id=3b0d134c
 
 // EXTERNAL MODULE: external "vue"
 var external_vue_ = __webpack_require__(8);
@@ -877,7 +602,7 @@ var input_default = /*#__PURE__*/__webpack_require__.n(input_);
 var merge_ = __webpack_require__(9);
 var merge_default = /*#__PURE__*/__webpack_require__.n(merge_);
 
-// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/picker.vue?vue&type=script&lang=js&
+// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/picker.vue?vue&type=script&lang=js
 //
 //
 //
@@ -1185,11 +910,11 @@ var formatAsFormatAndType = function formatAsFormatAndType(value, customFormat,
   return formatter(value, format);
 };
 
-/*
- * Considers:
- *   1. Date object
- *   2. date string
- *   3. array of 1 or 2
+/*
+ * Considers:
+ *   1. Date object
+ *   2. date string
+ *   3. array of 1 or 2
  */
 var valueEquals = function valueEquals(a, b) {
   // considers Date object and string
@@ -1230,7 +955,7 @@ var validator = function validator(val) {
   return val === null || val === undefined || isString(val) || Array.isArray(val) && val.length === 2 && val.every(isString);
 };
 
-/* harmony default export */ var pickervue_type_script_lang_js_ = ({
+/* harmony default export */ var pickervue_type_script_lang_js = ({
   mixins: [emitter_default.a, NewPopper],
 
   inject: {
@@ -1812,8 +1537,8 @@ var validator = function validator(val) {
     }
   }
 });
-// CONCATENATED MODULE: ./packages/date-picker/src/picker.vue?vue&type=script&lang=js&
- /* harmony default export */ var src_pickervue_type_script_lang_js_ = (pickervue_type_script_lang_js_); 
+// CONCATENATED MODULE: ./packages/date-picker/src/picker.vue?vue&type=script&lang=js
+ /* harmony default export */ var src_pickervue_type_script_lang_js = (pickervue_type_script_lang_js); 
 // EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
 var componentNormalizer = __webpack_require__(0);
 
@@ -1826,7 +1551,7 @@ var componentNormalizer = __webpack_require__(0);
 /* normalize component */
 
 var component = Object(componentNormalizer["a" /* default */])(
-  src_pickervue_type_script_lang_js_,
+  src_pickervue_type_script_lang_js,
   render,
   staticRenderFns,
   false,
@@ -1836,9 +1561,6 @@ var component = Object(componentNormalizer["a" /* default */])(
   
 )
 
-/* hot reload */
-if (false) { var api; }
-component.options.__file = "packages/date-picker/src/picker.vue"
 /* harmony default export */ var picker = __webpack_exports__["a"] = (component.exports);
 
 /***/ }),
@@ -1849,362 +1571,12 @@ component.options.__file = "packages/date-picker/src/picker.vue"
 
 "use strict";
 
-// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/basic/time-spinner.vue?vue&type=template&id=1facadeb&
-var render = function() {
-  var _vm = this
-  var _h = _vm.$createElement
-  var _c = _vm._self._c || _h
-  return _c(
-    "div",
-    {
-      staticClass: "el-time-spinner",
-      class: { "has-seconds": _vm.showSeconds }
-    },
-    [
-      !_vm.arrowControl
-        ? [
-            _c(
-              "el-scrollbar",
-              {
-                ref: "hours",
-                staticClass: "el-time-spinner__wrapper",
-                attrs: {
-                  "wrap-style": "max-height: inherit;",
-                  "view-class": "el-time-spinner__list",
-                  noresize: "",
-                  tag: "ul"
-                },
-                nativeOn: {
-                  mouseenter: function($event) {
-                    _vm.emitSelectRange("hours")
-                  },
-                  mousemove: function($event) {
-                    _vm.adjustCurrentSpinner("hours")
-                  }
-                }
-              },
-              _vm._l(_vm.hoursList, function(disabled, hour) {
-                return _c(
-                  "li",
-                  {
-                    key: hour,
-                    staticClass: "el-time-spinner__item",
-                    class: { active: hour === _vm.hours, disabled: disabled },
-                    on: {
-                      click: function($event) {
-                        _vm.handleClick("hours", {
-                          value: hour,
-                          disabled: disabled
-                        })
-                      }
-                    }
-                  },
-                  [
-                    _vm._v(
-                      _vm._s(
-                        ("0" + (_vm.amPmMode ? hour % 12 || 12 : hour)).slice(
-                          -2
-                        )
-                      ) + _vm._s(_vm.amPm(hour))
-                    )
-                  ]
-                )
-              }),
-              0
-            ),
-            _c(
-              "el-scrollbar",
-              {
-                ref: "minutes",
-                staticClass: "el-time-spinner__wrapper",
-                attrs: {
-                  "wrap-style": "max-height: inherit;",
-                  "view-class": "el-time-spinner__list",
-                  noresize: "",
-                  tag: "ul"
-                },
-                nativeOn: {
-                  mouseenter: function($event) {
-                    _vm.emitSelectRange("minutes")
-                  },
-                  mousemove: function($event) {
-                    _vm.adjustCurrentSpinner("minutes")
-                  }
-                }
-              },
-              _vm._l(_vm.minutesList, function(enabled, key) {
-                return _c(
-                  "li",
-                  {
-                    key: key,
-                    staticClass: "el-time-spinner__item",
-                    class: { active: key === _vm.minutes, disabled: !enabled },
-                    on: {
-                      click: function($event) {
-                        _vm.handleClick("minutes", {
-                          value: key,
-                          disabled: false
-                        })
-                      }
-                    }
-                  },
-                  [_vm._v(_vm._s(("0" + key).slice(-2)))]
-                )
-              }),
-              0
-            ),
-            _c(
-              "el-scrollbar",
-              {
-                directives: [
-                  {
-                    name: "show",
-                    rawName: "v-show",
-                    value: _vm.showSeconds,
-                    expression: "showSeconds"
-                  }
-                ],
-                ref: "seconds",
-                staticClass: "el-time-spinner__wrapper",
-                attrs: {
-                  "wrap-style": "max-height: inherit;",
-                  "view-class": "el-time-spinner__list",
-                  noresize: "",
-                  tag: "ul"
-                },
-                nativeOn: {
-                  mouseenter: function($event) {
-                    _vm.emitSelectRange("seconds")
-                  },
-                  mousemove: function($event) {
-                    _vm.adjustCurrentSpinner("seconds")
-                  }
-                }
-              },
-              _vm._l(60, function(second, key) {
-                return _c(
-                  "li",
-                  {
-                    key: key,
-                    staticClass: "el-time-spinner__item",
-                    class: { active: key === _vm.seconds },
-                    on: {
-                      click: function($event) {
-                        _vm.handleClick("seconds", {
-                          value: key,
-                          disabled: false
-                        })
-                      }
-                    }
-                  },
-                  [_vm._v(_vm._s(("0" + key).slice(-2)))]
-                )
-              }),
-              0
-            )
-          ]
-        : _vm._e(),
-      _vm.arrowControl
-        ? [
-            _c(
-              "div",
-              {
-                staticClass: "el-time-spinner__wrapper is-arrow",
-                on: {
-                  mouseenter: function($event) {
-                    _vm.emitSelectRange("hours")
-                  }
-                }
-              },
-              [
-                _c("i", {
-                  directives: [
-                    {
-                      name: "repeat-click",
-                      rawName: "v-repeat-click",
-                      value: _vm.decrease,
-                      expression: "decrease"
-                    }
-                  ],
-                  staticClass: "el-time-spinner__arrow el-icon-arrow-up"
-                }),
-                _c("i", {
-                  directives: [
-                    {
-                      name: "repeat-click",
-                      rawName: "v-repeat-click",
-                      value: _vm.increase,
-                      expression: "increase"
-                    }
-                  ],
-                  staticClass: "el-time-spinner__arrow el-icon-arrow-down"
-                }),
-                _c(
-                  "ul",
-                  { ref: "hours", staticClass: "el-time-spinner__list" },
-                  _vm._l(_vm.arrowHourList, function(hour, key) {
-                    return _c(
-                      "li",
-                      {
-                        key: key,
-                        staticClass: "el-time-spinner__item",
-                        class: {
-                          active: hour === _vm.hours,
-                          disabled: _vm.hoursList[hour]
-                        }
-                      },
-                      [
-                        _vm._v(
-                          _vm._s(
-                            hour === undefined
-                              ? ""
-                              : (
-                                  "0" + (_vm.amPmMode ? hour % 12 || 12 : hour)
-                                ).slice(-2) + _vm.amPm(hour)
-                          )
-                        )
-                      ]
-                    )
-                  }),
-                  0
-                )
-              ]
-            ),
-            _c(
-              "div",
-              {
-                staticClass: "el-time-spinner__wrapper is-arrow",
-                on: {
-                  mouseenter: function($event) {
-                    _vm.emitSelectRange("minutes")
-                  }
-                }
-              },
-              [
-                _c("i", {
-                  directives: [
-                    {
-                      name: "repeat-click",
-                      rawName: "v-repeat-click",
-                      value: _vm.decrease,
-                      expression: "decrease"
-                    }
-                  ],
-                  staticClass: "el-time-spinner__arrow el-icon-arrow-up"
-                }),
-                _c("i", {
-                  directives: [
-                    {
-                      name: "repeat-click",
-                      rawName: "v-repeat-click",
-                      value: _vm.increase,
-                      expression: "increase"
-                    }
-                  ],
-                  staticClass: "el-time-spinner__arrow el-icon-arrow-down"
-                }),
-                _c(
-                  "ul",
-                  { ref: "minutes", staticClass: "el-time-spinner__list" },
-                  _vm._l(_vm.arrowMinuteList, function(minute, key) {
-                    return _c(
-                      "li",
-                      {
-                        key: key,
-                        staticClass: "el-time-spinner__item",
-                        class: { active: minute === _vm.minutes }
-                      },
-                      [
-                        _vm._v(
-                          "\n          " +
-                            _vm._s(
-                              minute === undefined
-                                ? ""
-                                : ("0" + minute).slice(-2)
-                            ) +
-                            "\n        "
-                        )
-                      ]
-                    )
-                  }),
-                  0
-                )
-              ]
-            ),
-            _vm.showSeconds
-              ? _c(
-                  "div",
-                  {
-                    staticClass: "el-time-spinner__wrapper is-arrow",
-                    on: {
-                      mouseenter: function($event) {
-                        _vm.emitSelectRange("seconds")
-                      }
-                    }
-                  },
-                  [
-                    _c("i", {
-                      directives: [
-                        {
-                          name: "repeat-click",
-                          rawName: "v-repeat-click",
-                          value: _vm.decrease,
-                          expression: "decrease"
-                        }
-                      ],
-                      staticClass: "el-time-spinner__arrow el-icon-arrow-up"
-                    }),
-                    _c("i", {
-                      directives: [
-                        {
-                          name: "repeat-click",
-                          rawName: "v-repeat-click",
-                          value: _vm.increase,
-                          expression: "increase"
-                        }
-                      ],
-                      staticClass: "el-time-spinner__arrow el-icon-arrow-down"
-                    }),
-                    _c(
-                      "ul",
-                      { ref: "seconds", staticClass: "el-time-spinner__list" },
-                      _vm._l(_vm.arrowSecondList, function(second, key) {
-                        return _c(
-                          "li",
-                          {
-                            key: key,
-                            staticClass: "el-time-spinner__item",
-                            class: { active: second === _vm.seconds }
-                          },
-                          [
-                            _vm._v(
-                              "\n          " +
-                                _vm._s(
-                                  second === undefined
-                                    ? ""
-                                    : ("0" + second).slice(-2)
-                                ) +
-                                "\n        "
-                            )
-                          ]
-                        )
-                      }),
-                      0
-                    )
-                  ]
-                )
-              : _vm._e()
-          ]
-        : _vm._e()
-    ],
-    2
-  )
-}
+// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/basic/time-spinner.vue?vue&type=template&id=3301867b
+var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"el-time-spinner",class:{ 'has-seconds': _vm.showSeconds }},[(!_vm.arrowControl)?[_c('el-scrollbar',{ref:"hours",staticClass:"el-time-spinner__wrapper",attrs:{"wrap-style":"max-height: inherit;","view-class":"el-time-spinner__list","noresize":"","tag":"ul"},nativeOn:{"mouseenter":function($event){_vm.emitSelectRange('hours')},"mousemove":function($event){_vm.adjustCurrentSpinner('hours')}}},_vm._l((_vm.hoursList),function(disabled,hour){return _c('li',{key:hour,staticClass:"el-time-spinner__item",class:{ 'active': hour === _vm.hours, 'disabled': disabled },on:{"click":function($event){_vm.handleClick('hours', { value: hour, disabled: disabled })}}},[_vm._v(_vm._s(('0' + (_vm.amPmMode ? (hour % 12 || 12) : hour )).slice(-2))+_vm._s(_vm.amPm(hour)))])}),0),_c('el-scrollbar',{ref:"minutes",staticClass:"el-time-spinner__wrapper",attrs:{"wrap-style":"max-height: inherit;","view-class":"el-time-spinner__list","noresize":"","tag":"ul"},nativeOn:{"mouseenter":function($event){_vm.emitSelectRange('minutes')},"mousemove":function($event){_vm.adjustCurrentSpinner('minutes')}}},_vm._l((_vm.minutesList),function(enabled,key){return _c('li',{key:key,staticClass:"el-time-spinner__item",class:{ 'active': key === _vm.minutes, disabled: !enabled },on:{"click":function($event){_vm.handleClick('minutes', { value: key, disabled: false })}}},[_vm._v(_vm._s(('0' + key).slice(-2)))])}),0),_c('el-scrollbar',{directives:[{name:"show",rawName:"v-show",value:(_vm.showSeconds),expression:"showSeconds"}],ref:"seconds",staticClass:"el-time-spinner__wrapper",attrs:{"wrap-style":"max-height: inherit;","view-class":"el-time-spinner__list","noresize":"","tag":"ul"},nativeOn:{"mouseenter":function($event){_vm.emitSelectRange('seconds')},"mousemove":function($event){_vm.adjustCurrentSpinner('seconds')}}},_vm._l((60),function(second,key){return _c('li',{key:key,staticClass:"el-time-spinner__item",class:{ 'active': key === _vm.seconds },on:{"click":function($event){_vm.handleClick('seconds', { value: key, disabled: false })}}},[_vm._v(_vm._s(('0' + key).slice(-2)))])}),0)]:_vm._e(),(_vm.arrowControl)?[_c('div',{staticClass:"el-time-spinner__wrapper is-arrow",on:{"mouseenter":function($event){_vm.emitSelectRange('hours')}}},[_c('i',{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:(_vm.decrease),expression:"decrease"}],staticClass:"el-time-spinner__arrow el-icon-arrow-up"}),_c('i',{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:(_vm.increase),expression:"increase"}],staticClass:"el-time-spinner__arrow el-icon-arrow-down"}),_c('ul',{ref:"hours",staticClass:"el-time-spinner__list"},_vm._l((_vm.arrowHourList),function(hour,key){return _c('li',{key:key,staticClass:"el-time-spinner__item",class:{ 'active': hour === _vm.hours, 'disabled': _vm.hoursList[hour] }},[_vm._v(_vm._s(hour === undefined ? '' : ('0' + (_vm.amPmMode ? (hour % 12 || 12) : hour )).slice(-2) + _vm.amPm(hour)))])}),0)]),_c('div',{staticClass:"el-time-spinner__wrapper is-arrow",on:{"mouseenter":function($event){_vm.emitSelectRange('minutes')}}},[_c('i',{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:(_vm.decrease),expression:"decrease"}],staticClass:"el-time-spinner__arrow el-icon-arrow-up"}),_c('i',{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:(_vm.increase),expression:"increase"}],staticClass:"el-time-spinner__arrow el-icon-arrow-down"}),_c('ul',{ref:"minutes",staticClass:"el-time-spinner__list"},_vm._l((_vm.arrowMinuteList),function(minute,key){return _c('li',{key:key,staticClass:"el-time-spinner__item",class:{ 'active': minute === _vm.minutes }},[_vm._v("\n          "+_vm._s(minute === undefined ? '' : ('0' + minute).slice(-2))+"\n        ")])}),0)]),(_vm.showSeconds)?_c('div',{staticClass:"el-time-spinner__wrapper is-arrow",on:{"mouseenter":function($event){_vm.emitSelectRange('seconds')}}},[_c('i',{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:(_vm.decrease),expression:"decrease"}],staticClass:"el-time-spinner__arrow el-icon-arrow-up"}),_c('i',{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:(_vm.increase),expression:"increase"}],staticClass:"el-time-spinner__arrow el-icon-arrow-down"}),_c('ul',{ref:"seconds",staticClass:"el-time-spinner__list"},_vm._l((_vm.arrowSecondList),function(second,key){return _c('li',{key:key,staticClass:"el-time-spinner__item",class:{ 'active': second === _vm.seconds }},[_vm._v("\n          "+_vm._s(second === undefined ? '' : ('0' + second).slice(-2))+"\n        ")])}),0)]):_vm._e()]:_vm._e()],2)}
 var staticRenderFns = []
 render._withStripped = true
 
-
-// CONCATENATED MODULE: ./packages/date-picker/src/basic/time-spinner.vue?vue&type=template&id=1facadeb&
+// CONCATENATED MODULE: ./packages/date-picker/src/basic/time-spinner.vue?vue&type=template&id=3301867b
 
 // EXTERNAL MODULE: external "iov-design/lib/utils/date-util"
 var date_util_ = __webpack_require__(1);
@@ -2216,7 +1588,7 @@ var scrollbar_default = /*#__PURE__*/__webpack_require__.n(scrollbar_);
 // EXTERNAL MODULE: ./src/directives/repeat-click.js
 var repeat_click = __webpack_require__(30);
 
-// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/basic/time-spinner.vue?vue&type=script&lang=js&
+// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/basic/time-spinner.vue?vue&type=script&lang=js
 //
 //
 //
@@ -2324,7 +1696,7 @@ var repeat_click = __webpack_require__(30);
 
 
 
-/* harmony default export */ var time_spinnervue_type_script_lang_js_ = ({
+/* harmony default export */ var time_spinnervue_type_script_lang_js = ({
   components: { ElScrollbar: scrollbar_default.a },
 
   directives: {
@@ -2514,8 +1886,8 @@ var repeat_click = __webpack_require__(30);
     }
   }
 });
-// CONCATENATED MODULE: ./packages/date-picker/src/basic/time-spinner.vue?vue&type=script&lang=js&
- /* harmony default export */ var basic_time_spinnervue_type_script_lang_js_ = (time_spinnervue_type_script_lang_js_); 
+// CONCATENATED MODULE: ./packages/date-picker/src/basic/time-spinner.vue?vue&type=script&lang=js
+ /* harmony default export */ var basic_time_spinnervue_type_script_lang_js = (time_spinnervue_type_script_lang_js); 
 // EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
 var componentNormalizer = __webpack_require__(0);
 
@@ -2528,7 +1900,7 @@ var componentNormalizer = __webpack_require__(0);
 /* normalize component */
 
 var component = Object(componentNormalizer["a" /* default */])(
-  basic_time_spinnervue_type_script_lang_js_,
+  basic_time_spinnervue_type_script_lang_js,
   render,
   staticRenderFns,
   false,
@@ -2538,9 +1910,6 @@ var component = Object(componentNormalizer["a" /* default */])(
   
 )
 
-/* hot reload */
-if (false) { var api; }
-component.options.__file = "packages/date-picker/src/basic/time-spinner.vue"
 /* harmony default export */ var time_spinner = __webpack_exports__["a"] = (component.exports);
 
 /***/ }),
@@ -2569,393 +1938,21 @@ component.options.__file = "packages/date-picker/src/basic/time-spinner.vue"
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
+// ESM COMPAT FLAG
 __webpack_require__.r(__webpack_exports__);
 
 // EXTERNAL MODULE: ./packages/date-picker/src/picker.vue + 4 modules
 var picker = __webpack_require__(32);
 
-// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/panel/date.vue?vue&type=template&id=2440d4ea&
-var render = function() {
-  var _vm = this
-  var _h = _vm.$createElement
-  var _c = _vm._self._c || _h
-  return _c(
-    "transition",
-    {
-      attrs: { name: "el-zoom-in-top" },
-      on: { "after-enter": _vm.handleEnter, "after-leave": _vm.handleLeave }
-    },
-    [
-      _c(
-        "div",
-        {
-          directives: [
-            {
-              name: "show",
-              rawName: "v-show",
-              value: _vm.visible,
-              expression: "visible"
-            }
-          ],
-          staticClass: "el-picker-panel el-date-picker el-popper",
-          class: [
-            {
-              "has-sidebar": _vm.$slots.sidebar || _vm.shortcuts,
-              "has-time": _vm.showTime
-            },
-            _vm.popperClass
-          ]
-        },
-        [
-          _c(
-            "div",
-            { staticClass: "el-picker-panel__body-wrapper" },
-            [
-              _vm._t("sidebar"),
-              _vm.shortcuts
-                ? _c(
-                    "div",
-                    { staticClass: "el-picker-panel__sidebar" },
-                    _vm._l(_vm.shortcuts, function(shortcut, key) {
-                      return _c(
-                        "button",
-                        {
-                          key: key,
-                          staticClass: "el-picker-panel__shortcut",
-                          attrs: { type: "button" },
-                          on: {
-                            click: function($event) {
-                              _vm.handleShortcutClick(shortcut)
-                            }
-                          }
-                        },
-                        [_vm._v(_vm._s(shortcut.text))]
-                      )
-                    }),
-                    0
-                  )
-                : _vm._e(),
-              _c("div", { staticClass: "el-picker-panel__body" }, [
-                _vm.showTime
-                  ? _c("div", { staticClass: "el-date-picker__time-header" }, [
-                      _c(
-                        "span",
-                        { staticClass: "el-date-picker__editor-wrap" },
-                        [
-                          _c("el-input", {
-                            attrs: {
-                              placeholder: _vm.t("el.datepicker.selectDate"),
-                              value: _vm.visibleDate,
-                              size: "small"
-                            },
-                            on: {
-                              input: function(val) {
-                                return (_vm.userInputDate = val)
-                              },
-                              change: _vm.handleVisibleDateChange
-                            }
-                          })
-                        ],
-                        1
-                      ),
-                      _c(
-                        "span",
-                        {
-                          directives: [
-                            {
-                              name: "clickoutside",
-                              rawName: "v-clickoutside",
-                              value: _vm.handleTimePickClose,
-                              expression: "handleTimePickClose"
-                            }
-                          ],
-                          staticClass: "el-date-picker__editor-wrap"
-                        },
-                        [
-                          _c("el-input", {
-                            ref: "input",
-                            attrs: {
-                              placeholder: _vm.t("el.datepicker.selectTime"),
-                              value: _vm.visibleTime,
-                              size: "small"
-                            },
-                            on: {
-                              focus: function($event) {
-                                _vm.timePickerVisible = true
-                              },
-                              input: function(val) {
-                                return (_vm.userInputTime = val)
-                              },
-                              change: _vm.handleVisibleTimeChange
-                            }
-                          }),
-                          _c("time-picker", {
-                            ref: "timepicker",
-                            attrs: {
-                              "time-arrow-control": _vm.arrowControl,
-                              visible: _vm.timePickerVisible
-                            },
-                            on: {
-                              pick: _vm.handleTimePick,
-                              mounted: _vm.proxyTimePickerDataProperties
-                            }
-                          })
-                        ],
-                        1
-                      )
-                    ])
-                  : _vm._e(),
-                _c(
-                  "div",
-                  {
-                    directives: [
-                      {
-                        name: "show",
-                        rawName: "v-show",
-                        value: _vm.currentView !== "time",
-                        expression: "currentView !== 'time'"
-                      }
-                    ],
-                    staticClass: "el-date-picker__header",
-                    class: {
-                      "el-date-picker__header--bordered":
-                        _vm.currentView === "year" ||
-                        _vm.currentView === "month"
-                    }
-                  },
-                  [
-                    _c("button", {
-                      staticClass:
-                        "el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left",
-                      attrs: {
-                        type: "button",
-                        "aria-label": _vm.t("el.datepicker.prevYear")
-                      },
-                      on: { click: _vm.prevYear }
-                    }),
-                    _c("button", {
-                      directives: [
-                        {
-                          name: "show",
-                          rawName: "v-show",
-                          value: _vm.currentView === "date",
-                          expression: "currentView === 'date'"
-                        }
-                      ],
-                      staticClass:
-                        "el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-arrow-left",
-                      attrs: {
-                        type: "button",
-                        "aria-label": _vm.t("el.datepicker.prevMonth")
-                      },
-                      on: { click: _vm.prevMonth }
-                    }),
-                    _c(
-                      "span",
-                      {
-                        staticClass: "el-date-picker__header-label",
-                        attrs: { role: "button" },
-                        on: { click: _vm.showYearPicker }
-                      },
-                      [_vm._v(_vm._s(_vm.yearLabel))]
-                    ),
-                    _c(
-                      "span",
-                      {
-                        directives: [
-                          {
-                            name: "show",
-                            rawName: "v-show",
-                            value: _vm.currentView === "date",
-                            expression: "currentView === 'date'"
-                          }
-                        ],
-                        staticClass: "el-date-picker__header-label",
-                        class: { active: _vm.currentView === "month" },
-                        attrs: { role: "button" },
-                        on: { click: _vm.showMonthPicker }
-                      },
-                      [
-                        _vm._v(
-                          _vm._s(_vm.t("el.datepicker.month" + (_vm.month + 1)))
-                        )
-                      ]
-                    ),
-                    _c("button", {
-                      staticClass:
-                        "el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right",
-                      attrs: {
-                        type: "button",
-                        "aria-label": _vm.t("el.datepicker.nextYear")
-                      },
-                      on: { click: _vm.nextYear }
-                    }),
-                    _c("button", {
-                      directives: [
-                        {
-                          name: "show",
-                          rawName: "v-show",
-                          value: _vm.currentView === "date",
-                          expression: "currentView === 'date'"
-                        }
-                      ],
-                      staticClass:
-                        "el-picker-panel__icon-btn el-date-picker__next-btn el-icon-arrow-right",
-                      attrs: {
-                        type: "button",
-                        "aria-label": _vm.t("el.datepicker.nextMonth")
-                      },
-                      on: { click: _vm.nextMonth }
-                    })
-                  ]
-                ),
-                _c(
-                  "div",
-                  { staticClass: "el-picker-panel__content" },
-                  [
-                    _c("date-table", {
-                      directives: [
-                        {
-                          name: "show",
-                          rawName: "v-show",
-                          value: _vm.currentView === "date",
-                          expression: "currentView === 'date'"
-                        }
-                      ],
-                      attrs: {
-                        "selection-mode": _vm.selectionMode,
-                        "first-day-of-week": _vm.firstDayOfWeek,
-                        value: _vm.value,
-                        "default-value": _vm.defaultValue
-                          ? new Date(_vm.defaultValue)
-                          : null,
-                        date: _vm.date,
-                        "cell-class-name": _vm.cellClassName,
-                        "disabled-date": _vm.disabledDate
-                      },
-                      on: { pick: _vm.handleDatePick }
-                    }),
-                    _c("year-table", {
-                      directives: [
-                        {
-                          name: "show",
-                          rawName: "v-show",
-                          value: _vm.currentView === "year",
-                          expression: "currentView === 'year'"
-                        }
-                      ],
-                      attrs: {
-                        "selection-mode": _vm.selectionMode,
-                        value: _vm.value,
-                        "default-value": _vm.defaultValue
-                          ? new Date(_vm.defaultValue)
-                          : null,
-                        date: _vm.date,
-                        "disabled-date": _vm.disabledDate
-                      },
-                      on: { pick: _vm.handleYearPick }
-                    }),
-                    _c("month-table", {
-                      directives: [
-                        {
-                          name: "show",
-                          rawName: "v-show",
-                          value: _vm.currentView === "month",
-                          expression: "currentView === 'month'"
-                        }
-                      ],
-                      attrs: {
-                        "selection-mode": _vm.selectionMode,
-                        value: _vm.value,
-                        "default-value": _vm.defaultValue
-                          ? new Date(_vm.defaultValue)
-                          : null,
-                        date: _vm.date,
-                        "disabled-date": _vm.disabledDate
-                      },
-                      on: { pick: _vm.handleMonthPick }
-                    })
-                  ],
-                  1
-                )
-              ])
-            ],
-            2
-          ),
-          _c(
-            "div",
-            {
-              directives: [
-                {
-                  name: "show",
-                  rawName: "v-show",
-                  value:
-                    _vm.footerVisible &&
-                    (_vm.currentView === "date" ||
-                      _vm.currentView === "month" ||
-                      _vm.currentView === "year"),
-                  expression:
-                    "footerVisible && (currentView === 'date' || currentView === 'month' || currentView === 'year')"
-                }
-              ],
-              staticClass: "el-picker-panel__footer"
-            },
-            [
-              _c(
-                "el-button",
-                {
-                  directives: [
-                    {
-                      name: "show",
-                      rawName: "v-show",
-                      value:
-                        _vm.selectionMode !== "dates" &&
-                        _vm.selectionMode !== "months" &&
-                        _vm.selectionMode !== "years",
-                      expression:
-                        "selectionMode !== 'dates' && selectionMode !== 'months' && selectionMode !== 'years'"
-                    }
-                  ],
-                  staticClass: "el-picker-panel__link-btn",
-                  attrs: { size: "mini", type: "text" },
-                  on: { click: _vm.changeToNow }
-                },
-                [
-                  _vm._v(
-                    "\n        " +
-                      _vm._s(_vm.t("el.datepicker.now")) +
-                      "\n      "
-                  )
-                ]
-              ),
-              _c(
-                "el-button",
-                {
-                  staticClass: "el-picker-panel__link-btn",
-                  attrs: { plain: "", size: "mini" },
-                  on: { click: _vm.confirm }
-                },
-                [
-                  _vm._v(
-                    "\n        " +
-                      _vm._s(_vm.t("el.datepicker.confirm")) +
-                      "\n      "
-                  )
-                ]
-              )
-            ],
-            1
-          )
-        ]
-      )
-    ]
-  )
-}
+// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/panel/date.vue?vue&type=template&id=792ee4c2
+var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition',{attrs:{"name":"el-zoom-in-top"},on:{"after-enter":_vm.handleEnter,"after-leave":_vm.handleLeave}},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.visible),expression:"visible"}],staticClass:"el-picker-panel el-date-picker el-popper",class:[{
+      'has-sidebar': _vm.$slots.sidebar || _vm.shortcuts,
+      'has-time': _vm.showTime
+    }, _vm.popperClass]},[_c('div',{staticClass:"el-picker-panel__body-wrapper"},[_vm._t("sidebar"),(_vm.shortcuts)?_c('div',{staticClass:"el-picker-panel__sidebar"},_vm._l((_vm.shortcuts),function(shortcut,key){return _c('button',{key:key,staticClass:"el-picker-panel__shortcut",attrs:{"type":"button"},on:{"click":function($event){_vm.handleShortcutClick(shortcut)}}},[_vm._v(_vm._s(shortcut.text))])}),0):_vm._e(),_c('div',{staticClass:"el-picker-panel__body"},[(_vm.showTime)?_c('div',{staticClass:"el-date-picker__time-header"},[_c('span',{staticClass:"el-date-picker__editor-wrap"},[_c('el-input',{attrs:{"placeholder":_vm.t('el.datepicker.selectDate'),"value":_vm.visibleDate,"size":"small"},on:{"input":function (val) { return _vm.userInputDate = val; },"change":_vm.handleVisibleDateChange}})],1),_c('span',{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:(_vm.handleTimePickClose),expression:"handleTimePickClose"}],staticClass:"el-date-picker__editor-wrap"},[_c('el-input',{ref:"input",attrs:{"placeholder":_vm.t('el.datepicker.selectTime'),"value":_vm.visibleTime,"size":"small"},on:{"focus":function($event){_vm.timePickerVisible = true},"input":function (val) { return _vm.userInputTime = val; },"change":_vm.handleVisibleTimeChange}}),_c('time-picker',{ref:"timepicker",attrs:{"time-arrow-control":_vm.arrowControl,"visible":_vm.timePickerVisible},on:{"pick":_vm.handleTimePick,"mounted":_vm.proxyTimePickerDataProperties}})],1)]):_vm._e(),_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.currentView !== 'time'),expression:"currentView !== 'time'"}],staticClass:"el-date-picker__header",class:{ 'el-date-picker__header--bordered': _vm.currentView === 'year' || _vm.currentView === 'month' }},[_c('button',{staticClass:"el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left",attrs:{"type":"button","aria-label":_vm.t("el.datepicker.prevYear")},on:{"click":_vm.prevYear}}),_c('button',{directives:[{name:"show",rawName:"v-show",value:(_vm.currentView === 'date'),expression:"currentView === 'date'"}],staticClass:"el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-arrow-left",attrs:{"type":"button","aria-label":_vm.t("el.datepicker.prevMonth")},on:{"click":_vm.prevMonth}}),_c('span',{staticClass:"el-date-picker__header-label",attrs:{"role":"button"},on:{"click":_vm.showYearPicker}},[_vm._v(_vm._s(_vm.yearLabel))]),_c('span',{directives:[{name:"show",rawName:"v-show",value:(_vm.currentView === 'date'),expression:"currentView === 'date'"}],staticClass:"el-date-picker__header-label",class:{ active: _vm.currentView === 'month' },attrs:{"role":"button"},on:{"click":_vm.showMonthPicker}},[_vm._v(_vm._s(_vm.t(("el.datepicker.month" + (_vm.month + 1)))))]),_c('button',{staticClass:"el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right",attrs:{"type":"button","aria-label":_vm.t("el.datepicker.nextYear")},on:{"click":_vm.nextYear}}),_c('button',{directives:[{name:"show",rawName:"v-show",value:(_vm.currentView === 'date'),expression:"currentView === 'date'"}],staticClass:"el-picker-panel__icon-btn el-date-picker__next-btn el-icon-arrow-right",attrs:{"type":"button","aria-label":_vm.t("el.datepicker.nextMonth")},on:{"click":_vm.nextMonth}})]),_c('div',{staticClass:"el-picker-panel__content"},[_c('date-table',{directives:[{name:"show",rawName:"v-show",value:(_vm.currentView === 'date'),expression:"currentView === 'date'"}],attrs:{"selection-mode":_vm.selectionMode,"first-day-of-week":_vm.firstDayOfWeek,"value":_vm.value,"default-value":_vm.defaultValue ? new Date(_vm.defaultValue) : null,"date":_vm.date,"cell-class-name":_vm.cellClassName,"disabled-date":_vm.disabledDate},on:{"pick":_vm.handleDatePick}}),_c('year-table',{directives:[{name:"show",rawName:"v-show",value:(_vm.currentView === 'year'),expression:"currentView === 'year'"}],attrs:{"selection-mode":_vm.selectionMode,"value":_vm.value,"default-value":_vm.defaultValue ? new Date(_vm.defaultValue) : null,"date":_vm.date,"disabled-date":_vm.disabledDate},on:{"pick":_vm.handleYearPick}}),_c('month-table',{directives:[{name:"show",rawName:"v-show",value:(_vm.currentView === 'month'),expression:"currentView === 'month'"}],attrs:{"selection-mode":_vm.selectionMode,"value":_vm.value,"default-value":_vm.defaultValue ? new Date(_vm.defaultValue) : null,"date":_vm.date,"disabled-date":_vm.disabledDate},on:{"pick":_vm.handleMonthPick}})],1)])],2),_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.footerVisible && (_vm.currentView === 'date' || _vm.currentView === 'month' || _vm.currentView === 'year')),expression:"footerVisible && (currentView === 'date' || currentView === 'month' || currentView === 'year')"}],staticClass:"el-picker-panel__footer"},[_c('el-button',{directives:[{name:"show",rawName:"v-show",value:(_vm.selectionMode !== 'dates' && _vm.selectionMode !== 'months' && _vm.selectionMode !== 'years'),expression:"selectionMode !== 'dates' && selectionMode !== 'months' && selectionMode !== 'years'"}],staticClass:"el-picker-panel__link-btn",attrs:{"size":"mini","type":"text"},on:{"click":_vm.changeToNow}},[_vm._v("\n        "+_vm._s(_vm.t('el.datepicker.now'))+"\n      ")]),_c('el-button',{staticClass:"el-picker-panel__link-btn",attrs:{"plain":"","size":"mini"},on:{"click":_vm.confirm}},[_vm._v("\n        "+_vm._s(_vm.t('el.datepicker.confirm'))+"\n      ")])],1)])])}
 var staticRenderFns = []
 render._withStripped = true
 
-
-// CONCATENATED MODULE: ./packages/date-picker/src/panel/date.vue?vue&type=template&id=2440d4ea&
+// CONCATENATED MODULE: ./packages/date-picker/src/panel/date.vue?vue&type=template&id=792ee4c2
 
 // EXTERNAL MODULE: external "iov-design/lib/utils/date-util"
 var date_util_ = __webpack_require__(1);
@@ -2979,149 +1976,12 @@ var button_default = /*#__PURE__*/__webpack_require__.n(button_);
 // EXTERNAL MODULE: ./packages/date-picker/src/panel/time.vue + 4 modules
 var panel_time = __webpack_require__(27);
 
-// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/basic/year-table.vue?vue&type=template&id=c86ab5e0&
-var year_tablevue_type_template_id_c86ab5e0_render = function() {
-  var _vm = this
-  var _h = _vm.$createElement
-  var _c = _vm._self._c || _h
-  return _c(
-    "table",
-    { staticClass: "el-year-table", on: { click: _vm.handleYearTableClick } },
-    [
-      _c("tbody", [
-        _c("tr", [
-          _c(
-            "td",
-            {
-              staticClass: "available",
-              class: _vm.getCellStyle(_vm.startYear + 0)
-            },
-            [_c("a", { staticClass: "cell" }, [_vm._v(_vm._s(_vm.startYear))])]
-          ),
-          _c(
-            "td",
-            {
-              staticClass: "available",
-              class: _vm.getCellStyle(_vm.startYear + 1)
-            },
-            [
-              _c("a", { staticClass: "cell" }, [
-                _vm._v(_vm._s(_vm.startYear + 1))
-              ])
-            ]
-          ),
-          _c(
-            "td",
-            {
-              staticClass: "available",
-              class: _vm.getCellStyle(_vm.startYear + 2)
-            },
-            [
-              _c("a", { staticClass: "cell" }, [
-                _vm._v(_vm._s(_vm.startYear + 2))
-              ])
-            ]
-          ),
-          _c(
-            "td",
-            {
-              staticClass: "available",
-              class: _vm.getCellStyle(_vm.startYear + 3)
-            },
-            [
-              _c("a", { staticClass: "cell" }, [
-                _vm._v(_vm._s(_vm.startYear + 3))
-              ])
-            ]
-          )
-        ]),
-        _c("tr", [
-          _c(
-            "td",
-            {
-              staticClass: "available",
-              class: _vm.getCellStyle(_vm.startYear + 4)
-            },
-            [
-              _c("a", { staticClass: "cell" }, [
-                _vm._v(_vm._s(_vm.startYear + 4))
-              ])
-            ]
-          ),
-          _c(
-            "td",
-            {
-              staticClass: "available",
-              class: _vm.getCellStyle(_vm.startYear + 5)
-            },
-            [
-              _c("a", { staticClass: "cell" }, [
-                _vm._v(_vm._s(_vm.startYear + 5))
-              ])
-            ]
-          ),
-          _c(
-            "td",
-            {
-              staticClass: "available",
-              class: _vm.getCellStyle(_vm.startYear + 6)
-            },
-            [
-              _c("a", { staticClass: "cell" }, [
-                _vm._v(_vm._s(_vm.startYear + 6))
-              ])
-            ]
-          ),
-          _c(
-            "td",
-            {
-              staticClass: "available",
-              class: _vm.getCellStyle(_vm.startYear + 7)
-            },
-            [
-              _c("a", { staticClass: "cell" }, [
-                _vm._v(_vm._s(_vm.startYear + 7))
-              ])
-            ]
-          )
-        ]),
-        _c("tr", [
-          _c(
-            "td",
-            {
-              staticClass: "available",
-              class: _vm.getCellStyle(_vm.startYear + 8)
-            },
-            [
-              _c("a", { staticClass: "cell" }, [
-                _vm._v(_vm._s(_vm.startYear + 8))
-              ])
-            ]
-          ),
-          _c(
-            "td",
-            {
-              staticClass: "available",
-              class: _vm.getCellStyle(_vm.startYear + 9)
-            },
-            [
-              _c("a", { staticClass: "cell" }, [
-                _vm._v(_vm._s(_vm.startYear + 9))
-              ])
-            ]
-          ),
-          _c("td"),
-          _c("td")
-        ])
-      ])
-    ]
-  )
-}
-var year_tablevue_type_template_id_c86ab5e0_staticRenderFns = []
-year_tablevue_type_template_id_c86ab5e0_render._withStripped = true
-
+// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/basic/year-table.vue?vue&type=template&id=0150309e
+var year_tablevue_type_template_id_0150309e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('table',{staticClass:"el-year-table",on:{"click":_vm.handleYearTableClick}},[_c('tbody',[_c('tr',[_c('td',{staticClass:"available",class:_vm.getCellStyle(_vm.startYear + 0)},[_c('a',{staticClass:"cell"},[_vm._v(_vm._s(_vm.startYear))])]),_c('td',{staticClass:"available",class:_vm.getCellStyle(_vm.startYear + 1)},[_c('a',{staticClass:"cell"},[_vm._v(_vm._s(_vm.startYear + 1))])]),_c('td',{staticClass:"available",class:_vm.getCellStyle(_vm.startYear + 2)},[_c('a',{staticClass:"cell"},[_vm._v(_vm._s(_vm.startYear + 2))])]),_c('td',{staticClass:"available",class:_vm.getCellStyle(_vm.startYear + 3)},[_c('a',{staticClass:"cell"},[_vm._v(_vm._s(_vm.startYear + 3))])])]),_c('tr',[_c('td',{staticClass:"available",class:_vm.getCellStyle(_vm.startYear + 4)},[_c('a',{staticClass:"cell"},[_vm._v(_vm._s(_vm.startYear + 4))])]),_c('td',{staticClass:"available",class:_vm.getCellStyle(_vm.startYear + 5)},[_c('a',{staticClass:"cell"},[_vm._v(_vm._s(_vm.startYear + 5))])]),_c('td',{staticClass:"available",class:_vm.getCellStyle(_vm.startYear + 6)},[_c('a',{staticClass:"cell"},[_vm._v(_vm._s(_vm.startYear + 6))])]),_c('td',{staticClass:"available",class:_vm.getCellStyle(_vm.startYear + 7)},[_c('a',{staticClass:"cell"},[_vm._v(_vm._s(_vm.startYear + 7))])])]),_c('tr',[_c('td',{staticClass:"available",class:_vm.getCellStyle(_vm.startYear + 8)},[_c('a',{staticClass:"cell"},[_vm._v(_vm._s(_vm.startYear + 8))])]),_c('td',{staticClass:"available",class:_vm.getCellStyle(_vm.startYear + 9)},[_c('a',{staticClass:"cell"},[_vm._v(_vm._s(_vm.startYear + 9))])]),_c('td'),_c('td')])])])}
+var year_tablevue_type_template_id_0150309e_staticRenderFns = []
+year_tablevue_type_template_id_0150309e_render._withStripped = true
 
-// CONCATENATED MODULE: ./packages/date-picker/src/basic/year-table.vue?vue&type=template&id=c86ab5e0&
+// CONCATENATED MODULE: ./packages/date-picker/src/basic/year-table.vue?vue&type=template&id=0150309e
 
 // EXTERNAL MODULE: external "iov-design/lib/utils/dom"
 var dom_ = __webpack_require__(2);
@@ -3129,7 +1989,7 @@ var dom_ = __webpack_require__(2);
 // EXTERNAL MODULE: external "iov-design/lib/utils/util"
 var util_ = __webpack_require__(3);
 
-// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/basic/year-table.vue?vue&type=script&lang=js&
+// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/basic/year-table.vue?vue&type=script&lang=js
 //
 //
 //
@@ -3188,7 +2048,7 @@ var year_tablevue_type_script_lang_js_datesInYear = function datesInYear(year) {
   });
 };
 
-/* harmony default export */ var year_tablevue_type_script_lang_js_ = ({
+/* harmony default export */ var year_tablevue_type_script_lang_js = ({
   props: {
     disabledDate: {},
     value: {},
@@ -3241,8 +2101,8 @@ var year_tablevue_type_script_lang_js_datesInYear = function datesInYear(year) {
     }
   }
 });
-// CONCATENATED MODULE: ./packages/date-picker/src/basic/year-table.vue?vue&type=script&lang=js&
- /* harmony default export */ var basic_year_tablevue_type_script_lang_js_ = (year_tablevue_type_script_lang_js_); 
+// CONCATENATED MODULE: ./packages/date-picker/src/basic/year-table.vue?vue&type=script&lang=js
+ /* harmony default export */ var basic_year_tablevue_type_script_lang_js = (year_tablevue_type_script_lang_js); 
 // EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
 var componentNormalizer = __webpack_require__(0);
 
@@ -3255,9 +2115,9 @@ var componentNormalizer = __webpack_require__(0);
 /* normalize component */
 
 var component = Object(componentNormalizer["a" /* default */])(
-  basic_year_tablevue_type_script_lang_js_,
-  year_tablevue_type_template_id_c86ab5e0_render,
-  year_tablevue_type_template_id_c86ab5e0_staticRenderFns,
+  basic_year_tablevue_type_script_lang_js,
+  year_tablevue_type_template_id_0150309e_render,
+  year_tablevue_type_template_id_0150309e_staticRenderFns,
   false,
   null,
   null,
@@ -3265,56 +2125,15 @@ var component = Object(componentNormalizer["a" /* default */])(
   
 )
 
-/* hot reload */
-if (false) { var api; }
-component.options.__file = "packages/date-picker/src/basic/year-table.vue"
 /* harmony default export */ var year_table = (component.exports);
-// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/basic/month-table.vue?vue&type=template&id=654d4f42&
-var month_tablevue_type_template_id_654d4f42_render = function() {
-  var _vm = this
-  var _h = _vm.$createElement
-  var _c = _vm._self._c || _h
-  return _c(
-    "table",
-    {
-      staticClass: "el-month-table",
-      on: { click: _vm.handleMonthTableClick, mousemove: _vm.handleMouseMove }
-    },
-    [
-      _c(
-        "tbody",
-        _vm._l(_vm.rows, function(row, key) {
-          return _c(
-            "tr",
-            { key: key },
-            _vm._l(row, function(cell, key) {
-              return _c("td", { key: key, class: _vm.getCellStyle(cell) }, [
-                _c("div", [
-                  _c("a", { staticClass: "cell" }, [
-                    _vm._v(
-                      _vm._s(
-                        _vm.t("el.datepicker.months." + _vm.months[cell.text])
-                      )
-                    )
-                  ])
-                ])
-              ])
-            }),
-            0
-          )
-        }),
-        0
-      )
-    ]
-  )
-}
-var month_tablevue_type_template_id_654d4f42_staticRenderFns = []
-month_tablevue_type_template_id_654d4f42_render._withStripped = true
-
+// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/basic/month-table.vue?vue&type=template&id=21446744
+var month_tablevue_type_template_id_21446744_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('table',{staticClass:"el-month-table",on:{"click":_vm.handleMonthTableClick,"mousemove":_vm.handleMouseMove}},[_c('tbody',_vm._l((_vm.rows),function(row,key){return _c('tr',{key:key},_vm._l((row),function(cell,key){return _c('td',{key:key,class:_vm.getCellStyle(cell)},[_c('div',[_c('a',{staticClass:"cell"},[_vm._v(_vm._s(_vm.t('el.datepicker.months.' + _vm.months[cell.text])))])])])}),0)}),0)])}
+var month_tablevue_type_template_id_21446744_staticRenderFns = []
+month_tablevue_type_template_id_21446744_render._withStripped = true
 
-// CONCATENATED MODULE: ./packages/date-picker/src/basic/month-table.vue?vue&type=template&id=654d4f42&
+// CONCATENATED MODULE: ./packages/date-picker/src/basic/month-table.vue?vue&type=template&id=21446744
 
-// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/basic/month-table.vue?vue&type=script&lang=js&
+// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/basic/month-table.vue?vue&type=script&lang=js
 //
 //
 //
@@ -3364,7 +2183,7 @@ var month_tablevue_type_script_lang_js_removeFromArray = function removeFromArra
   var idx = typeof pred === 'function' ? Object(util_["arrayFindIndex"])(arr, pred) : arr.indexOf(pred);
   return idx >= 0 ? [].concat(arr.slice(0, idx), arr.slice(idx + 1)) : arr;
 };
-/* harmony default export */ var month_tablevue_type_script_lang_js_ = ({
+/* harmony default export */ var month_tablevue_type_script_lang_js = ({
   props: {
     disabledDate: {},
     value: {},
@@ -3602,8 +2421,8 @@ var month_tablevue_type_script_lang_js_removeFromArray = function removeFromArra
     }
   }
 });
-// CONCATENATED MODULE: ./packages/date-picker/src/basic/month-table.vue?vue&type=script&lang=js&
- /* harmony default export */ var basic_month_tablevue_type_script_lang_js_ = (month_tablevue_type_script_lang_js_); 
+// CONCATENATED MODULE: ./packages/date-picker/src/basic/month-table.vue?vue&type=script&lang=js
+ /* harmony default export */ var basic_month_tablevue_type_script_lang_js = (month_tablevue_type_script_lang_js); 
 // CONCATENATED MODULE: ./packages/date-picker/src/basic/month-table.vue
 
 
@@ -3613,9 +2432,9 @@ var month_tablevue_type_script_lang_js_removeFromArray = function removeFromArra
 /* normalize component */
 
 var month_table_component = Object(componentNormalizer["a" /* default */])(
-  basic_month_tablevue_type_script_lang_js_,
-  month_tablevue_type_template_id_654d4f42_render,
-  month_tablevue_type_template_id_654d4f42_staticRenderFns,
+  basic_month_tablevue_type_script_lang_js,
+  month_tablevue_type_template_id_21446744_render,
+  month_tablevue_type_template_id_21446744_staticRenderFns,
   false,
   null,
   null,
@@ -3623,74 +2442,15 @@ var month_table_component = Object(componentNormalizer["a" /* default */])(
   
 )
 
-/* hot reload */
-if (false) { var month_table_api; }
-month_table_component.options.__file = "packages/date-picker/src/basic/month-table.vue"
 /* harmony default export */ var month_table = (month_table_component.exports);
-// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/basic/date-table.vue?vue&type=template&id=5d1f3341&
-var date_tablevue_type_template_id_5d1f3341_render = function() {
-  var _vm = this
-  var _h = _vm.$createElement
-  var _c = _vm._self._c || _h
-  return _c(
-    "table",
-    {
-      staticClass: "el-date-table",
-      class: { "is-week-mode": _vm.selectionMode === "week" },
-      attrs: { cellspacing: "0", cellpadding: "0" },
-      on: { click: _vm.handleClick, mousemove: _vm.handleMouseMove }
-    },
-    [
-      _c(
-        "tbody",
-        [
-          _c(
-            "tr",
-            [
-              _vm.showWeekNumber
-                ? _c("th", [_vm._v(_vm._s(_vm.t("el.datepicker.week")))])
-                : _vm._e(),
-              _vm._l(_vm.WEEKS, function(week, key) {
-                return _c("th", { key: key }, [
-                  _vm._v(_vm._s(_vm.t("el.datepicker.weeks." + week)))
-                ])
-              })
-            ],
-            2
-          ),
-          _vm._l(_vm.rows, function(row, key) {
-            return _c(
-              "tr",
-              {
-                key: key,
-                staticClass: "el-date-table__row",
-                class: { current: _vm.isWeekActive(row[1]) }
-              },
-              _vm._l(row, function(cell, key) {
-                return _c("td", { key: key, class: _vm.getCellClasses(cell) }, [
-                  _c("div", [
-                    _c("span", [
-                      _vm._v("\n          " + _vm._s(cell.text) + "\n        ")
-                    ])
-                  ])
-                ])
-              }),
-              0
-            )
-          })
-        ],
-        2
-      )
-    ]
-  )
-}
-var date_tablevue_type_template_id_5d1f3341_staticRenderFns = []
-date_tablevue_type_template_id_5d1f3341_render._withStripped = true
-
+// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/basic/date-table.vue?vue&type=template&id=5d979b3f
+var date_tablevue_type_template_id_5d979b3f_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('table',{staticClass:"el-date-table",class:{ 'is-week-mode': _vm.selectionMode === 'week' },attrs:{"cellspacing":"0","cellpadding":"0"},on:{"click":_vm.handleClick,"mousemove":_vm.handleMouseMove}},[_c('tbody',[_c('tr',[(_vm.showWeekNumber)?_c('th',[_vm._v(_vm._s(_vm.t('el.datepicker.week')))]):_vm._e(),_vm._l((_vm.WEEKS),function(week,key){return _c('th',{key:key},[_vm._v(_vm._s(_vm.t('el.datepicker.weeks.' + week)))])})],2),_vm._l((_vm.rows),function(row,key){return _c('tr',{key:key,staticClass:"el-date-table__row",class:{ current: _vm.isWeekActive(row[1]) }},_vm._l((row),function(cell,key){return _c('td',{key:key,class:_vm.getCellClasses(cell)},[_c('div',[_c('span',[_vm._v("\n          "+_vm._s(cell.text)+"\n        ")])])])}),0)})],2)])}
+var date_tablevue_type_template_id_5d979b3f_staticRenderFns = []
+date_tablevue_type_template_id_5d979b3f_render._withStripped = true
 
-// CONCATENATED MODULE: ./packages/date-picker/src/basic/date-table.vue?vue&type=template&id=5d1f3341&
+// CONCATENATED MODULE: ./packages/date-picker/src/basic/date-table.vue?vue&type=template&id=5d979b3f
 
-// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/basic/date-table.vue?vue&type=script&lang=js&
+// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/basic/date-table.vue?vue&type=script&lang=js
 //
 //
 //
@@ -3748,7 +2508,7 @@ var date_tablevue_type_script_lang_js_removeFromArray = function removeFromArray
   return idx >= 0 ? [].concat(arr.slice(0, idx), arr.slice(idx + 1)) : arr;
 };
 
-/* harmony default export */ var date_tablevue_type_script_lang_js_ = ({
+/* harmony default export */ var date_tablevue_type_script_lang_js = ({
   mixins: [locale_default.a],
 
   props: {
@@ -4134,8 +2894,8 @@ var date_tablevue_type_script_lang_js_removeFromArray = function removeFromArray
     }
   }
 });
-// CONCATENATED MODULE: ./packages/date-picker/src/basic/date-table.vue?vue&type=script&lang=js&
- /* harmony default export */ var basic_date_tablevue_type_script_lang_js_ = (date_tablevue_type_script_lang_js_); 
+// CONCATENATED MODULE: ./packages/date-picker/src/basic/date-table.vue?vue&type=script&lang=js
+ /* harmony default export */ var basic_date_tablevue_type_script_lang_js = (date_tablevue_type_script_lang_js); 
 // CONCATENATED MODULE: ./packages/date-picker/src/basic/date-table.vue
 
 
@@ -4145,9 +2905,9 @@ var date_tablevue_type_script_lang_js_removeFromArray = function removeFromArray
 /* normalize component */
 
 var date_table_component = Object(componentNormalizer["a" /* default */])(
-  basic_date_tablevue_type_script_lang_js_,
-  date_tablevue_type_template_id_5d1f3341_render,
-  date_tablevue_type_template_id_5d1f3341_staticRenderFns,
+  basic_date_tablevue_type_script_lang_js,
+  date_tablevue_type_template_id_5d979b3f_render,
+  date_tablevue_type_template_id_5d979b3f_staticRenderFns,
   false,
   null,
   null,
@@ -4155,11 +2915,8 @@ var date_table_component = Object(componentNormalizer["a" /* default */])(
   
 )
 
-/* hot reload */
-if (false) { var date_table_api; }
-date_table_component.options.__file = "packages/date-picker/src/basic/date-table.vue"
 /* harmony default export */ var date_table = (date_table_component.exports);
-// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/panel/date.vue?vue&type=script&lang=js&
+// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/panel/date.vue?vue&type=script&lang=js
 //
 //
 //
@@ -4317,7 +3074,7 @@ date_table_component.options.__file = "packages/date-picker/src/basic/date-table
 
 
 
-/* harmony default export */ var datevue_type_script_lang_js_ = ({
+/* harmony default export */ var datevue_type_script_lang_js = ({
   mixins: [locale_default.a],
 
   directives: { Clickoutside: clickoutside_default.a },
@@ -4737,8 +3494,8 @@ date_table_component.options.__file = "packages/date-picker/src/basic/date-table
     }
   }
 });
-// CONCATENATED MODULE: ./packages/date-picker/src/panel/date.vue?vue&type=script&lang=js&
- /* harmony default export */ var panel_datevue_type_script_lang_js_ = (datevue_type_script_lang_js_); 
+// CONCATENATED MODULE: ./packages/date-picker/src/panel/date.vue?vue&type=script&lang=js
+ /* harmony default export */ var panel_datevue_type_script_lang_js = (datevue_type_script_lang_js); 
 // CONCATENATED MODULE: ./packages/date-picker/src/panel/date.vue
 
 
@@ -4748,7 +3505,7 @@ date_table_component.options.__file = "packages/date-picker/src/basic/date-table
 /* normalize component */
 
 var date_component = Object(componentNormalizer["a" /* default */])(
-  panel_datevue_type_script_lang_js_,
+  panel_datevue_type_script_lang_js,
   render,
   staticRenderFns,
   false,
@@ -4758,461 +3515,18 @@ var date_component = Object(componentNormalizer["a" /* default */])(
   
 )
 
-/* hot reload */
-if (false) { var date_api; }
-date_component.options.__file = "packages/date-picker/src/panel/date.vue"
 /* harmony default export */ var panel_date = (date_component.exports);
-// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/panel/date-range.vue?vue&type=template&id=2652849a&
-var date_rangevue_type_template_id_2652849a_render = function() {
-  var _vm = this
-  var _h = _vm.$createElement
-  var _c = _vm._self._c || _h
-  return _c(
-    "transition",
-    {
-      attrs: { name: "el-zoom-in-top" },
-      on: {
-        "after-leave": function($event) {
-          _vm.$emit("dodestroy")
-        }
-      }
-    },
-    [
-      _c(
-        "div",
-        {
-          directives: [
-            {
-              name: "show",
-              rawName: "v-show",
-              value: _vm.visible,
-              expression: "visible"
-            }
-          ],
-          staticClass: "el-picker-panel el-date-range-picker el-popper",
-          class: [
-            {
-              "has-sidebar": _vm.$slots.sidebar || _vm.shortcuts,
-              "has-time": _vm.showTime
-            },
-            _vm.popperClass
-          ]
-        },
-        [
-          _c(
-            "div",
-            { staticClass: "el-picker-panel__body-wrapper" },
-            [
-              _vm._t("sidebar"),
-              _vm.shortcuts
-                ? _c(
-                    "div",
-                    { staticClass: "el-picker-panel__sidebar" },
-                    _vm._l(_vm.shortcuts, function(shortcut, key) {
-                      return _c(
-                        "button",
-                        {
-                          key: key,
-                          staticClass: "el-picker-panel__shortcut",
-                          attrs: { type: "button" },
-                          on: {
-                            click: function($event) {
-                              _vm.handleShortcutClick(shortcut)
-                            }
-                          }
-                        },
-                        [_vm._v(_vm._s(shortcut.text))]
-                      )
-                    }),
-                    0
-                  )
-                : _vm._e(),
-              _c("div", { staticClass: "el-picker-panel__body" }, [
-                _vm.showTime
-                  ? _c(
-                      "div",
-                      { staticClass: "el-date-range-picker__time-header" },
-                      [
-                        _c(
-                          "span",
-                          { staticClass: "el-date-range-picker__editors-wrap" },
-                          [
-                            _c(
-                              "span",
-                              {
-                                staticClass:
-                                  "el-date-range-picker__time-picker-wrap"
-                              },
-                              [
-                                _c("el-input", {
-                                  ref: "minInput",
-                                  staticClass: "el-date-range-picker__editor",
-                                  attrs: {
-                                    size: "small",
-                                    disabled: _vm.rangeState.selecting,
-                                    placeholder: _vm.t(
-                                      "el.datepicker.startDate"
-                                    ),
-                                    value: _vm.minVisibleDate
-                                  },
-                                  on: {
-                                    input: function(val) {
-                                      return _vm.handleDateInput(val, "min")
-                                    },
-                                    change: function(val) {
-                                      return _vm.handleDateChange(val, "min")
-                                    }
-                                  }
-                                })
-                              ],
-                              1
-                            ),
-                            _c(
-                              "span",
-                              {
-                                directives: [
-                                  {
-                                    name: "clickoutside",
-                                    rawName: "v-clickoutside",
-                                    value: _vm.handleMinTimeClose,
-                                    expression: "handleMinTimeClose"
-                                  }
-                                ],
-                                staticClass:
-                                  "el-date-range-picker__time-picker-wrap"
-                              },
-                              [
-                                _c("el-input", {
-                                  staticClass: "el-date-range-picker__editor",
-                                  attrs: {
-                                    size: "small",
-                                    disabled: _vm.rangeState.selecting,
-                                    placeholder: _vm.t(
-                                      "el.datepicker.startTime"
-                                    ),
-                                    value: _vm.minVisibleTime
-                                  },
-                                  on: {
-                                    focus: function($event) {
-                                      _vm.minTimePickerVisible = true
-                                    },
-                                    input: function(val) {
-                                      return _vm.handleTimeInput(val, "min")
-                                    },
-                                    change: function(val) {
-                                      return _vm.handleTimeChange(val, "min")
-                                    }
-                                  }
-                                }),
-                                _c("time-picker", {
-                                  ref: "minTimePicker",
-                                  attrs: {
-                                    "time-arrow-control": _vm.arrowControl,
-                                    visible: _vm.minTimePickerVisible
-                                  },
-                                  on: {
-                                    pick: _vm.handleMinTimePick,
-                                    mounted: function($event) {
-                                      _vm.$refs.minTimePicker.format =
-                                        _vm.timeFormat
-                                    }
-                                  }
-                                })
-                              ],
-                              1
-                            )
-                          ]
-                        ),
-                        _c("span", { staticClass: "el-icon-arrow-right" }),
-                        _c(
-                          "span",
-                          {
-                            staticClass:
-                              "el-date-range-picker__editors-wrap is-right"
-                          },
-                          [
-                            _c(
-                              "span",
-                              {
-                                staticClass:
-                                  "el-date-range-picker__time-picker-wrap"
-                              },
-                              [
-                                _c("el-input", {
-                                  staticClass: "el-date-range-picker__editor",
-                                  attrs: {
-                                    size: "small",
-                                    disabled: _vm.rangeState.selecting,
-                                    placeholder: _vm.t("el.datepicker.endDate"),
-                                    value: _vm.maxVisibleDate,
-                                    readonly: !_vm.minDate
-                                  },
-                                  on: {
-                                    input: function(val) {
-                                      return _vm.handleDateInput(val, "max")
-                                    },
-                                    change: function(val) {
-                                      return _vm.handleDateChange(val, "max")
-                                    }
-                                  }
-                                })
-                              ],
-                              1
-                            ),
-                            _c(
-                              "span",
-                              {
-                                directives: [
-                                  {
-                                    name: "clickoutside",
-                                    rawName: "v-clickoutside",
-                                    value: _vm.handleMaxTimeClose,
-                                    expression: "handleMaxTimeClose"
-                                  }
-                                ],
-                                staticClass:
-                                  "el-date-range-picker__time-picker-wrap"
-                              },
-                              [
-                                _c("el-input", {
-                                  staticClass: "el-date-range-picker__editor",
-                                  attrs: {
-                                    size: "small",
-                                    disabled: _vm.rangeState.selecting,
-                                    placeholder: _vm.t("el.datepicker.endTime"),
-                                    value: _vm.maxVisibleTime,
-                                    readonly: !_vm.minDate
-                                  },
-                                  on: {
-                                    focus: function($event) {
-                                      _vm.minDate &&
-                                        (_vm.maxTimePickerVisible = true)
-                                    },
-                                    input: function(val) {
-                                      return _vm.handleTimeInput(val, "max")
-                                    },
-                                    change: function(val) {
-                                      return _vm.handleTimeChange(val, "max")
-                                    }
-                                  }
-                                }),
-                                _c("time-picker", {
-                                  ref: "maxTimePicker",
-                                  attrs: {
-                                    "time-arrow-control": _vm.arrowControl,
-                                    visible: _vm.maxTimePickerVisible
-                                  },
-                                  on: {
-                                    pick: _vm.handleMaxTimePick,
-                                    mounted: function($event) {
-                                      _vm.$refs.maxTimePicker.format =
-                                        _vm.timeFormat
-                                    }
-                                  }
-                                })
-                              ],
-                              1
-                            )
-                          ]
-                        )
-                      ]
-                    )
-                  : _vm._e(),
-                _c(
-                  "div",
-                  {
-                    staticClass:
-                      "el-picker-panel__content el-date-range-picker__content is-left"
-                  },
-                  [
-                    _c("div", { staticClass: "el-date-range-picker__header" }, [
-                      _c("button", {
-                        staticClass:
-                          "el-picker-panel__icon-btn el-icon-d-arrow-left",
-                        attrs: { type: "button" },
-                        on: { click: _vm.leftPrevYear }
-                      }),
-                      _c("button", {
-                        staticClass:
-                          "el-picker-panel__icon-btn el-icon-arrow-left",
-                        attrs: { type: "button" },
-                        on: { click: _vm.leftPrevMonth }
-                      }),
-                      _vm.unlinkPanels
-                        ? _c("button", {
-                            staticClass:
-                              "el-picker-panel__icon-btn el-icon-d-arrow-right",
-                            class: { "is-disabled": !_vm.enableYearArrow },
-                            attrs: {
-                              type: "button",
-                              disabled: !_vm.enableYearArrow
-                            },
-                            on: { click: _vm.leftNextYear }
-                          })
-                        : _vm._e(),
-                      _vm.unlinkPanels
-                        ? _c("button", {
-                            staticClass:
-                              "el-picker-panel__icon-btn el-icon-arrow-right",
-                            class: { "is-disabled": !_vm.enableMonthArrow },
-                            attrs: {
-                              type: "button",
-                              disabled: !_vm.enableMonthArrow
-                            },
-                            on: { click: _vm.leftNextMonth }
-                          })
-                        : _vm._e(),
-                      _c("div", [_vm._v(_vm._s(_vm.leftLabel))])
-                    ]),
-                    _c("date-table", {
-                      attrs: {
-                        "selection-mode": "range",
-                        date: _vm.leftDate,
-                        "default-value": _vm.defaultValue,
-                        "min-date": _vm.minDate,
-                        "max-date": _vm.maxDate,
-                        "range-state": _vm.rangeState,
-                        "disabled-date": _vm.disabledDate,
-                        "cell-class-name": _vm.cellClassName,
-                        "first-day-of-week": _vm.firstDayOfWeek
-                      },
-                      on: {
-                        changerange: _vm.handleChangeRange,
-                        pick: _vm.handleRangePick
-                      }
-                    })
-                  ],
-                  1
-                ),
-                _c(
-                  "div",
-                  {
-                    staticClass:
-                      "el-picker-panel__content el-date-range-picker__content is-right"
-                  },
-                  [
-                    _c("div", { staticClass: "el-date-range-picker__header" }, [
-                      _vm.unlinkPanels
-                        ? _c("button", {
-                            staticClass:
-                              "el-picker-panel__icon-btn el-icon-d-arrow-left",
-                            class: { "is-disabled": !_vm.enableYearArrow },
-                            attrs: {
-                              type: "button",
-                              disabled: !_vm.enableYearArrow
-                            },
-                            on: { click: _vm.rightPrevYear }
-                          })
-                        : _vm._e(),
-                      _vm.unlinkPanels
-                        ? _c("button", {
-                            staticClass:
-                              "el-picker-panel__icon-btn el-icon-arrow-left",
-                            class: { "is-disabled": !_vm.enableMonthArrow },
-                            attrs: {
-                              type: "button",
-                              disabled: !_vm.enableMonthArrow
-                            },
-                            on: { click: _vm.rightPrevMonth }
-                          })
-                        : _vm._e(),
-                      _c("button", {
-                        staticClass:
-                          "el-picker-panel__icon-btn el-icon-d-arrow-right",
-                        attrs: { type: "button" },
-                        on: { click: _vm.rightNextYear }
-                      }),
-                      _c("button", {
-                        staticClass:
-                          "el-picker-panel__icon-btn el-icon-arrow-right",
-                        attrs: { type: "button" },
-                        on: { click: _vm.rightNextMonth }
-                      }),
-                      _c("div", [_vm._v(_vm._s(_vm.rightLabel))])
-                    ]),
-                    _c("date-table", {
-                      attrs: {
-                        "selection-mode": "range",
-                        date: _vm.rightDate,
-                        "default-value": _vm.defaultValue,
-                        "min-date": _vm.minDate,
-                        "max-date": _vm.maxDate,
-                        "range-state": _vm.rangeState,
-                        "disabled-date": _vm.disabledDate,
-                        "cell-class-name": _vm.cellClassName,
-                        "first-day-of-week": _vm.firstDayOfWeek
-                      },
-                      on: {
-                        changerange: _vm.handleChangeRange,
-                        pick: _vm.handleRangePick
-                      }
-                    })
-                  ],
-                  1
-                )
-              ])
-            ],
-            2
-          ),
-          _vm.showTime
-            ? _c(
-                "div",
-                { staticClass: "el-picker-panel__footer" },
-                [
-                  _c(
-                    "el-button",
-                    {
-                      staticClass: "el-picker-panel__link-btn",
-                      attrs: { size: "mini", type: "text" },
-                      on: { click: _vm.handleClear }
-                    },
-                    [
-                      _vm._v(
-                        "\n        " +
-                          _vm._s(_vm.t("el.datepicker.clear")) +
-                          "\n      "
-                      )
-                    ]
-                  ),
-                  _c(
-                    "el-button",
-                    {
-                      staticClass: "el-picker-panel__link-btn",
-                      attrs: {
-                        plain: "",
-                        size: "mini",
-                        disabled: _vm.btnDisabled
-                      },
-                      on: {
-                        click: function($event) {
-                          _vm.handleConfirm(false)
-                        }
-                      }
-                    },
-                    [
-                      _vm._v(
-                        "\n        " +
-                          _vm._s(_vm.t("el.datepicker.confirm")) +
-                          "\n      "
-                      )
-                    ]
-                  )
-                ],
-                1
-              )
-            : _vm._e()
-        ]
-      )
-    ]
-  )
-}
-var date_rangevue_type_template_id_2652849a_staticRenderFns = []
-date_rangevue_type_template_id_2652849a_render._withStripped = true
-
+// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/panel/date-range.vue?vue&type=template&id=9ce8bd1e
+var date_rangevue_type_template_id_9ce8bd1e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition',{attrs:{"name":"el-zoom-in-top"},on:{"after-leave":function($event){_vm.$emit('dodestroy')}}},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.visible),expression:"visible"}],staticClass:"el-picker-panel el-date-range-picker el-popper",class:[{
+      'has-sidebar': _vm.$slots.sidebar || _vm.shortcuts,
+      'has-time': _vm.showTime
+    }, _vm.popperClass]},[_c('div',{staticClass:"el-picker-panel__body-wrapper"},[_vm._t("sidebar"),(_vm.shortcuts)?_c('div',{staticClass:"el-picker-panel__sidebar"},_vm._l((_vm.shortcuts),function(shortcut,key){return _c('button',{key:key,staticClass:"el-picker-panel__shortcut",attrs:{"type":"button"},on:{"click":function($event){_vm.handleShortcutClick(shortcut)}}},[_vm._v(_vm._s(shortcut.text))])}),0):_vm._e(),_c('div',{staticClass:"el-picker-panel__body"},[(_vm.showTime)?_c('div',{staticClass:"el-date-range-picker__time-header"},[_c('span',{staticClass:"el-date-range-picker__editors-wrap"},[_c('span',{staticClass:"el-date-range-picker__time-picker-wrap"},[_c('el-input',{ref:"minInput",staticClass:"el-date-range-picker__editor",attrs:{"size":"small","disabled":_vm.rangeState.selecting,"placeholder":_vm.t('el.datepicker.startDate'),"value":_vm.minVisibleDate},on:{"input":function (val) { return _vm.handleDateInput(val, 'min'); },"change":function (val) { return _vm.handleDateChange(val, 'min'); }}})],1),_c('span',{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:(_vm.handleMinTimeClose),expression:"handleMinTimeClose"}],staticClass:"el-date-range-picker__time-picker-wrap"},[_c('el-input',{staticClass:"el-date-range-picker__editor",attrs:{"size":"small","disabled":_vm.rangeState.selecting,"placeholder":_vm.t('el.datepicker.startTime'),"value":_vm.minVisibleTime},on:{"focus":function($event){_vm.minTimePickerVisible = true},"input":function (val) { return _vm.handleTimeInput(val, 'min'); },"change":function (val) { return _vm.handleTimeChange(val, 'min'); }}}),_c('time-picker',{ref:"minTimePicker",attrs:{"time-arrow-control":_vm.arrowControl,"visible":_vm.minTimePickerVisible},on:{"pick":_vm.handleMinTimePick,"mounted":function($event){_vm.$refs.minTimePicker.format=_vm.timeFormat}}})],1)]),_c('span',{staticClass:"el-icon-arrow-right"}),_c('span',{staticClass:"el-date-range-picker__editors-wrap is-right"},[_c('span',{staticClass:"el-date-range-picker__time-picker-wrap"},[_c('el-input',{staticClass:"el-date-range-picker__editor",attrs:{"size":"small","disabled":_vm.rangeState.selecting,"placeholder":_vm.t('el.datepicker.endDate'),"value":_vm.maxVisibleDate,"readonly":!_vm.minDate},on:{"input":function (val) { return _vm.handleDateInput(val, 'max'); },"change":function (val) { return _vm.handleDateChange(val, 'max'); }}})],1),_c('span',{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:(_vm.handleMaxTimeClose),expression:"handleMaxTimeClose"}],staticClass:"el-date-range-picker__time-picker-wrap"},[_c('el-input',{staticClass:"el-date-range-picker__editor",attrs:{"size":"small","disabled":_vm.rangeState.selecting,"placeholder":_vm.t('el.datepicker.endTime'),"value":_vm.maxVisibleTime,"readonly":!_vm.minDate},on:{"focus":function($event){_vm.minDate && (_vm.maxTimePickerVisible = true)},"input":function (val) { return _vm.handleTimeInput(val, 'max'); },"change":function (val) { return _vm.handleTimeChange(val, 'max'); }}}),_c('time-picker',{ref:"maxTimePicker",attrs:{"time-arrow-control":_vm.arrowControl,"visible":_vm.maxTimePickerVisible},on:{"pick":_vm.handleMaxTimePick,"mounted":function($event){_vm.$refs.maxTimePicker.format=_vm.timeFormat}}})],1)])]):_vm._e(),_c('div',{staticClass:"el-picker-panel__content el-date-range-picker__content is-left"},[_c('div',{staticClass:"el-date-range-picker__header"},[_c('button',{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",attrs:{"type":"button"},on:{"click":_vm.leftPrevYear}}),_c('button',{staticClass:"el-picker-panel__icon-btn el-icon-arrow-left",attrs:{"type":"button"},on:{"click":_vm.leftPrevMonth}}),(_vm.unlinkPanels)?_c('button',{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",class:{ 'is-disabled': !_vm.enableYearArrow },attrs:{"type":"button","disabled":!_vm.enableYearArrow},on:{"click":_vm.leftNextYear}}):_vm._e(),(_vm.unlinkPanels)?_c('button',{staticClass:"el-picker-panel__icon-btn el-icon-arrow-right",class:{ 'is-disabled': !_vm.enableMonthArrow },attrs:{"type":"button","disabled":!_vm.enableMonthArrow},on:{"click":_vm.leftNextMonth}}):_vm._e(),_c('div',[_vm._v(_vm._s(_vm.leftLabel))])]),_c('date-table',{attrs:{"selection-mode":"range","date":_vm.leftDate,"default-value":_vm.defaultValue,"min-date":_vm.minDate,"max-date":_vm.maxDate,"range-state":_vm.rangeState,"disabled-date":_vm.disabledDate,"cell-class-name":_vm.cellClassName,"first-day-of-week":_vm.firstDayOfWeek},on:{"changerange":_vm.handleChangeRange,"pick":_vm.handleRangePick}})],1),_c('div',{staticClass:"el-picker-panel__content el-date-range-picker__content is-right"},[_c('div',{staticClass:"el-date-range-picker__header"},[(_vm.unlinkPanels)?_c('button',{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",class:{ 'is-disabled': !_vm.enableYearArrow },attrs:{"type":"button","disabled":!_vm.enableYearArrow},on:{"click":_vm.rightPrevYear}}):_vm._e(),(_vm.unlinkPanels)?_c('button',{staticClass:"el-picker-panel__icon-btn el-icon-arrow-left",class:{ 'is-disabled': !_vm.enableMonthArrow },attrs:{"type":"button","disabled":!_vm.enableMonthArrow},on:{"click":_vm.rightPrevMonth}}):_vm._e(),_c('button',{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",attrs:{"type":"button"},on:{"click":_vm.rightNextYear}}),_c('button',{staticClass:"el-picker-panel__icon-btn el-icon-arrow-right",attrs:{"type":"button"},on:{"click":_vm.rightNextMonth}}),_c('div',[_vm._v(_vm._s(_vm.rightLabel))])]),_c('date-table',{attrs:{"selection-mode":"range","date":_vm.rightDate,"default-value":_vm.defaultValue,"min-date":_vm.minDate,"max-date":_vm.maxDate,"range-state":_vm.rangeState,"disabled-date":_vm.disabledDate,"cell-class-name":_vm.cellClassName,"first-day-of-week":_vm.firstDayOfWeek},on:{"changerange":_vm.handleChangeRange,"pick":_vm.handleRangePick}})],1)])],2),(_vm.showTime)?_c('div',{staticClass:"el-picker-panel__footer"},[_c('el-button',{staticClass:"el-picker-panel__link-btn",attrs:{"size":"mini","type":"text"},on:{"click":_vm.handleClear}},[_vm._v("\n        "+_vm._s(_vm.t('el.datepicker.clear'))+"\n      ")]),_c('el-button',{staticClass:"el-picker-panel__link-btn",attrs:{"plain":"","size":"mini","disabled":_vm.btnDisabled},on:{"click":function($event){_vm.handleConfirm(false)}}},[_vm._v("\n        "+_vm._s(_vm.t('el.datepicker.confirm'))+"\n      ")])],1):_vm._e()])])}
+var date_rangevue_type_template_id_9ce8bd1e_staticRenderFns = []
+date_rangevue_type_template_id_9ce8bd1e_render._withStripped = true
 
-// CONCATENATED MODULE: ./packages/date-picker/src/panel/date-range.vue?vue&type=template&id=2652849a&
+// CONCATENATED MODULE: ./packages/date-picker/src/panel/date-range.vue?vue&type=template&id=9ce8bd1e
 
-// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/panel/date-range.vue?vue&type=script&lang=js&
+// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/panel/date-range.vue?vue&type=script&lang=js
 //
 //
 //
@@ -5421,7 +3735,7 @@ var date_rangevue_type_script_lang_js_calcDefaultValue = function calcDefaultVal
   }
 };
 
-/* harmony default export */ var date_rangevue_type_script_lang_js_ = ({
+/* harmony default export */ var date_rangevue_type_script_lang_js = ({
   mixins: [locale_default.a],
 
   directives: { Clickoutside: clickoutside_default.a },
@@ -5844,8 +4158,8 @@ var date_rangevue_type_script_lang_js_calcDefaultValue = function calcDefaultVal
 
   components: { TimePicker: panel_time["a" /* default */], DateTable: date_table, ElInput: input_default.a, ElButton: button_default.a }
 });
-// CONCATENATED MODULE: ./packages/date-picker/src/panel/date-range.vue?vue&type=script&lang=js&
- /* harmony default export */ var panel_date_rangevue_type_script_lang_js_ = (date_rangevue_type_script_lang_js_); 
+// CONCATENATED MODULE: ./packages/date-picker/src/panel/date-range.vue?vue&type=script&lang=js
+ /* harmony default export */ var panel_date_rangevue_type_script_lang_js = (date_rangevue_type_script_lang_js); 
 // CONCATENATED MODULE: ./packages/date-picker/src/panel/date-range.vue
 
 
@@ -5855,9 +4169,9 @@ var date_rangevue_type_script_lang_js_calcDefaultValue = function calcDefaultVal
 /* normalize component */
 
 var date_range_component = Object(componentNormalizer["a" /* default */])(
-  panel_date_rangevue_type_script_lang_js_,
-  date_rangevue_type_template_id_2652849a_render,
-  date_rangevue_type_template_id_2652849a_staticRenderFns,
+  panel_date_rangevue_type_script_lang_js,
+  date_rangevue_type_template_id_9ce8bd1e_render,
+  date_rangevue_type_template_id_9ce8bd1e_staticRenderFns,
   false,
   null,
   null,
@@ -5865,183 +4179,17 @@ var date_range_component = Object(componentNormalizer["a" /* default */])(
   
 )
 
-/* hot reload */
-if (false) { var date_range_api; }
-date_range_component.options.__file = "packages/date-picker/src/panel/date-range.vue"
 /* harmony default export */ var date_range = (date_range_component.exports);
-// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/panel/month-range.vue?vue&type=template&id=f2645fb8&
-var month_rangevue_type_template_id_f2645fb8_render = function() {
-  var _vm = this
-  var _h = _vm.$createElement
-  var _c = _vm._self._c || _h
-  return _c(
-    "transition",
-    {
-      attrs: { name: "el-zoom-in-top" },
-      on: {
-        "after-leave": function($event) {
-          _vm.$emit("dodestroy")
-        }
-      }
-    },
-    [
-      _c(
-        "div",
-        {
-          directives: [
-            {
-              name: "show",
-              rawName: "v-show",
-              value: _vm.visible,
-              expression: "visible"
-            }
-          ],
-          staticClass: "el-picker-panel el-date-range-picker el-popper",
-          class: [
-            {
-              "has-sidebar": _vm.$slots.sidebar || _vm.shortcuts
-            },
-            _vm.popperClass
-          ]
-        },
-        [
-          _c(
-            "div",
-            { staticClass: "el-picker-panel__body-wrapper" },
-            [
-              _vm._t("sidebar"),
-              _vm.shortcuts
-                ? _c(
-                    "div",
-                    { staticClass: "el-picker-panel__sidebar" },
-                    _vm._l(_vm.shortcuts, function(shortcut, key) {
-                      return _c(
-                        "button",
-                        {
-                          key: key,
-                          staticClass: "el-picker-panel__shortcut",
-                          attrs: { type: "button" },
-                          on: {
-                            click: function($event) {
-                              _vm.handleShortcutClick(shortcut)
-                            }
-                          }
-                        },
-                        [_vm._v(_vm._s(shortcut.text))]
-                      )
-                    }),
-                    0
-                  )
-                : _vm._e(),
-              _c("div", { staticClass: "el-picker-panel__body" }, [
-                _c(
-                  "div",
-                  {
-                    staticClass:
-                      "el-picker-panel__content el-date-range-picker__content is-left"
-                  },
-                  [
-                    _c("div", { staticClass: "el-date-range-picker__header" }, [
-                      _c("button", {
-                        staticClass:
-                          "el-picker-panel__icon-btn el-icon-d-arrow-left",
-                        attrs: { type: "button" },
-                        on: { click: _vm.leftPrevYear }
-                      }),
-                      _vm.unlinkPanels
-                        ? _c("button", {
-                            staticClass:
-                              "el-picker-panel__icon-btn el-icon-d-arrow-right",
-                            class: { "is-disabled": !_vm.enableYearArrow },
-                            attrs: {
-                              type: "button",
-                              disabled: !_vm.enableYearArrow
-                            },
-                            on: { click: _vm.leftNextYear }
-                          })
-                        : _vm._e(),
-                      _c("div", [_vm._v(_vm._s(_vm.leftLabel))])
-                    ]),
-                    _c("month-table", {
-                      attrs: {
-                        "selection-mode": "range",
-                        date: _vm.leftDate,
-                        "default-value": _vm.defaultValue,
-                        "min-date": _vm.minDate,
-                        "max-date": _vm.maxDate,
-                        "range-state": _vm.rangeState,
-                        "disabled-date": _vm.disabledDate
-                      },
-                      on: {
-                        changerange: _vm.handleChangeRange,
-                        pick: _vm.handleRangePick
-                      }
-                    })
-                  ],
-                  1
-                ),
-                _c(
-                  "div",
-                  {
-                    staticClass:
-                      "el-picker-panel__content el-date-range-picker__content is-right"
-                  },
-                  [
-                    _c("div", { staticClass: "el-date-range-picker__header" }, [
-                      _vm.unlinkPanels
-                        ? _c("button", {
-                            staticClass:
-                              "el-picker-panel__icon-btn el-icon-d-arrow-left",
-                            class: { "is-disabled": !_vm.enableYearArrow },
-                            attrs: {
-                              type: "button",
-                              disabled: !_vm.enableYearArrow
-                            },
-                            on: { click: _vm.rightPrevYear }
-                          })
-                        : _vm._e(),
-                      _c("button", {
-                        staticClass:
-                          "el-picker-panel__icon-btn el-icon-d-arrow-right",
-                        attrs: { type: "button" },
-                        on: { click: _vm.rightNextYear }
-                      }),
-                      _c("div", [_vm._v(_vm._s(_vm.rightLabel))])
-                    ]),
-                    _c("month-table", {
-                      attrs: {
-                        "selection-mode": "range",
-                        date: _vm.rightDate,
-                        "default-value": _vm.defaultValue,
-                        "min-date": _vm.minDate,
-                        "max-date": _vm.maxDate,
-                        "range-state": _vm.rangeState,
-                        "disabled-date": _vm.disabledDate
-                      },
-                      on: {
-                        changerange: _vm.handleChangeRange,
-                        pick: _vm.handleRangePick
-                      }
-                    })
-                  ],
-                  1
-                )
-              ])
-            ],
-            2
-          )
-        ]
-      )
-    ]
-  )
-}
-var month_rangevue_type_template_id_f2645fb8_staticRenderFns = []
-month_rangevue_type_template_id_f2645fb8_render._withStripped = true
-
+// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/panel/month-range.vue?vue&type=template&id=66313450
+var month_rangevue_type_template_id_66313450_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition',{attrs:{"name":"el-zoom-in-top"},on:{"after-leave":function($event){_vm.$emit('dodestroy')}}},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.visible),expression:"visible"}],staticClass:"el-picker-panel el-date-range-picker el-popper",class:[{
+      'has-sidebar': _vm.$slots.sidebar || _vm.shortcuts
+    }, _vm.popperClass]},[_c('div',{staticClass:"el-picker-panel__body-wrapper"},[_vm._t("sidebar"),(_vm.shortcuts)?_c('div',{staticClass:"el-picker-panel__sidebar"},_vm._l((_vm.shortcuts),function(shortcut,key){return _c('button',{key:key,staticClass:"el-picker-panel__shortcut",attrs:{"type":"button"},on:{"click":function($event){_vm.handleShortcutClick(shortcut)}}},[_vm._v(_vm._s(shortcut.text))])}),0):_vm._e(),_c('div',{staticClass:"el-picker-panel__body"},[_c('div',{staticClass:"el-picker-panel__content el-date-range-picker__content is-left"},[_c('div',{staticClass:"el-date-range-picker__header"},[_c('button',{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",attrs:{"type":"button"},on:{"click":_vm.leftPrevYear}}),(_vm.unlinkPanels)?_c('button',{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",class:{ 'is-disabled': !_vm.enableYearArrow },attrs:{"type":"button","disabled":!_vm.enableYearArrow},on:{"click":_vm.leftNextYear}}):_vm._e(),_c('div',[_vm._v(_vm._s(_vm.leftLabel))])]),_c('month-table',{attrs:{"selection-mode":"range","date":_vm.leftDate,"default-value":_vm.defaultValue,"min-date":_vm.minDate,"max-date":_vm.maxDate,"range-state":_vm.rangeState,"disabled-date":_vm.disabledDate},on:{"changerange":_vm.handleChangeRange,"pick":_vm.handleRangePick}})],1),_c('div',{staticClass:"el-picker-panel__content el-date-range-picker__content is-right"},[_c('div',{staticClass:"el-date-range-picker__header"},[(_vm.unlinkPanels)?_c('button',{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",class:{ 'is-disabled': !_vm.enableYearArrow },attrs:{"type":"button","disabled":!_vm.enableYearArrow},on:{"click":_vm.rightPrevYear}}):_vm._e(),_c('button',{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",attrs:{"type":"button"},on:{"click":_vm.rightNextYear}}),_c('div',[_vm._v(_vm._s(_vm.rightLabel))])]),_c('month-table',{attrs:{"selection-mode":"range","date":_vm.rightDate,"default-value":_vm.defaultValue,"min-date":_vm.minDate,"max-date":_vm.maxDate,"range-state":_vm.rangeState,"disabled-date":_vm.disabledDate},on:{"changerange":_vm.handleChangeRange,"pick":_vm.handleRangePick}})],1)])],2)])])}
+var month_rangevue_type_template_id_66313450_staticRenderFns = []
+month_rangevue_type_template_id_66313450_render._withStripped = true
 
-// CONCATENATED MODULE: ./packages/date-picker/src/panel/month-range.vue?vue&type=template&id=f2645fb8&
+// CONCATENATED MODULE: ./packages/date-picker/src/panel/month-range.vue?vue&type=template&id=66313450
 
-// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/panel/month-range.vue?vue&type=script&lang=js&
+// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/date-picker/src/panel/month-range.vue?vue&type=script&lang=js
 //
 //
 //
@@ -6138,7 +4286,7 @@ var month_rangevue_type_script_lang_js_calcDefaultValue = function calcDefaultVa
     return [new Date(), Object(date_util_["nextMonth"])(new Date())];
   }
 };
-/* harmony default export */ var month_rangevue_type_script_lang_js_ = ({
+/* harmony default export */ var month_rangevue_type_script_lang_js = ({
   mixins: [locale_default.a],
 
   directives: { Clickoutside: clickoutside_default.a },
@@ -6311,8 +4459,8 @@ var month_rangevue_type_script_lang_js_calcDefaultValue = function calcDefaultVa
 
   components: { MonthTable: month_table, ElInput: input_default.a, ElButton: button_default.a }
 });
-// CONCATENATED MODULE: ./packages/date-picker/src/panel/month-range.vue?vue&type=script&lang=js&
- /* harmony default export */ var panel_month_rangevue_type_script_lang_js_ = (month_rangevue_type_script_lang_js_); 
+// CONCATENATED MODULE: ./packages/date-picker/src/panel/month-range.vue?vue&type=script&lang=js
+ /* harmony default export */ var panel_month_rangevue_type_script_lang_js = (month_rangevue_type_script_lang_js); 
 // CONCATENATED MODULE: ./packages/date-picker/src/panel/month-range.vue
 
 
@@ -6322,9 +4470,9 @@ var month_rangevue_type_script_lang_js_calcDefaultValue = function calcDefaultVa
 /* normalize component */
 
 var month_range_component = Object(componentNormalizer["a" /* default */])(
-  panel_month_rangevue_type_script_lang_js_,
-  month_rangevue_type_template_id_f2645fb8_render,
-  month_rangevue_type_template_id_f2645fb8_staticRenderFns,
+  panel_month_rangevue_type_script_lang_js,
+  month_rangevue_type_template_id_66313450_render,
+  month_rangevue_type_template_id_66313450_staticRenderFns,
   false,
   null,
   null,
@@ -6332,9 +4480,6 @@ var month_range_component = Object(componentNormalizer["a" /* default */])(
   
 )
 
-/* hot reload */
-if (false) { var month_range_api; }
-month_range_component.options.__file = "packages/date-picker/src/panel/month-range.vue"
 /* harmony default export */ var month_range = (month_range_component.exports);
 // CONCATENATED MODULE: ./packages/date-picker/src/picker/date-picker.js