vxe-pc-ui 3.16.0 → 3.16.1

package/lib/date-panel/src/date-panel.js

@@ -0,0 +1,2132 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _comp = require("../../ui/src/comp");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _ui = require("../../ui");
+var _util = require("./util");
+var _log = require("../../ui/src/log");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+var _createComponentLog = (0, _log.createComponentLog)('date-panel'),
+  errLog = _createComponentLog.errLog;
+var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defineVxeComponent)({
+  name: 'VxeDatePanel',
+  mixins: [_ui.globalMixins.sizeMixin],
+  model: {
+    prop: 'value',
+    event: 'modelValue'
+  },
+  props: {
+    value: [String, Number, Date, Array],
+    type: {
+      type: String,
+      default: 'date'
+    },
+    className: String,
+    cellClassName: [String, Function],
+    size: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().datePanel.size || (0, _ui.getConfig)().size;
+      }
+    },
+    multiple: Boolean,
+    limitCount: {
+      type: [String, Number],
+      default: function _default() {
+        return (0, _ui.getConfig)().datePanel.limitCount;
+      }
+    },
+    // date、week、month、quarter、year
+    startDate: {
+      type: [String, Number, Date],
+      default: function _default() {
+        return (0, _ui.getConfig)().datePanel.startDate;
+      }
+    },
+    endDate: {
+      type: [String, Number, Date],
+      default: function _default() {
+        return (0, _ui.getConfig)().datePanel.endDate;
+      }
+    },
+    defaultMode: String,
+    defaultDate: [String, Number, Date],
+    defaultTime: [String, Number, Date],
+    minDate: [String, Number, Date],
+    maxDate: [String, Number, Date],
+    startDay: {
+      type: [String, Number],
+      default: function _default() {
+        return (0, _ui.getConfig)().datePanel.startDay;
+      }
+    },
+    labelFormat: String,
+    valueFormat: String,
+    timeFormat: String,
+    valueSort: Boolean,
+    festivalMethod: {
+      type: Function,
+      default: function _default() {
+        return (0, _ui.getConfig)().datePanel.festivalMethod;
+      }
+    },
+    disabledMethod: {
+      type: Function,
+      default: function _default() {
+        return (0, _ui.getConfig)().datePanel.disabledMethod;
+      }
+    },
+    timeConfig: Object,
+    // week
+    selectDay: {
+      type: [String, Number],
+      default: function _default() {
+        return (0, _ui.getConfig)().datePanel.selectDay;
+      }
+    }
+  },
+  data: function data() {
+    var xID = _xeUtils.default.uniqueId();
+    var reactData = {
+      visiblePanel: false,
+      isAniVisible: false,
+      isActivated: false,
+      inputValue: '',
+      inputLabel: '',
+      datetimePanelValue: null,
+      datePanelValue: null,
+      datePanelLabel: '',
+      datePanelType: 'day',
+      selectMonth: null,
+      currentDate: null
+    };
+    var internalData = {
+      yearSize: 16,
+      monthSize: 12,
+      quarterSize: 4,
+      hpTimeout: undefined
+    };
+    return {
+      xID: xID,
+      reactData: reactData,
+      internalData: internalData
+    };
+  },
+  computed: Object.assign(Object.assign({}, {}), {
+    computeIsTimeType: function computeIsTimeType() {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var type = props.type;
+      return type === 'time';
+    },
+    computeIsTimeOrDateTimeType: function computeIsTimeOrDateTimeType() {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var type = props.type;
+      var isTimeType = $xeDatePanel.computeIsTimeType;
+      return isTimeType || type === 'datetime';
+    },
+    computeIsDatePanelType: function computeIsDatePanelType() {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var isTimeOrDateTimeType = $xeDatePanel.computeIsTimeOrDateTimeType;
+      return isTimeOrDateTimeType || ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
+    },
+    computeDateStartDate: function computeDateStartDate() {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      return props.startDate ? _xeUtils.default.toStringDate(props.startDate) : null;
+    },
+    computeDateEndDate: function computeDateEndDate() {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      return props.endDate ? _xeUtils.default.toStringDate(props.endDate) : null;
+    },
+    computeDateListValue: function computeDateListValue() {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var modelValue = props.value,
+        valueFormat = props.valueFormat;
+      var isDatePanelType = $xeDatePanel.computeIsDatePanelType;
+      var dateValueFormat = $xeDatePanel.computeDateValueFormat;
+      var restList = [];
+      if (modelValue && isDatePanelType) {
+        (_xeUtils.default.isArray(modelValue) ? modelValue : _xeUtils.default.toValueString(modelValue).split(',')).forEach(function (val) {
+          var strVal = val;
+          if (val) {
+            if (valueFormat === 'timestamp') {
+              if (_xeUtils.default.isString(val) && /^\d+$/.test(val)) {
+                strVal = Number(strVal);
+              }
+            }
+            var date = $xeDatePanel.parseDate(strVal, dateValueFormat);
+            restList.push(date);
+          }
+        });
+      }
+      return restList;
+    },
+    computeDateMultipleValue: function computeDateMultipleValue() {
+      var $xeDatePanel = this;
+      var dateListValue = $xeDatePanel.computeDateListValue;
+      var dateValueFormat = $xeDatePanel.computeDateValueFormat;
+      return dateListValue.map(function (date) {
+        return _xeUtils.default.toDateString(date, dateValueFormat);
+      });
+    },
+    computeDateMultipleLabel: function computeDateMultipleLabel() {
+      var $xeDatePanel = this;
+      var dateListValue = $xeDatePanel.computeDateListValue;
+      var dateLabelFormat = $xeDatePanel.computeDateLabelFormat;
+      return dateListValue.map(function (date) {
+        return _xeUtils.default.toDateString(date, dateLabelFormat);
+      }).join(', ');
+    },
+    computeLimitMaxCount: function computeLimitMaxCount() {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      return props.multiple ? _xeUtils.default.toNumber(props.limitCount) : 0;
+    },
+    computeOverCount: function computeOverCount() {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var multiple = props.multiple;
+      var limitMaxCount = $xeDatePanel.computeLimitMaxCount;
+      var dateMultipleValue = $xeDatePanel.computeDateMultipleValue;
+      if (multiple && limitMaxCount) {
+        return dateMultipleValue.length >= limitMaxCount;
+      }
+      return false;
+    },
+    computeDateValueFormat: function computeDateValueFormat() {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var type = props.type,
+        valueFormat = props.valueFormat;
+      return (0, _util.handleValueFormat)(type, valueFormat);
+    },
+    computeTimeOpts: function computeTimeOpts() {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      return Object.assign({}, (0, _ui.getConfig)().datePanel.timeConfig, props.timeConfig);
+    },
+    computeDateValue: function computeDateValue() {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var modelValue = props.value,
+        defaultMode = props.defaultMode;
+      var isDatePanelType = $xeDatePanel.computeIsDatePanelType;
+      var dateValueFormat = $xeDatePanel.computeDateValueFormat;
+      var val = null;
+      if (modelValue && isDatePanelType) {
+        var vals = _xeUtils.default.isString(modelValue) ? modelValue.split(',') : modelValue;
+        var currVal = defaultMode === 'last' ? _xeUtils.default.last(vals) : _xeUtils.default.first(vals);
+        var date = $xeDatePanel.parseDate(currVal, dateValueFormat);
+        if (_xeUtils.default.isValidDate(date)) {
+          val = date;
+        }
+      }
+      return val;
+    },
+    computeIsDisabledPrevDateBtn: function computeIsDisabledPrevDateBtn() {
+      var $xeDatePanel = this;
+      var reactData = $xeDatePanel.reactData;
+      var dateStartTime = $xeDatePanel.computeDateStartDate;
+      var selectMonth = reactData.selectMonth;
+      if (selectMonth && dateStartTime) {
+        return selectMonth <= dateStartTime;
+      }
+      return false;
+    },
+    computeIsDisabledNextDateBtn: function computeIsDisabledNextDateBtn() {
+      var $xeDatePanel = this;
+      var reactData = $xeDatePanel.reactData;
+      var dateEndTime = $xeDatePanel.computeDateEndDate;
+      var selectMonth = reactData.selectMonth;
+      if (selectMonth && dateEndTime) {
+        return _xeUtils.default.getWhatMonth(selectMonth, 0, 'last') >= dateEndTime;
+      }
+      return false;
+    },
+    computeDateTimeLabel: function computeDateTimeLabel() {
+      var $xeDatePanel = this;
+      var reactData = $xeDatePanel.reactData;
+      var datetimePanelValue = reactData.datetimePanelValue;
+      var hasTimeSecond = $xeDatePanel.computeHasTimeSecond;
+      var hasTimeMinute = $xeDatePanel.computeHasTimeMinute;
+      if (datetimePanelValue) {
+        return _xeUtils.default.toDateString(datetimePanelValue, hasTimeMinute && hasTimeSecond ? 'HH:mm:ss' : hasTimeMinute ? 'HH:mm' : 'HH');
+      }
+      return '';
+    },
+    computeDateHMSTime: function computeDateHMSTime() {
+      var $xeDatePanel = this;
+      var dateValue = $xeDatePanel.computeDateValue;
+      var isTimeOrDateTimeType = $xeDatePanel.computeIsTimeOrDateTimeType;
+      return dateValue && isTimeOrDateTimeType ? (dateValue.getHours() * 3600 + dateValue.getMinutes() * 60 + dateValue.getSeconds()) * 1000 : 0;
+    },
+    computeDateLabelFormat: function computeDateLabelFormat() {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var labelFormat = props.labelFormat;
+      var isDatePanelType = $xeDatePanel.computeIsDatePanelType;
+      if (isDatePanelType) {
+        return labelFormat || (0, _ui.getI18n)("vxe.input.date.labelFormat.".concat(props.type));
+      }
+      return '';
+    },
+    computeYearList: function computeYearList() {
+      var $xeDatePanel = this;
+      var reactData = $xeDatePanel.reactData;
+      var internalData = $xeDatePanel.internalData;
+      var yearSize = internalData.yearSize;
+      var selectMonth = reactData.selectMonth,
+        currentDate = reactData.currentDate;
+      var years = [];
+      if (selectMonth && currentDate) {
+        var currFullYear = currentDate.getFullYear();
+        var selectFullYear = selectMonth.getFullYear();
+        var startYearDate = new Date(selectFullYear - selectFullYear % yearSize, 0, 1);
+        for (var index = 0; index < yearSize; index++) {
+          var date = _xeUtils.default.getWhatYear(startYearDate, index, 'first');
+          var itemFullYear = date.getFullYear();
+          years.push({
+            date: date,
+            isCurrent: true,
+            isPrev: index < 0,
+            isNow: currFullYear === itemFullYear,
+            isNext: index >= yearSize,
+            year: itemFullYear
+          });
+        }
+      }
+      return years;
+    },
+    computeSelectDatePanelObj: function computeSelectDatePanelObj() {
+      var $xeDatePanel = this;
+      var reactData = $xeDatePanel.reactData;
+      var isDatePanelType = $xeDatePanel.computeIsDatePanelType;
+      var y = '';
+      var m = '';
+      if (isDatePanelType) {
+        var datePanelType = reactData.datePanelType,
+          selectMonth = reactData.selectMonth;
+        var yearList = $xeDatePanel.computeYearList;
+        var year = '';
+        var month;
+        if (selectMonth) {
+          year = selectMonth.getFullYear();
+          month = selectMonth.getMonth() + 1;
+        }
+        if (datePanelType === 'quarter' || datePanelType === 'month') {
+          y = "".concat(year);
+        } else if (datePanelType === 'year') {
+          y = yearList.length ? "".concat(yearList[0].year, " - ").concat(yearList[yearList.length - 1].year) : '';
+        } else {
+          y = "".concat(year);
+          m = month ? (0, _ui.getI18n)('vxe.calendar.monthLabel', [month]) : '-';
+        }
+      }
+      return {
+        y: (0, _ui.getI18n)('vxe.calendar.yearLabel', [y]),
+        m: m
+      };
+    },
+    computeFirstDayOfWeek: function computeFirstDayOfWeek() {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var startDay = props.startDay;
+      return _xeUtils.default.toNumber(startDay);
+    },
+    computeWeekDatas: function computeWeekDatas() {
+      var $xeDatePanel = this;
+      var weeks = [];
+      var isDatePanelType = $xeDatePanel.computeIsDatePanelType;
+      if (isDatePanelType) {
+        var sWeek = $xeDatePanel.computeFirstDayOfWeek;
+        weeks.push(sWeek);
+        for (var index = 0; index < 6; index++) {
+          if (sWeek >= 6) {
+            sWeek = 0;
+          } else {
+            sWeek++;
+          }
+          weeks.push(sWeek);
+        }
+      }
+      return weeks;
+    },
+    computeDateHeaders: function computeDateHeaders() {
+      var $xeDatePanel = this;
+      var isDatePanelType = $xeDatePanel.computeIsDatePanelType;
+      if (isDatePanelType) {
+        var weekDatas = $xeDatePanel.computeWeekDatas;
+        return weekDatas.map(function (day) {
+          return {
+            value: day,
+            label: (0, _ui.getI18n)("vxe.input.date.weeks.w".concat(day))
+          };
+        });
+      }
+      return [];
+    },
+    computeWeekHeaders: function computeWeekHeaders() {
+      var $xeDatePanel = this;
+      var isDatePanelType = $xeDatePanel.computeIsDatePanelType;
+      if (isDatePanelType) {
+        var dateHeaders = $xeDatePanel.computeDateHeaders;
+        return [{
+          label: (0, _ui.getI18n)('vxe.input.date.weeks.w')
+        }].concat(dateHeaders);
+      }
+      return [];
+    },
+    computeYearDatas: function computeYearDatas() {
+      var $xeDatePanel = this;
+      var yearList = $xeDatePanel.computeYearList;
+      return _xeUtils.default.chunk(yearList, 4);
+    },
+    computeQuarterList: function computeQuarterList() {
+      var $xeDatePanel = this;
+      var reactData = $xeDatePanel.reactData;
+      var internalData = $xeDatePanel.internalData;
+      var quarterSize = internalData.quarterSize;
+      var selectMonth = reactData.selectMonth,
+        currentDate = reactData.currentDate;
+      var quarters = [];
+      if (selectMonth && currentDate) {
+        var currFullYear = currentDate.getFullYear();
+        var currQuarter = (0, _util.getDateQuarter)(currentDate);
+        var firstYear = _xeUtils.default.getWhatYear(selectMonth, 0, 'first');
+        var selFullYear = firstYear.getFullYear();
+        for (var index = 0; index < quarterSize; index++) {
+          var date = _xeUtils.default.getWhatQuarter(firstYear, index);
+          var itemFullYear = date.getFullYear();
+          var itemQuarter = (0, _util.getDateQuarter)(date);
+          var isPrev = itemFullYear < selFullYear;
+          quarters.push({
+            date: date,
+            isPrev: isPrev,
+            isCurrent: itemFullYear === selFullYear,
+            isNow: itemFullYear === currFullYear && itemQuarter === currQuarter,
+            isNext: !isPrev && itemFullYear > selFullYear,
+            quarter: itemQuarter
+          });
+        }
+      }
+      return quarters;
+    },
+    computeQuarterDatas: function computeQuarterDatas() {
+      var $xeDatePanel = this;
+      var quarterList = $xeDatePanel.computeQuarterList;
+      return _xeUtils.default.chunk(quarterList, 2);
+    },
+    computeMonthList: function computeMonthList() {
+      var $xeDatePanel = this;
+      var reactData = $xeDatePanel.reactData;
+      var internalData = $xeDatePanel.internalData;
+      var monthSize = internalData.monthSize;
+      var selectMonth = reactData.selectMonth,
+        currentDate = reactData.currentDate;
+      var months = [];
+      if (selectMonth && currentDate) {
+        var currFullYear = currentDate.getFullYear();
+        var currMonth = currentDate.getMonth();
+        var selFullYear = _xeUtils.default.getWhatYear(selectMonth, 0, 'first').getFullYear();
+        for (var index = 0; index < monthSize; index++) {
+          var date = _xeUtils.default.getWhatYear(selectMonth, 0, index);
+          var itemFullYear = date.getFullYear();
+          var itemMonth = date.getMonth();
+          var isPrev = itemFullYear < selFullYear;
+          months.push({
+            date: date,
+            isPrev: isPrev,
+            isCurrent: itemFullYear === selFullYear,
+            isNow: itemFullYear === currFullYear && itemMonth === currMonth,
+            isNext: !isPrev && itemFullYear > selFullYear,
+            month: itemMonth
+          });
+        }
+      }
+      return months;
+    },
+    computeMonthDatas: function computeMonthDatas() {
+      var $xeDatePanel = this;
+      var monthList = $xeDatePanel.computeMonthList;
+      return _xeUtils.default.chunk(monthList, 4);
+    },
+    computeDayList: function computeDayList() {
+      var $xeDatePanel = this;
+      var reactData = $xeDatePanel.reactData;
+      var selectMonth = reactData.selectMonth,
+        currentDate = reactData.currentDate;
+      var days = [];
+      if (selectMonth && currentDate) {
+        var dateHMSTime = $xeDatePanel.computeDateHMSTime;
+        var weekDatas = $xeDatePanel.computeWeekDatas;
+        var currFullYear = currentDate.getFullYear();
+        var currMonth = currentDate.getMonth();
+        var currDate = currentDate.getDate();
+        var selFullYear = selectMonth.getFullYear();
+        var selMonth = selectMonth.getMonth();
+        var selDay = selectMonth.getDay();
+        var prevOffsetDate = -weekDatas.indexOf(selDay);
+        var startDayDate = new Date(_xeUtils.default.getWhatDay(selectMonth, prevOffsetDate).getTime() + dateHMSTime);
+        for (var index = 0; index < 42; index++) {
+          var date = _xeUtils.default.getWhatDay(startDayDate, index);
+          var itemFullYear = date.getFullYear();
+          var itemMonth = date.getMonth();
+          var itemDate = date.getDate();
+          var isPrev = date < selectMonth;
+          days.push({
+            date: date,
+            isPrev: isPrev,
+            isCurrent: itemFullYear === selFullYear && itemMonth === selMonth,
+            isNow: itemFullYear === currFullYear && itemMonth === currMonth && itemDate === currDate,
+            isNext: !isPrev && selMonth !== itemMonth,
+            label: itemDate
+          });
+        }
+      }
+      return days;
+    },
+    computeDayDatas: function computeDayDatas() {
+      var $xeDatePanel = this;
+      var dayList = $xeDatePanel.computeDayList;
+      return _xeUtils.default.chunk(dayList, 7);
+    },
+    computeWeekDates: function computeWeekDates() {
+      var $xeDatePanel = this;
+      var dayDatas = $xeDatePanel.computeDayDatas;
+      var firstDayOfWeek = $xeDatePanel.computeFirstDayOfWeek;
+      return dayDatas.map(function (list) {
+        var firstItem = list[0];
+        var item = {
+          date: firstItem.date,
+          isWeekNumber: true,
+          isPrev: false,
+          isCurrent: false,
+          isNow: false,
+          isNext: false,
+          label: _xeUtils.default.getYearWeek(firstItem.date, firstDayOfWeek)
+        };
+        return [item].concat(list);
+      });
+    },
+    computeHourList: function computeHourList() {
+      var $xeDatePanel = this;
+      var timeOpts = $xeDatePanel.computeTimeOpts;
+      var hourOptions = timeOpts.hours,
+        hourDisabledMethod = timeOpts.hourDisabledMethod;
+      var list = [];
+      var isTimeOrDateTimeType = $xeDatePanel.computeIsTimeOrDateTimeType;
+      if (isTimeOrDateTimeType) {
+        if (hourOptions && hourOptions.length) {
+          hourOptions.forEach(function (item) {
+            if (_xeUtils.default.isNumber(item) || _xeUtils.default.isString(item)) {
+              var hour = _xeUtils.default.toNumber(item);
+              list.push({
+                value: hour,
+                label: ('' + hour).padStart(2, '0'),
+                disabled: !!(hourDisabledMethod && hourDisabledMethod({
+                  hour: hour
+                }))
+              });
+            } else if (item) {
+              var _hour = _xeUtils.default.toNumber(item.value);
+              list.push({
+                value: _hour,
+                label: ('' + (item.label || _hour)).padStart(2, '0'),
+                disabled: _xeUtils.default.isBoolean(item.disabled) ? item.disabled : !!(hourDisabledMethod && hourDisabledMethod({
+                  hour: _hour
+                }))
+              });
+            }
+          });
+        } else {
+          for (var index = 0; index < 24; index++) {
+            var hour = index;
+            list.push({
+              value: hour,
+              label: ('' + hour).padStart(2, '0'),
+              disabled: !!(hourDisabledMethod && hourDisabledMethod({
+                hour: hour
+              }))
+            });
+          }
+        }
+      }
+      return list;
+    },
+    computeMinuteList: function computeMinuteList() {
+      var $xeDatePanel = this;
+      var timeOpts = $xeDatePanel.computeTimeOpts;
+      var minuteOptions = timeOpts.minutes,
+        minuteDisabledMethod = timeOpts.minuteDisabledMethod;
+      var list = [];
+      var isTimeOrDateTimeType = $xeDatePanel.computeIsTimeOrDateTimeType;
+      if (isTimeOrDateTimeType) {
+        if (minuteOptions && minuteOptions.length) {
+          minuteOptions.forEach(function (item) {
+            if (_xeUtils.default.isNumber(item) || _xeUtils.default.isString(item)) {
+              var minute = _xeUtils.default.toNumber(item);
+              list.push({
+                value: minute,
+                label: ('' + minute).padStart(2, '0'),
+                disabled: !!(minuteDisabledMethod && minuteDisabledMethod({
+                  minute: minute
+                }))
+              });
+            } else if (item) {
+              var _minute = _xeUtils.default.toNumber(item.value);
+              list.push({
+                value: _minute,
+                label: ('' + (item.label || _minute)).padStart(2, '0'),
+                disabled: _xeUtils.default.isBoolean(item.disabled) ? item.disabled : !!(minuteDisabledMethod && minuteDisabledMethod({
+                  minute: _minute
+                }))
+              });
+            }
+          });
+        } else {
+          for (var index = 0; index < 60; index++) {
+            var minute = index;
+            list.push({
+              value: minute,
+              label: ('' + minute).padStart(2, '0'),
+              disabled: !!(minuteDisabledMethod && minuteDisabledMethod({
+                minute: minute
+              }))
+            });
+          }
+        }
+      }
+      return list;
+    },
+    computeHasTimeMinute: function computeHasTimeMinute() {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var timeFormat = props.timeFormat;
+      var dateValueFormat = $xeDatePanel.computeDateValueFormat;
+      return !/HH/.test(timeFormat || dateValueFormat) || /mm/.test(timeFormat || dateValueFormat);
+    },
+    computeHasTimeSecond: function computeHasTimeSecond() {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var timeFormat = props.timeFormat;
+      var dateValueFormat = $xeDatePanel.computeDateValueFormat;
+      return !/HH/.test(timeFormat || dateValueFormat) || /ss/.test(timeFormat || dateValueFormat);
+    },
+    computeSecondList: function computeSecondList() {
+      var $xeDatePanel = this;
+      var timeOpts = $xeDatePanel.computeTimeOpts;
+      var secondOptions = timeOpts.seconds,
+        secondDisabledMethod = timeOpts.secondDisabledMethod;
+      var list = [];
+      var isTimeOrDateTimeType = $xeDatePanel.computeIsTimeOrDateTimeType;
+      if (isTimeOrDateTimeType) {
+        if (secondOptions && secondOptions.length) {
+          secondOptions.forEach(function (item) {
+            if (_xeUtils.default.isNumber(item) || _xeUtils.default.isString(item)) {
+              var second = _xeUtils.default.toNumber(item);
+              list.push({
+                value: second,
+                label: ('' + second).padStart(2, '0'),
+                disabled: !!(secondDisabledMethod && secondDisabledMethod({
+                  second: second
+                }))
+              });
+            } else if (item) {
+              var _second = _xeUtils.default.toNumber(item.value);
+              list.push({
+                value: _second,
+                label: ('' + (item.label || _second)).padStart(2, '0'),
+                disabled: _xeUtils.default.isBoolean(item.disabled) ? item.disabled : !!(secondDisabledMethod && secondDisabledMethod({
+                  second: _second
+                }))
+              });
+            }
+          });
+        } else {
+          for (var index = 0; index < 60; index++) {
+            var second = index;
+            list.push({
+              value: second,
+              label: ('' + second).padStart(2, '0'),
+              disabled: !!(secondDisabledMethod && secondDisabledMethod({
+                second: second
+              }))
+            });
+          }
+        }
+      }
+      return list;
+    }
+  }),
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent: function dispatchEvent(type, params, evnt) {
+      var $xeDatePanel = this;
+      $xeDatePanel.$emit(type, (0, _ui.createEvent)(evnt, {
+        $datePanel: $xeDatePanel
+      }, params));
+    },
+    emitModel: function emitModel(value) {
+      var $xeDatePanel = this;
+      var reactData = $xeDatePanel.reactData;
+      var _events = $xeDatePanel._events;
+      reactData.inputValue = value;
+      if (_events && _events.modelValue) {
+        $xeDatePanel.$emit('modelValue', value);
+      } else {
+        $xeDatePanel.$emit('model-value', value);
+      }
+    },
+    updateModelValue: function updateModelValue(modelValue) {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var reactData = $xeDatePanel.reactData;
+      var type = props.type;
+      var dateValueFormat = $xeDatePanel.computeDateValueFormat;
+      var inpDate = (0, _util.parseDateValue)(modelValue, type, {
+        valueFormat: dateValueFormat
+      });
+      reactData.inputValue = inpDate;
+      reactData.inputLabel = inpDate;
+      $xeDatePanel.dateOpenPanel();
+    },
+    parseDate: function parseDate(value, format) {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var type = props.type,
+        multiple = props.multiple;
+      if (type === 'time') {
+        return (0, _util.toStringTimeDate)(_xeUtils.default.isArray(value) ? _xeUtils.default.last(value) : value);
+      }
+      if (_xeUtils.default.isArray(value)) {
+        return _xeUtils.default.toStringDate(_xeUtils.default.last(value), format);
+      }
+      if (_xeUtils.default.isString(value)) {
+        return _xeUtils.default.toStringDate(multiple ? _xeUtils.default.last(value.split(',')) : value, format);
+      }
+      return _xeUtils.default.toStringDate(value, format);
+    },
+    dateRevert: function dateRevert() {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var reactData = $xeDatePanel.reactData;
+      var label = props.multiple ? $xeDatePanel.computeDateMultipleLabel : reactData.datePanelLabel;
+      reactData.inputLabel = label;
+      $xeDatePanel.dispatchEvent('revert', {
+        label: label
+      }, null);
+    },
+    afterCheckValue: function afterCheckValue(inpVal) {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var reactData = $xeDatePanel.reactData;
+      var type = props.type;
+      var inputLabel = reactData.inputLabel,
+        datetimePanelValue = reactData.datetimePanelValue;
+      var dateLabelFormat = $xeDatePanel.computeDateLabelFormat;
+      var dateStartDate = $xeDatePanel.computeDateStartDate;
+      var dateEndDate = $xeDatePanel.computeDateEndDate;
+      if (inpVal) {
+        var inpDateVal = $xeDatePanel.parseDate(inpVal, dateLabelFormat);
+        if (_xeUtils.default.isValidDate(inpDateVal)) {
+          if (type === 'time') {
+            inpDateVal = _xeUtils.default.toDateString(inpDateVal, dateLabelFormat);
+            if (inputLabel !== inpDateVal) {
+              $xeDatePanel.handleChange(inpDateVal, {
+                type: 'check'
+              });
+            }
+            reactData.inputLabel = inpDateVal;
+          } else {
+            if (dateEndDate && inpDateVal > dateEndDate) {
+              inpDateVal = dateEndDate;
+            }
+            if (dateStartDate && inpDateVal < dateStartDate) {
+              inpDateVal = dateStartDate;
+            }
+            var isChange = false;
+            var firstDayOfWeek = $xeDatePanel.computeFirstDayOfWeek;
+            if (type === 'datetime') {
+              var dateValue = $xeDatePanel.computeDateValue;
+              if (inpVal !== _xeUtils.default.toDateString(dateValue, dateLabelFormat) || inpVal !== _xeUtils.default.toDateString(inpDateVal, dateLabelFormat)) {
+                isChange = true;
+                if (datetimePanelValue) {
+                  datetimePanelValue.setHours(inpDateVal.getHours());
+                  datetimePanelValue.setMinutes(inpDateVal.getMinutes());
+                  datetimePanelValue.setSeconds(inpDateVal.getSeconds());
+                }
+              }
+            } else {
+              isChange = true;
+            }
+            reactData.inputLabel = _xeUtils.default.toDateString(inpDateVal, dateLabelFormat, {
+              firstDay: firstDayOfWeek
+            });
+            if (isChange) {
+              $xeDatePanel.dateChange(inpDateVal);
+            }
+          }
+        } else {
+          $xeDatePanel.dateRevert();
+        }
+      } else {
+        $xeDatePanel.handleChange('', {
+          type: 'check'
+        });
+      }
+    },
+    handleChange: function handleChange(value, evnt, params) {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var reactData = $xeDatePanel.reactData;
+      var type = props.type,
+        modelValue = props.value,
+        valueFormat = props.valueFormat;
+      var dateValueFormat = $xeDatePanel.computeDateValueFormat;
+      reactData.inputLabel = value;
+      if ((0, _util.hasTimestampValueType)(valueFormat)) {
+        var dateVal = (0, _util.parseDateValue)(value, type, {
+          valueFormat: dateValueFormat
+        });
+        var timeNum = dateVal ? dateVal.getTime() : null;
+        $xeDatePanel.emitModel(timeNum);
+        if (modelValue !== timeNum) {
+          $xeDatePanel.dispatchEvent('change', {
+            value: timeNum,
+            currValue: params ? params.currValue : ''
+          }, evnt);
+        }
+      } else if ((0, _util.hasDateValueType)(valueFormat)) {
+        var _dateVal = (0, _util.parseDateValue)(value, type, {
+          valueFormat: dateValueFormat
+        });
+        $xeDatePanel.emitModel(_dateVal);
+        if (modelValue && _dateVal ? _xeUtils.default.toStringDate(modelValue).getTime() !== _dateVal.getTime() : modelValue !== _dateVal) {
+          $xeDatePanel.dispatchEvent('change', {
+            value: _dateVal,
+            currValue: params ? params.currValue : ''
+          }, evnt);
+        }
+      } else {
+        $xeDatePanel.emitModel(value);
+        if (_xeUtils.default.toValueString(modelValue) !== value) {
+          $xeDatePanel.dispatchEvent('change', {
+            value: value,
+            currValue: params ? params.currValue : ''
+          }, evnt);
+        }
+      }
+    },
+    hidePanel: function hidePanel() {
+      var $xeDatePanel = this;
+      var reactData = $xeDatePanel.reactData;
+      var internalData = $xeDatePanel.internalData;
+      return new Promise(function (resolve) {
+        reactData.visiblePanel = false;
+        internalData.hpTimeout = setTimeout(function () {
+          reactData.isAniVisible = false;
+          resolve();
+        }, 350);
+      });
+    },
+    dateParseValue: function dateParseValue(val) {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var reactData = $xeDatePanel.reactData;
+      var type = props.type;
+      var dateLabelFormat = $xeDatePanel.computeDateLabelFormat;
+      var dateValueFormat = $xeDatePanel.computeDateValueFormat;
+      var firstDayOfWeek = $xeDatePanel.computeFirstDayOfWeek;
+      var dateObj = (0, _util.parseDateObj)(val, type, {
+        valueFormat: dateValueFormat,
+        labelFormat: dateLabelFormat,
+        firstDay: firstDayOfWeek
+      });
+      reactData.datePanelValue = dateObj.value;
+      reactData.datePanelLabel = dateObj.label;
+    },
+    /**
+     * 值变化时处理
+     */
+    changeValue: function changeValue() {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var reactData = $xeDatePanel.reactData;
+      var isDatePanelType = $xeDatePanel.computeIsDatePanelType;
+      var inputLabel = reactData.inputLabel;
+      if (isDatePanelType) {
+        $xeDatePanel.dateParseValue(inputLabel);
+        reactData.inputLabel = props.multiple ? $xeDatePanel.computeDateMultipleLabel : reactData.datePanelLabel;
+      }
+    },
+    /**
+     * 检查初始值
+     */
+    initValue: function initValue() {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var modelValue = props.value;
+      var isDatePanelType = $xeDatePanel.computeIsDatePanelType;
+      $xeDatePanel.updateModelValue(modelValue);
+      if (isDatePanelType) {
+        $xeDatePanel.changeValue();
+      }
+    },
+    dateCheckMonth: function dateCheckMonth(date) {
+      var $xeDatePanel = this;
+      var reactData = $xeDatePanel.reactData;
+      var firstDayOfWeek = $xeDatePanel.computeFirstDayOfWeek;
+      var weekNum = _xeUtils.default.getYearWeek(date, firstDayOfWeek);
+      var weekStartDate = _xeUtils.default.getWhatWeek(date, 0, firstDayOfWeek, firstDayOfWeek);
+      var month = _xeUtils.default.getWhatMonth(weekNum === 1 ? _xeUtils.default.getWhatDay(weekStartDate, 6) : date, 0, 'first');
+      if (!_xeUtils.default.isEqual(month, reactData.selectMonth)) {
+        reactData.selectMonth = month;
+      }
+    },
+    dateChange: function dateChange(date, isReload) {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var reactData = $xeDatePanel.reactData;
+      var modelValue = props.value,
+        multiple = props.multiple,
+        valueSort = props.valueSort;
+      var datetimePanelValue = reactData.datetimePanelValue;
+      var isTimeType = $xeDatePanel.computeIsTimeType;
+      var isTimeOrDateTimeType = $xeDatePanel.computeIsTimeOrDateTimeType;
+      var dateValueFormat = $xeDatePanel.computeDateValueFormat;
+      var firstDayOfWeek = $xeDatePanel.computeFirstDayOfWeek;
+      if (props.type === 'week') {
+        var sWeek = _xeUtils.default.toNumber(props.selectDay);
+        date = _xeUtils.default.getWhatWeek(date, 0, sWeek, firstDayOfWeek);
+      } else if (isTimeOrDateTimeType) {
+        if (datetimePanelValue) {
+          date.setHours(datetimePanelValue.getHours());
+          date.setMinutes(datetimePanelValue.getMinutes());
+          date.setSeconds(datetimePanelValue.getSeconds());
+        }
+      }
+      var inpVal = _xeUtils.default.toDateString(date, dateValueFormat, {
+        firstDay: firstDayOfWeek
+      });
+      $xeDatePanel.dateCheckMonth(date);
+      if (!isTimeType && multiple) {
+        var overCount = $xeDatePanel.computeOverCount;
+        // 如果为多选
+        if (isTimeOrDateTimeType) {
+          // 如果是datetime特殊类型
+          var dateListValue = isReload ? [] : _toConsumableArray($xeDatePanel.computeDateListValue);
+          var datetimeRest = [];
+          var eqIndex = _xeUtils.default.findIndexOf(dateListValue, function (val) {
+            return _xeUtils.default.isDateSame(date, val, 'yyyyMMdd');
+          });
+          if (eqIndex === -1) {
+            if (overCount) {
+              // 如果超出最大多选数量
+              return;
+            }
+            dateListValue.push(date);
+          } else {
+            dateListValue.splice(eqIndex, 1);
+          }
+          dateListValue.forEach(function (item) {
+            if (item) {
+              if (datetimePanelValue) {
+                item.setHours(datetimePanelValue.getHours());
+                item.setMinutes(datetimePanelValue.getMinutes());
+                item.setSeconds(datetimePanelValue.getSeconds());
+              }
+              datetimeRest.push(item);
+            }
+          });
+          // 排序
+          if (valueSort) {
+            datetimeRest = datetimeRest.sort(function (a, b) {
+              return a.getTime() - b.getTime();
+            });
+          }
+          $xeDatePanel.handleChange(datetimeRest.map(function (date) {
+            return _xeUtils.default.toDateString(date, dateValueFormat);
+          }).join(','), {
+            type: 'update'
+          }, {
+            currValue: inpVal
+          });
+        } else {
+          var dateMultipleValue = isReload ? [] : $xeDatePanel.computeDateMultipleValue;
+          var dateRest = [];
+          // 如果是日期类型
+          if (dateMultipleValue.some(function (val) {
+            return _xeUtils.default.isEqual(val, inpVal);
+          })) {
+            dateRest = dateMultipleValue.filter(function (val) {
+              return !_xeUtils.default.isEqual(val, inpVal);
+            });
+          } else {
+            if (overCount) {
+              // 如果超出最大多选数量
+              return;
+            }
+            dateRest = dateMultipleValue.concat([inpVal]);
+          }
+          // 排序
+          if (valueSort) {
+            dateRest = dateRest.sort();
+          }
+          $xeDatePanel.handleChange(dateRest.join(','), {
+            type: 'update'
+          }, {
+            currValue: inpVal
+          });
+        }
+      } else {
+        // 如果为单选
+        if (!_xeUtils.default.isEqual(modelValue, inpVal)) {
+          $xeDatePanel.handleChange(inpVal, {
+            type: 'update'
+          }, {
+            currValue: inpVal
+          });
+        }
+      }
+    },
+    // 日期
+    dateMonthHandle: function dateMonthHandle(date, offsetMonth) {
+      var $xeDatePanel = this;
+      var reactData = $xeDatePanel.reactData;
+      var firstDayOfWeek = $xeDatePanel.computeFirstDayOfWeek;
+      var weekNum = _xeUtils.default.getYearWeek(date, firstDayOfWeek);
+      var weekStartDate = _xeUtils.default.getWhatWeek(date, 0, firstDayOfWeek, firstDayOfWeek);
+      var month = _xeUtils.default.getWhatMonth(weekNum === 1 ? _xeUtils.default.getWhatDay(weekStartDate, 6) : date, offsetMonth, 'first');
+      reactData.selectMonth = month;
+    },
+    dateNowHandle: function dateNowHandle() {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var reactData = $xeDatePanel.reactData;
+      var type = props.type;
+      var firstDayOfWeek = $xeDatePanel.computeFirstDayOfWeek;
+      var currentDate = new Date();
+      switch (type) {
+        case 'week':
+          currentDate = _xeUtils.default.getWhatWeek(currentDate, 0, firstDayOfWeek);
+          break;
+        case 'datetime':
+          currentDate = new Date();
+          reactData.datetimePanelValue = new Date();
+          break;
+        default:
+          currentDate = _xeUtils.default.getWhatDay(Date.now(), 0, 'first');
+          break;
+      }
+      reactData.currentDate = currentDate;
+      $xeDatePanel.dateMonthHandle(currentDate, 0);
+    },
+    dateToggleYearTypeEvent: function dateToggleYearTypeEvent() {
+      var $xeDatePanel = this;
+      var reactData = $xeDatePanel.reactData;
+      reactData.datePanelType = 'year';
+    },
+    dateToggleMonthTypeEvent: function dateToggleMonthTypeEvent() {
+      var $xeDatePanel = this;
+      var reactData = $xeDatePanel.reactData;
+      var datePanelType = reactData.datePanelType;
+      if (datePanelType === 'month' || datePanelType === 'quarter') {
+        datePanelType = 'year';
+      } else {
+        datePanelType = 'month';
+      }
+      reactData.datePanelType = datePanelType;
+    },
+    datePrevEvent: function datePrevEvent(evnt) {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var reactData = $xeDatePanel.reactData;
+      var internalData = $xeDatePanel.internalData;
+      var type = props.type;
+      var datePanelType = reactData.datePanelType,
+        selectMonth = reactData.selectMonth,
+        inputLabel = reactData.inputLabel;
+      var yearSize = internalData.yearSize;
+      var value = inputLabel;
+      var isDisabledPrevDateBtn = $xeDatePanel.computeIsDisabledPrevDateBtn;
+      if (!isDisabledPrevDateBtn) {
+        var viewDate;
+        if (type === 'year') {
+          viewDate = _xeUtils.default.getWhatYear(selectMonth, -yearSize, 'first');
+        } else if (type === 'month' || type === 'quarter') {
+          if (datePanelType === 'year') {
+            viewDate = _xeUtils.default.getWhatYear(selectMonth, -yearSize, 'first');
+          } else {
+            viewDate = _xeUtils.default.getWhatYear(selectMonth, -1, 'first');
+          }
+        } else {
+          if (datePanelType === 'year') {
+            viewDate = _xeUtils.default.getWhatYear(selectMonth, -yearSize, 'first');
+          } else if (datePanelType === 'month') {
+            viewDate = _xeUtils.default.getWhatYear(selectMonth, -1, 'first');
+          } else {
+            viewDate = _xeUtils.default.getWhatMonth(selectMonth, -1, 'first');
+          }
+        }
+        reactData.selectMonth = viewDate;
+        $xeDatePanel.dispatchEvent('date-prev', {
+          viewType: datePanelType,
+          viewDate: viewDate,
+          value: value,
+          type: type
+        }, evnt);
+      }
+    },
+    dateTodayMonthEvent: function dateTodayMonthEvent(evnt) {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var reactData = $xeDatePanel.reactData;
+      $xeDatePanel.dateNowHandle();
+      $xeDatePanel.dateChange(reactData.currentDate, true);
+      if (!props.multiple) {
+        $xeDatePanel.hidePanel();
+      }
+      $xeDatePanel.dispatchEvent('date-today', {
+        viewType: reactData.datePanelType,
+        type: props.type,
+        viewDate: reactData.selectMonth
+      }, evnt);
+    },
+    dateNextEvent: function dateNextEvent(evnt) {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var reactData = $xeDatePanel.reactData;
+      var internalData = $xeDatePanel.internalData;
+      var type = props.type;
+      var datePanelType = reactData.datePanelType,
+        selectMonth = reactData.selectMonth,
+        inputLabel = reactData.inputLabel;
+      var yearSize = internalData.yearSize;
+      var value = inputLabel;
+      var isDisabledNextDateBtn = $xeDatePanel.computeIsDisabledNextDateBtn;
+      if (!isDisabledNextDateBtn) {
+        var viewDate;
+        if (type === 'year') {
+          viewDate = _xeUtils.default.getWhatYear(selectMonth, yearSize, 'first');
+        } else if (type === 'month' || type === 'quarter') {
+          if (datePanelType === 'year') {
+            viewDate = _xeUtils.default.getWhatYear(selectMonth, yearSize, 'first');
+          } else {
+            viewDate = _xeUtils.default.getWhatYear(selectMonth, 1, 'first');
+          }
+        } else {
+          if (datePanelType === 'year') {
+            viewDate = _xeUtils.default.getWhatYear(selectMonth, yearSize, 'first');
+          } else if (datePanelType === 'month') {
+            viewDate = _xeUtils.default.getWhatYear(selectMonth, 1, 'first');
+          } else {
+            viewDate = _xeUtils.default.getWhatMonth(selectMonth, 1, 'first');
+          }
+        }
+        reactData.selectMonth = viewDate;
+        $xeDatePanel.dispatchEvent('date-next', {
+          viewType: datePanelType,
+          value: value,
+          type: type,
+          viewDate: viewDate
+        }, evnt);
+      }
+    },
+    isRangeDisabled: function isRangeDisabled(item) {
+      var $xeDatePanel = this;
+      var dateStartTime = $xeDatePanel.computeDateStartDate;
+      var dateEndTime = $xeDatePanel.computeDateEndDate;
+      var date = item.date;
+      if (dateStartTime && dateStartTime.getTime() > date.getTime()) {
+        return true;
+      }
+      if (dateEndTime && dateEndTime.getTime() < date.getTime()) {
+        return true;
+      }
+      return false;
+    },
+    isDateDisabled: function isDateDisabled(item) {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var reactData = $xeDatePanel.reactData;
+      var disabledMethod = props.disabledMethod;
+      var datePanelType = reactData.datePanelType;
+      var date = item.date;
+      if (disabledMethod) {
+        return disabledMethod({
+          type: datePanelType,
+          viewType: datePanelType,
+          date: date,
+          $datePanel: $xeDatePanel
+        });
+      }
+      return false;
+    },
+    hasAllDisabled: function hasAllDisabled(item) {
+      var $xeDatePanel = this;
+      return $xeDatePanel.isRangeDisabled(item) || $xeDatePanel.isDateDisabled(item);
+    },
+    dateSelectItem: function dateSelectItem(date) {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var reactData = $xeDatePanel.reactData;
+      var type = props.type,
+        multiple = props.multiple;
+      var datePanelType = reactData.datePanelType;
+      if (type === 'month') {
+        if (datePanelType === 'year') {
+          reactData.datePanelType = 'month';
+          $xeDatePanel.dateCheckMonth(date);
+        } else {
+          $xeDatePanel.dateChange(date);
+          if (!multiple) {
+            $xeDatePanel.hidePanel();
+          }
+        }
+      } else if (type === 'year') {
+        $xeDatePanel.dateChange(date);
+        if (!multiple) {
+          $xeDatePanel.hidePanel();
+        }
+      } else if (type === 'quarter') {
+        if (datePanelType === 'year') {
+          reactData.datePanelType = 'quarter';
+          $xeDatePanel.dateCheckMonth(date);
+        } else {
+          $xeDatePanel.dateChange(date);
+          if (!multiple) {
+            $xeDatePanel.hidePanel();
+          }
+        }
+      } else {
+        if (datePanelType === 'month') {
+          reactData.datePanelType = type === 'week' ? type : 'day';
+          $xeDatePanel.dateCheckMonth(date);
+        } else if (datePanelType === 'year') {
+          reactData.datePanelType = 'month';
+          $xeDatePanel.dateCheckMonth(date);
+        } else {
+          $xeDatePanel.dateChange(date);
+          if (type === 'datetime') {
+            // 日期带时间
+          } else {
+            if (!multiple) {
+              $xeDatePanel.hidePanel();
+            }
+          }
+        }
+      }
+    },
+    dateSelectEvent: function dateSelectEvent(item) {
+      var $xeDatePanel = this;
+      if (!$xeDatePanel.hasAllDisabled(item)) {
+        $xeDatePanel.dateSelectItem(item.date);
+      }
+    },
+    dateMoveDay: function dateMoveDay(offsetDay) {
+      var $xeDatePanel = this;
+      if (!$xeDatePanel.hasAllDisabled({
+        date: offsetDay
+      })) {
+        var dayList = $xeDatePanel.computeDayList;
+        if (!dayList.some(function (item) {
+          return _xeUtils.default.isDateSame(item.date, offsetDay, 'yyyyMMdd');
+        })) {
+          $xeDatePanel.dateCheckMonth(offsetDay);
+        }
+        $xeDatePanel.dateParseValue(offsetDay);
+      }
+    },
+    dateMoveYear: function dateMoveYear(offsetYear) {
+      var $xeDatePanel = this;
+      if (!$xeDatePanel.hasAllDisabled({
+        date: offsetYear
+      })) {
+        var yearList = $xeDatePanel.computeYearList;
+        if (!yearList.some(function (item) {
+          return _xeUtils.default.isDateSame(item.date, offsetYear, 'yyyy');
+        })) {
+          $xeDatePanel.dateCheckMonth(offsetYear);
+        }
+        $xeDatePanel.dateParseValue(offsetYear);
+      }
+    },
+    dateMoveQuarter: function dateMoveQuarter(offsetQuarter) {
+      var $xeDatePanel = this;
+      if (!$xeDatePanel.hasAllDisabled({
+        date: offsetQuarter
+      })) {
+        var quarterList = $xeDatePanel.computeQuarterList;
+        if (!quarterList.some(function (item) {
+          return _xeUtils.default.isDateSame(item.date, offsetQuarter, 'yyyyq');
+        })) {
+          $xeDatePanel.dateCheckMonth(offsetQuarter);
+        }
+        $xeDatePanel.dateParseValue(offsetQuarter);
+      }
+    },
+    dateMoveMonth: function dateMoveMonth(offsetMonth) {
+      var $xeDatePanel = this;
+      if (!$xeDatePanel.hasAllDisabled({
+        date: offsetMonth
+      })) {
+        var monthList = $xeDatePanel.computeMonthList;
+        if (!monthList.some(function (item) {
+          return _xeUtils.default.isDateSame(item.date, offsetMonth, 'yyyyMM');
+        })) {
+          $xeDatePanel.dateCheckMonth(offsetMonth);
+        }
+        $xeDatePanel.dateParseValue(offsetMonth);
+      }
+    },
+    dateMouseenterEvent: function dateMouseenterEvent(item) {
+      var $xeDatePanel = this;
+      var reactData = $xeDatePanel.reactData;
+      if (!$xeDatePanel.hasAllDisabled(item)) {
+        var datePanelType = reactData.datePanelType;
+        if (datePanelType === 'month') {
+          $xeDatePanel.dateMoveMonth(item.date);
+        } else if (datePanelType === 'quarter') {
+          $xeDatePanel.dateMoveQuarter(item.date);
+        } else if (datePanelType === 'year') {
+          $xeDatePanel.dateMoveYear(item.date);
+        } else {
+          $xeDatePanel.dateMoveDay(item.date);
+        }
+      }
+    },
+    dateMouseleaveEvent: function dateMouseleaveEvent() {
+      var $xeDatePanel = this;
+      var reactData = $xeDatePanel.reactData;
+      reactData.datePanelValue = null;
+    },
+    updateTimePos: function updateTimePos(liElem) {
+      if (liElem) {
+        var height = liElem.offsetHeight;
+        var ulElem = liElem.parentNode;
+        ulElem.scrollTop = liElem.offsetTop - height * 4;
+      }
+    },
+    dateTimeChangeEvent: function dateTimeChangeEvent(evnt) {
+      var $xeDatePanel = this;
+      var reactData = $xeDatePanel.reactData;
+      var datetimePanelValue = reactData.datetimePanelValue;
+      reactData.datetimePanelValue = datetimePanelValue ? new Date(datetimePanelValue.getTime()) : new Date();
+      $xeDatePanel.updateTimePos(evnt.currentTarget);
+    },
+    dateHourEvent: function dateHourEvent(evnt, item) {
+      var $xeDatePanel = this;
+      var reactData = $xeDatePanel.reactData;
+      var datetimePanelValue = reactData.datetimePanelValue;
+      if (!item.disabled) {
+        if (datetimePanelValue) {
+          datetimePanelValue.setHours(item.value);
+        }
+        $xeDatePanel.dateTimeChangeEvent(evnt);
+      }
+    },
+    dateConfirmEvent: function dateConfirmEvent(evnt) {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var reactData = $xeDatePanel.reactData;
+      var multiple = props.multiple;
+      var datetimePanelValue = reactData.datetimePanelValue;
+      var dateValue = $xeDatePanel.computeDateValue;
+      var isTimeType = $xeDatePanel.computeIsTimeType;
+      var isTimeOrDateTimeType = $xeDatePanel.computeIsTimeOrDateTimeType;
+      if (isTimeOrDateTimeType) {
+        var dateValueFormat = $xeDatePanel.computeDateValueFormat;
+        if (!isTimeType && multiple) {
+          // 如果为多选
+          var dateMultipleValue = $xeDatePanel.computeDateMultipleValue;
+          var dateListValue = $xeDatePanel.computeDateListValue;
+          if (isTimeOrDateTimeType) {
+            // 如果是datetime特殊类型
+            var listVals = dateListValue.length ? _toConsumableArray(dateListValue) : [];
+            var datetimeRest = [];
+            listVals.forEach(function (item) {
+              if (item) {
+                if (datetimePanelValue) {
+                  item.setHours(datetimePanelValue.getHours());
+                  item.setMinutes(datetimePanelValue.getMinutes());
+                  item.setSeconds(datetimePanelValue.getSeconds());
+                }
+                datetimeRest.push(item);
+              }
+            });
+            $xeDatePanel.handleChange(datetimeRest.map(function (date) {
+              return _xeUtils.default.toDateString(date, dateValueFormat);
+            }).join(','), {
+              type: 'update'
+            });
+          } else {
+            // 如果是日期类型
+            $xeDatePanel.handleChange(dateMultipleValue.join(','), {
+              type: 'update'
+            });
+          }
+        } else {
+          $xeDatePanel.dateChange(dateValue || reactData.currentDate);
+        }
+      }
+      $xeDatePanel.hidePanel();
+      $xeDatePanel.dispatchEvent('confirm', {}, evnt);
+    },
+    dateMinuteEvent: function dateMinuteEvent(evnt, item) {
+      var $xeDatePanel = this;
+      var reactData = $xeDatePanel.reactData;
+      var datetimePanelValue = reactData.datetimePanelValue;
+      if (!item.disabled) {
+        if (datetimePanelValue) {
+          datetimePanelValue.setMinutes(item.value);
+        }
+        $xeDatePanel.dateTimeChangeEvent(evnt);
+      }
+    },
+    dateSecondEvent: function dateSecondEvent(evnt, item) {
+      var $xeDatePanel = this;
+      var reactData = $xeDatePanel.reactData;
+      var datetimePanelValue = reactData.datetimePanelValue;
+      if (!item.disabled) {
+        if (datetimePanelValue) {
+          datetimePanelValue.setSeconds(item.value);
+        }
+        $xeDatePanel.dateTimeChangeEvent(evnt);
+      }
+    },
+    dateOpenPanel: function dateOpenPanel() {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var reactData = $xeDatePanel.reactData;
+      var type = props.type,
+        defaultDate = props.defaultDate,
+        defaultTime = props.defaultTime;
+      var isTimeOrDateTimeType = $xeDatePanel.computeIsTimeOrDateTimeType;
+      var dateValue = $xeDatePanel.computeDateValue;
+      if (['year', 'quarter', 'month', 'week'].indexOf(type) > -1) {
+        reactData.datePanelType = type;
+      } else {
+        reactData.datePanelType = 'day';
+      }
+      reactData.currentDate = _xeUtils.default.getWhatDay(Date.now(), 0, 'first');
+      if (dateValue) {
+        $xeDatePanel.dateMonthHandle(dateValue, 0);
+        $xeDatePanel.dateParseValue(dateValue);
+      } else {
+        if (defaultDate) {
+          // 面板默认日期仅支持解析 yyyy-MM-dd
+          var defDate = $xeDatePanel.parseDate(defaultDate, 'yyyy-MM-dd');
+          if (_xeUtils.default.isValidDate(defDate)) {
+            $xeDatePanel.dateMonthHandle(defDate, 0);
+          } else {
+            $xeDatePanel.dateNowHandle();
+          }
+        } else {
+          $xeDatePanel.dateNowHandle();
+        }
+      }
+      if (isTimeOrDateTimeType) {
+        var dtPanelValue = reactData.datePanelValue;
+        if (!dtPanelValue) {
+          dtPanelValue = _xeUtils.default.getWhatDay(Date.now(), 0, 'first');
+          if (defaultTime) {
+            var defTime = (0, _util.toStringTimeDate)(defaultTime);
+            if (_xeUtils.default.isValidDate(defTime)) {
+              dtPanelValue.setHours(defTime.getHours());
+              dtPanelValue.setMinutes(defTime.getMinutes());
+              dtPanelValue.setSeconds(defTime.getSeconds());
+            }
+          }
+        }
+        reactData.datetimePanelValue = dtPanelValue;
+        $xeDatePanel.$nextTick(function () {
+          var timeBodyElem = $xeDatePanel.$refs.refInputTimeBody;
+          _xeUtils.default.arrayEach(timeBodyElem.querySelectorAll('li.is--selected'), function (elem) {
+            $xeDatePanel.updateTimePos(elem);
+          });
+        });
+      }
+    },
+    getModelValue: function getModelValue() {
+      var $xeDatePanel = this;
+      var reactData = $xeDatePanel.reactData;
+      return reactData.inputValue;
+    },
+    getViewType: function getViewType() {
+      var $xeDatePanel = this;
+      var reactData = $xeDatePanel.reactData;
+      var datePanelType = reactData.datePanelType;
+      return datePanelType;
+    },
+    setPanelDate: function setPanelDate(date) {
+      var $xeDatePanel = this;
+      if (date) {
+        $xeDatePanel.dateCheckMonth(date);
+      }
+    },
+    getPanelDate: function getPanelDate() {
+      var $xeDatePanel = this;
+      var reactData = $xeDatePanel.reactData;
+      var selectMonth = reactData.selectMonth;
+      return selectMonth ? new Date(selectMonth.getTime()) : new Date();
+    },
+    checkValue: function checkValue(value) {
+      var $xeDatePanel = this;
+      $xeDatePanel.afterCheckValue(value);
+    },
+    confirmByEvent: function confirmByEvent(evnt) {
+      var $xeDatePanel = this;
+      $xeDatePanel.dateConfirmEvent(evnt);
+    },
+    //
+    // Render
+    //
+    renderDateLabel: function renderDateLabel(h, item, label) {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var reactData = $xeDatePanel.reactData;
+      var festivalMethod = props.festivalMethod;
+      var labelVNs = [];
+      if (festivalMethod) {
+        var datePanelType = reactData.datePanelType;
+        var festivalRest = festivalMethod({
+          type: datePanelType,
+          viewType: datePanelType,
+          date: item.date,
+          $datePanel: $xeDatePanel
+        });
+        var festivalItem = festivalRest ? _xeUtils.default.isString(festivalRest) ? {
+          label: festivalRest
+        } : festivalRest : {};
+        var extraItem = festivalItem.extra ? _xeUtils.default.isString(festivalItem.extra) ? {
+          label: festivalItem.extra
+        } : festivalItem.extra : null;
+        labelVNs.push(h('div', {
+          class: ['vxe-date-panel--label', {
+            'is-notice': festivalItem.notice
+          }]
+        }, extraItem && extraItem.label ? [h('div', {
+          class: 'vxe-date-panel--label--number'
+        }, "".concat(label)), h('div', {
+          class: ['vxe-date-panel--label--extra', extraItem.important ? 'is-important' : '', extraItem.className],
+          style: extraItem.style
+        }, _xeUtils.default.toValueString(extraItem.label))] : "".concat(label)));
+        var festivalLabel = festivalItem.label;
+        if (festivalLabel) {
+          // 默认最多支持3个节日重叠
+          var festivalLabels = _xeUtils.default.toValueString(festivalLabel).split(',');
+          labelVNs.push(h('div', {
+            class: ['vxe-date-panel--festival', festivalItem.important ? 'is-important' : '', festivalItem.className],
+            style: festivalItem.style
+          }, [festivalLabels.length > 1 ? h('div', {
+            class: ['vxe-date-panel--festival--overlap', "overlap--".concat(festivalLabels.length)]
+          }, festivalLabels.map(function (label) {
+            return h('div', label.substring(0, 3));
+          })) : h('div', {
+            class: 'vxe-date-panel--festival--label'
+          }, festivalLabels[0].substring(0, 3))]));
+        }
+      }
+      return labelVNs;
+    },
+    renderDateDayTable: function renderDateDayTable(h) {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var reactData = $xeDatePanel.reactData;
+      var type = props.type,
+        multiple = props.multiple,
+        cellClassName = props.cellClassName;
+      var datePanelType = reactData.datePanelType,
+        datePanelValue = reactData.datePanelValue;
+      var dateValue = $xeDatePanel.computeDateValue;
+      var dateHeaders = $xeDatePanel.computeDateHeaders;
+      var dayDatas = $xeDatePanel.computeDayDatas;
+      var dateListValue = $xeDatePanel.computeDateListValue;
+      var overCount = $xeDatePanel.computeOverCount;
+      var matchFormat = 'yyyyMMdd';
+      return [h('div', {
+        class: ['vxe-date-panel--view-wrapper', "type--".concat(datePanelType)]
+      }, [h('div', {
+        class: 'vxe-date-panel--view-header'
+      }, [h('div', {
+        class: 'vxe-date-panel--view-row'
+      }, dateHeaders.map(function (item) {
+        return h('div', {
+          class: 'vxe-date-panel--view-item',
+          style: {
+            width: "".concat(100 / dateHeaders.length, "%")
+          }
+        }, [h('div', {
+          class: 'vxe-date-panel--view-item-inner'
+        }, [h('div', {
+          class: 'vxe-date-panel--view-item-label'
+        }, item.label)])]);
+      }))]), h('div', {
+        class: 'vxe-date-panel--view-body'
+      }, dayDatas.map(function (rows) {
+        return h('div', {
+          class: 'vxe-date-panel--view-row',
+          style: {
+            height: "".concat(100 / dayDatas.length, "%")
+          }
+        }, rows.map(function (item) {
+          var isSelected = multiple ? dateListValue.some(function (val) {
+            return _xeUtils.default.isDateSame(val, item.date, matchFormat);
+          }) : _xeUtils.default.isDateSame(dateValue, item.date, matchFormat);
+          return h('div', {
+            class: ['vxe-date-panel--view-item', cellClassName ? _xeUtils.default.isFunction(cellClassName) ? "".concat(cellClassName({
+              $datePanel: $xeDatePanel,
+              type: type,
+              viewType: datePanelType,
+              date: item.date
+            }) || '') : "".concat(cellClassName || '') : '', {
+              'is--prev': item.isPrev,
+              'is--current': item.isCurrent,
+              'is--now': item.isNow,
+              'is--next': item.isNext,
+              'is--range-disabled': $xeDatePanel.isRangeDisabled(item),
+              'is--disabled': $xeDatePanel.isDateDisabled(item),
+              'is--selected': isSelected,
+              'is--over': overCount && !isSelected,
+              'is--hover': !overCount && _xeUtils.default.isDateSame(datePanelValue, item.date, matchFormat)
+            }],
+            style: {
+              width: "".concat(100 / rows.length, "%")
+            },
+            on: {
+              click: function click() {
+                return $xeDatePanel.dateSelectEvent(item);
+              },
+              mouseenter: function mouseenter() {
+                return $xeDatePanel.dateMouseenterEvent(item);
+              },
+              mouseleave: $xeDatePanel.dateMouseleaveEvent
+            }
+          }, [h('div', {
+            class: 'vxe-date-panel--view-item-inner'
+          }, $xeDatePanel.renderDateLabel(h, item, item.label))]);
+        }));
+      }))])];
+    },
+    renderDateWeekTable: function renderDateWeekTable(h) {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var reactData = $xeDatePanel.reactData;
+      var type = props.type,
+        multiple = props.multiple,
+        cellClassName = props.cellClassName;
+      var datePanelType = reactData.datePanelType,
+        datePanelValue = reactData.datePanelValue;
+      var dateValue = $xeDatePanel.computeDateValue;
+      var weekHeaders = $xeDatePanel.computeWeekHeaders;
+      var weekDates = $xeDatePanel.computeWeekDates;
+      var dateListValue = $xeDatePanel.computeDateListValue;
+      var overCount = $xeDatePanel.computeOverCount;
+      var matchFormat = 'yyyyMMdd';
+      return [h('div', {
+        class: ['vxe-date-panel--view-wrapper', "type--".concat(datePanelType)]
+      }, [h('div', {
+        class: 'vxe-date-panel--view-header'
+      }, [h('div', {
+        class: 'vxe-date-panel--view-row'
+      }, weekHeaders.map(function (item, rIndex) {
+        return h('div', {
+          class: 'vxe-date-panel--view-item',
+          style: {
+            width: "".concat(rIndex ? 13 : 9, "%")
+          }
+        }, [h('div', {
+          class: 'vxe-date-panel--view-item-inner'
+        }, [h('div', {
+          class: 'vxe-date-panel--view-item-label'
+        }, item.label)])]);
+      }))]), h('div', {
+        class: 'vxe-date-panel--view-body'
+      }, weekDates.map(function (rows) {
+        var isSelected = multiple ? rows.some(function (item) {
+          return dateListValue.some(function (val) {
+            return _xeUtils.default.isDateSame(val, item.date, matchFormat);
+          });
+        }) : rows.some(function (item) {
+          return _xeUtils.default.isDateSame(dateValue, item.date, matchFormat);
+        });
+        var isHover = rows.some(function (item) {
+          return _xeUtils.default.isDateSame(datePanelValue, item.date, matchFormat);
+        });
+        var isNowWeek = rows.some(function (item) {
+          return item.isNow;
+        });
+        return h('div', {
+          class: 'vxe-date-panel--view-row',
+          style: {
+            height: "".concat(100 / weekDates.length, "%")
+          }
+        }, rows.map(function (item, rIndex) {
+          return h('div', {
+            class: ['vxe-date-panel--view-item', cellClassName ? _xeUtils.default.isFunction(cellClassName) ? "".concat(cellClassName({
+              $datePanel: $xeDatePanel,
+              type: type,
+              viewType: datePanelType,
+              date: item.date
+            }) || '') : "".concat(cellClassName || '') : '', {
+              'is--prev': item.isPrev,
+              'is--current': item.isCurrent,
+              'is--now': rIndex ? item.isNow : isNowWeek,
+              'is--next': item.isNext,
+              'is--range-disabled': $xeDatePanel.isRangeDisabled(item),
+              'is--disabled': $xeDatePanel.isDateDisabled(item),
+              'is--selected': isSelected,
+              'is--over': overCount && !isSelected,
+              'is--hover': !overCount && isHover
+            }],
+            style: {
+              width: "".concat(rIndex ? 13 : 9, "%")
+            },
+            on: {
+              click: function click() {
+                return $xeDatePanel.dateSelectEvent(item);
+              },
+              mouseenter: function mouseenter() {
+                return $xeDatePanel.dateMouseenterEvent(item);
+              },
+              mouseleave: $xeDatePanel.dateMouseleaveEvent
+            }
+          }, [h('div', {
+            class: 'vxe-date-panel--view-item-inner'
+          }, $xeDatePanel.renderDateLabel(h, item, item.label))]);
+        }));
+      }))])];
+    },
+    renderDateMonthTable: function renderDateMonthTable(h) {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var reactData = $xeDatePanel.reactData;
+      var type = props.type,
+        multiple = props.multiple,
+        cellClassName = props.cellClassName;
+      var datePanelType = reactData.datePanelType,
+        datePanelValue = reactData.datePanelValue;
+      var dateValue = $xeDatePanel.computeDateValue;
+      var monthDatas = $xeDatePanel.computeMonthDatas;
+      var dateListValue = $xeDatePanel.computeDateListValue;
+      var overCount = $xeDatePanel.computeOverCount;
+      var matchFormat = 'yyyyMM';
+      return [h('div', {
+        class: ['vxe-date-panel--view-wrapper', "type--".concat(datePanelType)]
+      }, [h('div', {
+        class: 'vxe-date-panel--view-body'
+      }, monthDatas.map(function (rows) {
+        return h('div', {
+          class: 'vxe-date-panel--view-row',
+          style: {
+            height: "".concat(100 / monthDatas.length, "%")
+          }
+        }, rows.map(function (item) {
+          var isSelected = multiple ? dateListValue.some(function (val) {
+            return _xeUtils.default.isDateSame(val, item.date, matchFormat);
+          }) : _xeUtils.default.isDateSame(dateValue, item.date, matchFormat);
+          return h('div', {
+            class: ['vxe-date-panel--view-item', cellClassName ? _xeUtils.default.isFunction(cellClassName) ? "".concat(cellClassName({
+              $datePanel: $xeDatePanel,
+              type: type,
+              viewType: datePanelType,
+              date: item.date
+            }) || '') : "".concat(cellClassName || '') : '', {
+              'is--prev': item.isPrev,
+              'is--current': item.isCurrent,
+              'is--now': item.isNow,
+              'is--next': item.isNext,
+              'is--range-disabled': $xeDatePanel.isRangeDisabled(item),
+              'is--disabled': $xeDatePanel.isDateDisabled(item),
+              'is--selected': isSelected,
+              'is--over': overCount && !isSelected,
+              'is--hover': !overCount && _xeUtils.default.isDateSame(datePanelValue, item.date, matchFormat)
+            }],
+            style: {
+              width: "".concat(100 / rows.length, "%")
+            },
+            on: {
+              click: function click() {
+                return $xeDatePanel.dateSelectEvent(item);
+              },
+              mouseenter: function mouseenter() {
+                return $xeDatePanel.dateMouseenterEvent(item);
+              },
+              mouseleave: $xeDatePanel.dateMouseleaveEvent
+            }
+          }, [h('div', {
+            class: 'vxe-date-panel--view-item-inner'
+          }, $xeDatePanel.renderDateLabel(h, item, (0, _ui.getI18n)("vxe.input.date.months.m".concat(item.month))))]);
+        }));
+      }))])];
+    },
+    renderDateQuarterTable: function renderDateQuarterTable(h) {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var reactData = $xeDatePanel.reactData;
+      var type = props.type,
+        multiple = props.multiple,
+        cellClassName = props.cellClassName;
+      var datePanelType = reactData.datePanelType,
+        datePanelValue = reactData.datePanelValue;
+      var dateValue = $xeDatePanel.computeDateValue;
+      var quarterDatas = $xeDatePanel.computeQuarterDatas;
+      var dateListValue = $xeDatePanel.computeDateListValue;
+      var overCount = $xeDatePanel.computeOverCount;
+      var matchFormat = 'yyyyq';
+      return [h('div', {
+        class: ['vxe-date-panel--view-wrapper', "type--".concat(datePanelType)]
+      }, [h('div', {
+        class: 'vxe-date-panel--view-body'
+      }, quarterDatas.map(function (rows) {
+        return h('div', {
+          class: 'vxe-date-panel--view-row',
+          style: {
+            height: "".concat(100 / quarterDatas.length, "%")
+          }
+        }, rows.map(function (item) {
+          var isSelected = multiple ? dateListValue.some(function (val) {
+            return _xeUtils.default.isDateSame(val, item.date, matchFormat);
+          }) : _xeUtils.default.isDateSame(dateValue, item.date, matchFormat);
+          return h('div', {
+            class: ['vxe-date-panel--view-item', cellClassName ? _xeUtils.default.isFunction(cellClassName) ? "".concat(cellClassName({
+              $datePanel: $xeDatePanel,
+              type: type,
+              viewType: datePanelType,
+              date: item.date
+            }) || '') : "".concat(cellClassName || '') : '', {
+              'is--prev': item.isPrev,
+              'is--current': item.isCurrent,
+              'is--now': item.isNow,
+              'is--next': item.isNext,
+              'is--range-disabled': $xeDatePanel.isRangeDisabled(item),
+              'is--disabled': $xeDatePanel.isDateDisabled(item),
+              'is--selected': isSelected,
+              'is--over': overCount && !isSelected,
+              'is--hover': !overCount && _xeUtils.default.isDateSame(datePanelValue, item.date, matchFormat)
+            }],
+            style: {
+              width: "".concat(100 / rows.length, "%")
+            },
+            on: {
+              click: function click() {
+                return $xeDatePanel.dateSelectEvent(item);
+              },
+              mouseenter: function mouseenter() {
+                return $xeDatePanel.dateMouseenterEvent(item);
+              },
+              mouseleave: $xeDatePanel.dateMouseleaveEvent
+            }
+          }, [h('div', {
+            class: 'vxe-date-panel--view-item-inner'
+          }, $xeDatePanel.renderDateLabel(h, item, (0, _ui.getI18n)("vxe.input.date.quarters.q".concat(item.quarter))))]);
+        }));
+      }))])];
+    },
+    renderDateYearTable: function renderDateYearTable(h) {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var reactData = $xeDatePanel.reactData;
+      var type = props.type,
+        multiple = props.multiple,
+        cellClassName = props.cellClassName;
+      var datePanelType = reactData.datePanelType,
+        datePanelValue = reactData.datePanelValue;
+      var dateValue = $xeDatePanel.computeDateValue;
+      var yearDatas = $xeDatePanel.computeYearDatas;
+      var dateListValue = $xeDatePanel.computeDateListValue;
+      var overCount = $xeDatePanel.computeOverCount;
+      var matchFormat = 'yyyy';
+      return [h('div', {
+        class: ['vxe-date-panel--view-wrapper', "type--".concat(datePanelType)]
+      }, [h('div', {
+        class: 'vxe-date-panel--view-body'
+      }, yearDatas.map(function (rows) {
+        return h('div', {
+          class: 'vxe-date-panel--view-row',
+          style: {
+            height: "".concat(100 / yearDatas.length, "%")
+          }
+        }, rows.map(function (item) {
+          var isSelected = multiple ? dateListValue.some(function (val) {
+            return _xeUtils.default.isDateSame(val, item.date, matchFormat);
+          }) : _xeUtils.default.isDateSame(dateValue, item.date, matchFormat);
+          return h('div', {
+            class: ['vxe-date-panel--view-item', cellClassName ? _xeUtils.default.isFunction(cellClassName) ? "".concat(cellClassName({
+              $datePanel: $xeDatePanel,
+              type: type,
+              viewType: datePanelType,
+              date: item.date
+            }) || '') : "".concat(cellClassName || '') : '', {
+              'is--prev': item.isPrev,
+              'is--current': item.isCurrent,
+              'is--now': item.isNow,
+              'is--next': item.isNext,
+              'is--range-disabled': $xeDatePanel.isRangeDisabled(item),
+              'is--disabled': $xeDatePanel.isDateDisabled(item),
+              'is--selected': isSelected,
+              'is--over': overCount && !isSelected,
+              'is--hover': !overCount && _xeUtils.default.isDateSame(datePanelValue, item.date, matchFormat)
+            }],
+            style: {
+              width: "".concat(100 / rows.length, "%")
+            },
+            on: {
+              click: function click() {
+                return $xeDatePanel.dateSelectEvent(item);
+              },
+              mouseenter: function mouseenter() {
+                return $xeDatePanel.dateMouseenterEvent(item);
+              },
+              mouseleave: $xeDatePanel.dateMouseleaveEvent
+            }
+          }, [h('div', {
+            class: 'vxe-date-panel--view-item-inner'
+          }, $xeDatePanel.renderDateLabel(h, item, item.year))]);
+        }));
+      }))])];
+    },
+    renderDateTable: function renderDateTable(h) {
+      var $xeDatePanel = this;
+      var reactData = $xeDatePanel.reactData;
+      var datePanelType = reactData.datePanelType;
+      switch (datePanelType) {
+        case 'week':
+          return $xeDatePanel.renderDateWeekTable(h);
+        case 'month':
+          return $xeDatePanel.renderDateMonthTable(h);
+        case 'quarter':
+          return $xeDatePanel.renderDateQuarterTable(h);
+        case 'year':
+          return $xeDatePanel.renderDateYearTable(h);
+      }
+      return $xeDatePanel.renderDateDayTable(h);
+    },
+    renderDatePanel: function renderDatePanel(h) {
+      var $xeDatePanel = this;
+      var reactData = $xeDatePanel.reactData;
+      var datePanelType = reactData.datePanelType;
+      var isDisabledPrevDateBtn = $xeDatePanel.computeIsDisabledPrevDateBtn;
+      var isDisabledNextDateBtn = $xeDatePanel.computeIsDisabledNextDateBtn;
+      var selectDatePanelObj = $xeDatePanel.computeSelectDatePanelObj;
+      return [h('div', {
+        class: 'vxe-date-panel--picker-header'
+      }, [h('div', {
+        class: 'vxe-date-panel--picker-type-wrapper'
+      }, [datePanelType === 'year' ? h('span', {
+        class: 'vxe-date-panel--picker-label'
+      }, selectDatePanelObj.y) : h('span', {
+        class: 'vxe-date-panel--picker-btns'
+      }, [h('span', {
+        class: 'vxe-date-panel--picker-btn',
+        on: {
+          click: $xeDatePanel.dateToggleYearTypeEvent
+        }
+      }, selectDatePanelObj.y), selectDatePanelObj.m ? h('span', {
+        class: 'vxe-date-panel--picker-btn',
+        on: {
+          click: $xeDatePanel.dateToggleMonthTypeEvent
+        }
+      }, selectDatePanelObj.m) : (0, _ui.renderEmptyElement)($xeDatePanel)])]), h('div', {
+        class: 'vxe-date-panel--picker-btn-wrapper'
+      }, [h('span', {
+        class: ['vxe-date-panel--picker-btn vxe-date-panel--picker-prev-btn', {
+          'is--disabled': isDisabledPrevDateBtn
+        }],
+        on: {
+          click: $xeDatePanel.datePrevEvent
+        }
+      }, [h('i', {
+        class: 'vxe-icon-caret-left'
+      })]), h('span', {
+        class: 'vxe-date-panel--picker-btn vxe-date-panel--picker-current-btn',
+        on: {
+          click: $xeDatePanel.dateTodayMonthEvent
+        }
+      }, [h('i', {
+        class: 'vxe-icon-dot'
+      })]), h('span', {
+        class: ['vxe-date-panel--picker-btn vxe-date-panel--picker-next-btn', {
+          'is--disabled': isDisabledNextDateBtn
+        }],
+        on: {
+          click: $xeDatePanel.dateNextEvent
+        }
+      }, [h('i', {
+        class: 'vxe-icon-caret-right'
+      })])])]), h('div', {
+        class: 'vxe-date-panel--picker-body'
+      }, $xeDatePanel.renderDateTable(h))];
+    },
+    renderTimePanel: function renderTimePanel(h) {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var reactData = $xeDatePanel.reactData;
+      var type = props.type;
+      var datetimePanelValue = reactData.datetimePanelValue;
+      var dateTimeLabel = $xeDatePanel.computeDateTimeLabel;
+      var hourList = $xeDatePanel.computeHourList;
+      var hasTimeMinute = $xeDatePanel.computeHasTimeMinute;
+      var minuteList = $xeDatePanel.computeMinuteList;
+      var hasTimeSecond = $xeDatePanel.computeHasTimeSecond;
+      var secondList = $xeDatePanel.computeSecondList;
+      return [type === 'time' ? (0, _ui.renderEmptyElement)($xeDatePanel) : h('div', {
+        class: 'vxe-date-panel--time-header'
+      }, [h('div', {
+        class: 'vxe-date-panel--time-title'
+      }, dateTimeLabel)]), h('div', {
+        ref: 'refInputTimeBody',
+        class: 'vxe-date-panel--time-body'
+      }, [h('ul', {
+        class: 'vxe-date-panel--time-hour-list'
+      }, hourList.map(function (item, index) {
+        return h('li', {
+          key: index,
+          class: {
+            'is--disabled': item.disabled,
+            'is--selected': datetimePanelValue && datetimePanelValue.getHours() === item.value
+          },
+          on: {
+            click: function click(evnt) {
+              return $xeDatePanel.dateHourEvent(evnt, item);
+            }
+          }
+        }, item.label);
+      })), hasTimeMinute ? h('ul', {
+        class: 'vxe-date-panel--time-minute-list'
+      }, minuteList.map(function (item, index) {
+        return h('li', {
+          key: index,
+          class: {
+            'is--disabled': item.disabled,
+            'is--selected': datetimePanelValue && datetimePanelValue.getMinutes() === item.value
+          },
+          on: {
+            click: function click(evnt) {
+              return $xeDatePanel.dateMinuteEvent(evnt, item);
+            }
+          }
+        }, item.label);
+      })) : (0, _ui.renderEmptyElement)($xeDatePanel), hasTimeMinute && hasTimeSecond ? h('ul', {
+        class: 'vxe-date-panel--time-second-list'
+      }, secondList.map(function (item, index) {
+        return h('li', {
+          key: index,
+          class: {
+            'is--disabled': item.disabled,
+            'is--selected': datetimePanelValue && datetimePanelValue.getSeconds() === item.value
+          },
+          on: {
+            click: function click(evnt) {
+              return $xeDatePanel.dateSecondEvent(evnt, item);
+            }
+          }
+        }, item.label);
+      })) : (0, _ui.renderEmptyElement)($xeDatePanel)])];
+    },
+    renderPickerPanel: function renderPickerPanel(h) {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var type = props.type;
+      if (type === 'datetime') {
+        return h('div', {
+          key: type,
+          ref: 'refPanelWrapper',
+          class: 'vxe-date-panel--time-layout-wrapper'
+        }, [h('div', {
+          class: 'vxe-date-panel--time-left-wrapper'
+        }, $xeDatePanel.renderDatePanel(h)), h('div', {
+          class: 'vxe-date-panel--time-right-wrapper'
+        }, $xeDatePanel.renderTimePanel(h))]);
+      } else if (type === 'time') {
+        return h('div', {
+          key: type,
+          ref: 'refPanelWrapper',
+          class: 'vxe-date-panel--wrapper'
+        }, $xeDatePanel.renderTimePanel(h));
+      }
+      return h('div', {
+        key: type || 'default',
+        ref: 'refPanelWrapper',
+        class: 'vxe-date-panel--wrapper'
+      }, $xeDatePanel.renderDatePanel(h));
+    },
+    renderVN: function renderVN(h) {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var type = props.type;
+      var vSize = $xeDatePanel.computeSize;
+      return h('div', {
+        class: ['vxe-date-panel', "type--".concat(type), _defineProperty({}, "size--".concat(vSize), vSize)]
+      }, [$xeDatePanel.renderPickerPanel(h)]);
+    }
+  },
+  watch: {
+    value: function value(val) {
+      var $xeDatePanel = this;
+      $xeDatePanel.updateModelValue(val);
+      $xeDatePanel.changeValue();
+    },
+    type: function type() {
+      var $xeDatePanel = this;
+      var reactData = $xeDatePanel.reactData;
+      // 切换类型是重置内置变量
+      Object.assign(reactData, {
+        inputLabel: '',
+        datetimePanelValue: null,
+        datePanelValue: null,
+        datePanelLabel: '',
+        datePanelType: 'day',
+        selectMonth: null,
+        currentDate: null
+      });
+      $xeDatePanel.initValue();
+    },
+    computeDateLabelFormat: function computeDateLabelFormat() {
+      var $xeDatePanel = this;
+      var props = $xeDatePanel;
+      var reactData = $xeDatePanel.reactData;
+      var isDatePanelType = $xeDatePanel.computeIsDatePanelType;
+      if (isDatePanelType) {
+        $xeDatePanel.dateParseValue(reactData.datePanelValue);
+        reactData.inputLabel = props.multiple ? $xeDatePanel.computeDateMultipleLabel : reactData.datePanelLabel;
+      }
+    }
+  },
+  created: function created() {
+    var $xeDatePanel = this;
+    var props = $xeDatePanel;
+    var type = props.type,
+      multiple = props.multiple;
+    if (multiple && type === 'time') {
+      errLog('vxe.error.notSupportProp', ["type=".concat(type), 'multiple=true', 'multiple=false']);
+    }
+    $xeDatePanel.initValue();
+    $xeDatePanel.dateOpenPanel();
+  },
+  render: function render(h) {
+    return this.renderVN(h);
+  }
+});
+/* define-vxe-component end */