vxe-pc-ui 3.0.0 → 3.0.2

package/lib/calendar/src/calendar.js

@@ -0,0 +1,1286 @@
+"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("../../date-picker/src/util");
+var _dom = require("../..//ui/src/dom");
+var _button = _interopRequireDefault(require("../../button/src/button"));
+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 _default2 = exports.default = (0, _comp.defineVxeComponent)({
+  name: 'VxeCalendar',
+  mixins: [_ui.globalMixins.sizeMixin],
+  props: {
+    value: [String, Number, Date],
+    type: {
+      type: String,
+      default: 'date'
+    },
+    className: String,
+    size: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().calendar.size || (0, _ui.getConfig)().size;
+      }
+    },
+    multiple: Boolean,
+    width: [String, Number],
+    height: [String, Number],
+    // date、week、month、quarter、year
+    minDate: {
+      type: [String, Number, Date],
+      default: function _default() {
+        return (0, _ui.getConfig)().calendar.minDate;
+      }
+    },
+    maxDate: {
+      type: [String, Number, Date],
+      default: function _default() {
+        return (0, _ui.getConfig)().calendar.maxDate;
+      }
+    },
+    startDay: {
+      type: [String, Number],
+      default: function _default() {
+        return (0, _ui.getConfig)().calendar.startDay;
+      }
+    },
+    labelFormat: String,
+    valueFormat: String,
+    festivalMethod: {
+      type: Function,
+      default: function _default() {
+        return (0, _ui.getConfig)().calendar.festivalMethod;
+      }
+    },
+    disabledMethod: {
+      type: Function,
+      default: function _default() {
+        return (0, _ui.getConfig)().calendar.disabledMethod;
+      }
+    },
+    // week
+    selectDay: {
+      type: [String, Number],
+      default: function _default() {
+        return (0, _ui.getConfig)().calendar.selectDay;
+      }
+    }
+  },
+  data: function data() {
+    var reactData = {
+      selectValue: null,
+      inputValue: null,
+      datePanelValue: null,
+      datePanelLabel: '',
+      datePanelType: 'day',
+      selectMonth: null,
+      currentDate: null
+    };
+    var internalData = {
+      yearSize: 12,
+      monthSize: 20,
+      quarterSize: 8
+    };
+    return {
+      xID: _xeUtils.default.uniqueId(),
+      reactData: reactData,
+      internalData: internalData
+    };
+  },
+  computed: Object.assign(Object.assign({}, {}), {
+    computeCalendarStyle: function computeCalendarStyle() {
+      var $xeCalendar = this;
+      var props = $xeCalendar;
+      var height = props.height,
+        width = props.width;
+      var stys = {};
+      if (width) {
+        stys.width = (0, _dom.toCssUnit)(width);
+      }
+      if (height) {
+        stys.height = (0, _dom.toCssUnit)(height);
+      }
+      return stys;
+    },
+    computeIsDisabled: function computeIsDisabled() {
+      return false;
+    },
+    computeIsCalendarType: function computeIsCalendarType() {
+      var $xeCalendar = this;
+      var props = $xeCalendar;
+      return ['date', 'week', 'month', 'quarter', 'year'].includes(props.type);
+    },
+    computeDateStartTime: function computeDateStartTime() {
+      var $xeCalendar = this;
+      var props = $xeCalendar;
+      return props.minDate ? _xeUtils.default.toStringDate(props.minDate) : null;
+    },
+    computeDateEndTime: function computeDateEndTime() {
+      var $xeCalendar = this;
+      var props = $xeCalendar;
+      return props.maxDate ? _xeUtils.default.toStringDate(props.maxDate) : null;
+    },
+    computeSupportMultiples: function computeSupportMultiples() {
+      var $xeCalendar = this;
+      var props = $xeCalendar;
+      return ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
+    },
+    computeDateListValue: function computeDateListValue() {
+      var $xeCalendar = this;
+      var props = $xeCalendar;
+      var reactData = $xeCalendar.reactData;
+      var multiple = props.multiple;
+      var selectValue = reactData.selectValue;
+      var isCalendarType = $xeCalendar.computeIsCalendarType;
+      var dateValueFormat = $xeCalendar.computeDateValueFormat;
+      if (multiple && selectValue && isCalendarType) {
+        return _xeUtils.default.toValueString(selectValue).split(',').map(function (item) {
+          var date = $xeCalendar.parseDate(item, dateValueFormat);
+          if (_xeUtils.default.isValidDate(date)) {
+            return date;
+          }
+          return date;
+        });
+      }
+      return [];
+    },
+    computeDateMultipleValue: function computeDateMultipleValue() {
+      var $xeCalendar = this;
+      var dateListValue = $xeCalendar.computeDateListValue;
+      var dateValueFormat = $xeCalendar.computeDateValueFormat;
+      return dateListValue.map(function (date) {
+        return _xeUtils.default.toDateString(date, dateValueFormat);
+      });
+    },
+    computeDateMultipleLabel: function computeDateMultipleLabel() {
+      var $xeCalendar = this;
+      var dateListValue = $xeCalendar.computeDateListValue;
+      var dateLabelFormat = $xeCalendar.computeDateLabelFormat;
+      return dateListValue.map(function (date) {
+        return _xeUtils.default.toDateString(date, dateLabelFormat);
+      }).join(', ');
+    },
+    computeDateValueFormat: function computeDateValueFormat() {
+      var $xeCalendar = this;
+      var props = $xeCalendar;
+      var valueFormat = props.valueFormat;
+      if (valueFormat) {
+        return valueFormat;
+      }
+      return 'yyyy-MM-dd';
+    },
+    computeDateValue: function computeDateValue() {
+      var $xeCalendar = this;
+      var reactData = $xeCalendar.reactData;
+      var selectValue = reactData.selectValue;
+      var isCalendarType = $xeCalendar.computeIsCalendarType;
+      var dateValueFormat = $xeCalendar.computeDateValueFormat;
+      var val = null;
+      if (selectValue && isCalendarType) {
+        var date = $xeCalendar.parseDate(selectValue, dateValueFormat);
+        if (_xeUtils.default.isValidDate(date)) {
+          val = date;
+        }
+      }
+      return val;
+    },
+    computeIsDisabledPrevDateBtn: function computeIsDisabledPrevDateBtn() {
+      var $xeCalendar = this;
+      var reactData = $xeCalendar.reactData;
+      var dateStartTime = $xeCalendar.computeDateStartTime;
+      var selectMonth = reactData.selectMonth;
+      if (selectMonth && dateStartTime) {
+        return selectMonth <= dateStartTime;
+      }
+      return false;
+    },
+    computeIsDisabledNextDateBtn: function computeIsDisabledNextDateBtn() {
+      var $xeCalendar = this;
+      var reactData = $xeCalendar.reactData;
+      var dateEndTime = $xeCalendar.computeDateEndTime;
+      var selectMonth = reactData.selectMonth;
+      if (selectMonth && dateEndTime) {
+        return selectMonth >= dateEndTime;
+      }
+      return false;
+    },
+    computeDateHMSTime: function computeDateHMSTime() {
+      var $xeCalendar = this;
+      var dateValue = $xeCalendar.computeDateValue;
+      return dateValue ? (dateValue.getHours() * 3600 + dateValue.getMinutes() * 60 + dateValue.getSeconds()) * 1000 : 0;
+    },
+    computeDateLabelFormat: function computeDateLabelFormat() {
+      var $xeCalendar = this;
+      var props = $xeCalendar;
+      var labelFormat = props.labelFormat;
+      var isCalendarType = $xeCalendar.computeIsCalendarType;
+      var dateValueFormat = $xeCalendar.computeDateValueFormat;
+      if (isCalendarType) {
+        return labelFormat || dateValueFormat || (0, _ui.getI18n)("vxe.input.date.labelFormat.".concat(props.type));
+      }
+      return '';
+    },
+    computeYearList: function computeYearList() {
+      var $xeCalendar = this;
+      var reactData = $xeCalendar.reactData;
+      var internalData = $xeCalendar.internalData;
+      var selectMonth = reactData.selectMonth,
+        currentDate = reactData.currentDate;
+      var yearSize = internalData.yearSize;
+      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 = -4; index < yearSize + 4; 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;
+    },
+    computeSelectDatePanelLabel: function computeSelectDatePanelLabel() {
+      var $xeCalendar = this;
+      var reactData = $xeCalendar.reactData;
+      var isCalendarType = $xeCalendar.computeIsCalendarType;
+      if (isCalendarType) {
+        var datePanelType = reactData.datePanelType,
+          selectMonth = reactData.selectMonth;
+        var yearList = $xeCalendar.computeYearList;
+        var year = '';
+        var month;
+        if (selectMonth) {
+          year = selectMonth.getFullYear();
+          month = selectMonth.getMonth() + 1;
+        }
+        if (datePanelType === 'quarter') {
+          return (0, _ui.getI18n)('vxe.input.date.quarterLabel', [year]);
+        } else if (datePanelType === 'month') {
+          return (0, _ui.getI18n)('vxe.input.date.monthLabel', [year]);
+        } else if (datePanelType === 'year') {
+          return yearList.length ? "".concat(yearList[0].year, " - ").concat(yearList[yearList.length - 1].year) : '';
+        }
+        return (0, _ui.getI18n)('vxe.input.date.dayLabel', [year, month ? (0, _ui.getI18n)("vxe.input.date.m".concat(month)) : '-']);
+      }
+      return '';
+    },
+    computeFirstDayOfWeek: function computeFirstDayOfWeek() {
+      var $xeCalendar = this;
+      var props = $xeCalendar;
+      var startDay = props.startDay;
+      return _xeUtils.default.toNumber(startDay);
+    },
+    computeWeekDatas: function computeWeekDatas() {
+      var $xeCalendar = this;
+      var weeks = [];
+      var isCalendarType = $xeCalendar.computeIsCalendarType;
+      if (isCalendarType) {
+        var sWeek = $xeCalendar.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 $xeCalendar = this;
+      var isCalendarType = $xeCalendar.computeIsCalendarType;
+      if (isCalendarType) {
+        var weekDatas = $xeCalendar.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 $xeCalendar = this;
+      var isCalendarType = $xeCalendar.computeIsCalendarType;
+      if (isCalendarType) {
+        var dateHeaders = $xeCalendar.computeDateHeaders;
+        return [{
+          label: (0, _ui.getI18n)('vxe.input.date.weeks.w')
+        }].concat(dateHeaders);
+      }
+      return [];
+    },
+    computeYearDatas: function computeYearDatas() {
+      var $xeCalendar = this;
+      var yearList = $xeCalendar.computeYearList;
+      return _xeUtils.default.chunk(yearList, 4);
+    },
+    computeQuarterList: function computeQuarterList() {
+      var $xeCalendar = this;
+      var reactData = $xeCalendar.reactData;
+      var internalData = $xeCalendar.internalData;
+      var selectMonth = reactData.selectMonth,
+        currentDate = reactData.currentDate;
+      var quarterSize = internalData.quarterSize;
+      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 = -2; index < quarterSize - 2; 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 $xeCalendar = this;
+      var quarterList = $xeCalendar.computeQuarterList;
+      return _xeUtils.default.chunk(quarterList, 2);
+    },
+    computeMonthList: function computeMonthList() {
+      var $xeCalendar = this;
+      var reactData = $xeCalendar.reactData;
+      var internalData = $xeCalendar.internalData;
+      var selectMonth = reactData.selectMonth,
+        currentDate = reactData.currentDate;
+      var monthSize = internalData.monthSize;
+      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 = -4; index < monthSize - 4; 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 $xeCalendar = this;
+      var monthList = $xeCalendar.computeMonthList;
+      return _xeUtils.default.chunk(monthList, 4);
+    },
+    computeDayList: function computeDayList() {
+      var $xeCalendar = this;
+      var reactData = $xeCalendar.reactData;
+      var selectMonth = reactData.selectMonth,
+        currentDate = reactData.currentDate;
+      var days = [];
+      if (selectMonth && currentDate) {
+        var dateHMSTime = $xeCalendar.computeDateHMSTime;
+        var weekDatas = $xeCalendar.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 $xeCalendar = this;
+      var dayList = $xeCalendar.computeDayList;
+      return _xeUtils.default.chunk(dayList, 7);
+    },
+    computeWeekDates: function computeWeekDates() {
+      var $xeCalendar = this;
+      var dayDatas = $xeCalendar.computeDayDatas;
+      var firstDayOfWeek = $xeCalendar.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);
+      });
+    }
+  }),
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent: function dispatchEvent(type, params, evnt) {
+      var $xeCalendar = this;
+      $xeCalendar.$emit(type, (0, _ui.createEvent)(evnt, {
+        $input: $xeCalendar
+      }, params));
+    },
+    emitModel: function emitModel(value) {
+      var $xeCalendar = this;
+      $xeCalendar.$emit('modelValue', value);
+      $xeCalendar.$emit('input', value);
+    },
+    parseDate: function parseDate(value, format) {
+      return _xeUtils.default.toStringDate(value, format);
+    },
+    handleChange: function handleChange(value, evnt) {
+      var $xeCalendar = this;
+      var props = $xeCalendar;
+      var reactData = $xeCalendar.reactData;
+      reactData.inputValue = value;
+      $xeCalendar.emitModel(value);
+      if (_xeUtils.default.toValueString(props.value) !== value) {
+        $xeCalendar.dispatchEvent('change', {
+          value: value
+        }, evnt);
+      }
+    },
+    dateParseValue: function dateParseValue(value) {
+      var $xeCalendar = this;
+      var props = $xeCalendar;
+      var reactData = $xeCalendar.reactData;
+      var type = props.type;
+      var dateLabelFormat = $xeCalendar.computeDateLabelFormat;
+      var dateValueFormat = $xeCalendar.computeDateValueFormat;
+      var firstDayOfWeek = $xeCalendar.computeFirstDayOfWeek;
+      var dValue = null;
+      var dLabel = '';
+      if (value) {
+        dValue = $xeCalendar.parseDate(value, dateValueFormat);
+      }
+      if (_xeUtils.default.isValidDate(dValue)) {
+        dLabel = _xeUtils.default.toDateString(dValue, dateLabelFormat, {
+          firstDay: firstDayOfWeek
+        });
+        // 由于年份和第几周是冲突的行为，所以需要特殊处理，判断是否跨年
+        if (dateLabelFormat && type === 'week') {
+          var firstWeekDate = _xeUtils.default.getWhatWeek(dValue, 0, firstDayOfWeek, firstDayOfWeek);
+          if (firstWeekDate.getFullYear() < dValue.getFullYear()) {
+            var yyIndex = dateLabelFormat.indexOf('yyyy');
+            if (yyIndex > -1) {
+              var yyNum = Number(dLabel.substring(yyIndex, yyIndex + 4));
+              if (yyNum && !isNaN(yyNum)) {
+                dLabel = dLabel.replace("".concat(yyNum), "".concat(yyNum - 1));
+              }
+            }
+          }
+        }
+      } else {
+        dValue = null;
+      }
+      reactData.datePanelValue = dValue;
+      reactData.datePanelLabel = dLabel;
+    },
+    /**
+     * 值变化时处理
+     */
+    changeValue: function changeValue() {
+      var $xeCalendar = this;
+      var props = $xeCalendar;
+      var reactData = $xeCalendar.reactData;
+      var isCalendarType = $xeCalendar.computeIsCalendarType;
+      var inputValue = reactData.inputValue;
+      if (isCalendarType) {
+        $xeCalendar.dateParseValue(inputValue);
+        reactData.inputValue = props.multiple ? $xeCalendar.computeDateMultipleLabel : reactData.datePanelLabel;
+      }
+    },
+    /**
+     * 检查初始值
+     */
+    initValue: function initValue() {
+      var $xeCalendar = this;
+      var isCalendarType = $xeCalendar.computeIsCalendarType;
+      if (isCalendarType) {
+        $xeCalendar.changeValue();
+      }
+    },
+    dateCheckMonth: function dateCheckMonth(date) {
+      var $xeCalendar = this;
+      var reactData = $xeCalendar.reactData;
+      var month = _xeUtils.default.getWhatMonth(date, 0, 'first');
+      if (!_xeUtils.default.isEqual(month, reactData.selectMonth)) {
+        reactData.selectMonth = month;
+      }
+    },
+    dateChange: function dateChange(date) {
+      var $xeCalendar = this;
+      var props = $xeCalendar;
+      var reactData = $xeCalendar.reactData;
+      var value = props.value,
+        multiple = props.multiple;
+      var dateValueFormat = $xeCalendar.computeDateValueFormat;
+      var firstDayOfWeek = $xeCalendar.computeFirstDayOfWeek;
+      if (props.type === 'week') {
+        var sWeek = _xeUtils.default.toNumber(props.selectDay);
+        date = _xeUtils.default.getWhatWeek(date, 0, sWeek, firstDayOfWeek);
+      }
+      var inpVal = _xeUtils.default.toDateString(date, dateValueFormat, {
+        firstDay: firstDayOfWeek
+      });
+      $xeCalendar.dateCheckMonth(date);
+      reactData.selectValue = date;
+      if (multiple) {
+        // 如果为多选
+        var dateMultipleValue = $xeCalendar.computeDateMultipleValue;
+        // 如果是日期类型
+        if (dateMultipleValue.some(function (val) {
+          return _xeUtils.default.isEqual(val, inpVal);
+        })) {
+          $xeCalendar.handleChange(dateMultipleValue.filter(function (val) {
+            return !_xeUtils.default.isEqual(val, inpVal);
+          }).join(','), {
+            type: 'update'
+          });
+        } else {
+          $xeCalendar.handleChange(dateMultipleValue.concat([inpVal]).join(','), {
+            type: 'update'
+          });
+        }
+      } else {
+        // 如果为单选
+        if (!_xeUtils.default.isEqual(value, inpVal)) {
+          $xeCalendar.handleChange(inpVal, {
+            type: 'update'
+          });
+        }
+      }
+    },
+    dateMonthHandle: function dateMonthHandle(date, offsetMonth) {
+      var $xeCalendar = this;
+      var reactData = $xeCalendar.reactData;
+      reactData.selectMonth = _xeUtils.default.getWhatMonth(date, offsetMonth, 'first');
+    },
+    dateNowHandle: function dateNowHandle() {
+      var $xeCalendar = this;
+      var reactData = $xeCalendar.reactData;
+      var currentDate = _xeUtils.default.getWhatDay(Date.now(), 0, 'first');
+      reactData.currentDate = currentDate;
+      $xeCalendar.dateMonthHandle(currentDate, 0);
+    },
+    dateToggleTypeEvent: function dateToggleTypeEvent() {
+      var $xeCalendar = this;
+      var reactData = $xeCalendar.reactData;
+      var datePanelType = reactData.datePanelType;
+      if (datePanelType === 'month' || datePanelType === 'quarter') {
+        datePanelType = 'year';
+      } else {
+        datePanelType = 'month';
+      }
+      reactData.datePanelType = datePanelType;
+    },
+    datePrevEvent: function datePrevEvent(evnt) {
+      var $xeCalendar = this;
+      var props = $xeCalendar;
+      var reactData = $xeCalendar.reactData;
+      var internalData = $xeCalendar.internalData;
+      var type = props.type;
+      var datePanelType = reactData.datePanelType,
+        selectMonth = reactData.selectMonth;
+      var yearSize = internalData.yearSize;
+      var isDisabledPrevDateBtn = $xeCalendar.computeIsDisabledPrevDateBtn;
+      if (!isDisabledPrevDateBtn) {
+        if (type === 'year') {
+          reactData.selectMonth = _xeUtils.default.getWhatYear(selectMonth, -yearSize, 'first');
+        } else if (type === 'month' || type === 'quarter') {
+          if (datePanelType === 'year') {
+            reactData.selectMonth = _xeUtils.default.getWhatYear(selectMonth, -yearSize, 'first');
+          } else {
+            reactData.selectMonth = _xeUtils.default.getWhatYear(selectMonth, -1, 'first');
+          }
+        } else {
+          if (datePanelType === 'year') {
+            reactData.selectMonth = _xeUtils.default.getWhatYear(selectMonth, -yearSize, 'first');
+          } else if (datePanelType === 'month') {
+            reactData.selectMonth = _xeUtils.default.getWhatYear(selectMonth, -1, 'first');
+          } else {
+            reactData.selectMonth = _xeUtils.default.getWhatMonth(selectMonth, -1, 'first');
+          }
+        }
+        $xeCalendar.dispatchEvent('date-prev', {
+          type: type
+        }, evnt);
+      }
+    },
+    dateTodayMonthEvent: function dateTodayMonthEvent(evnt) {
+      var $xeCalendar = this;
+      var props = $xeCalendar;
+      var reactData = $xeCalendar.reactData;
+      $xeCalendar.dateNowHandle();
+      if (!props.multiple) {
+        $xeCalendar.dateChange(reactData.currentDate);
+      }
+      $xeCalendar.dispatchEvent('date-today', {
+        type: props.type
+      }, evnt);
+    },
+    dateNextEvent: function dateNextEvent(evnt) {
+      var $xeCalendar = this;
+      var props = $xeCalendar;
+      var reactData = $xeCalendar.reactData;
+      var internalData = $xeCalendar.internalData;
+      var type = props.type;
+      var datePanelType = reactData.datePanelType,
+        selectMonth = reactData.selectMonth;
+      var yearSize = internalData.yearSize;
+      var isDisabledNextDateBtn = $xeCalendar.computeIsDisabledNextDateBtn;
+      if (!isDisabledNextDateBtn) {
+        if (type === 'year') {
+          reactData.selectMonth = _xeUtils.default.getWhatYear(selectMonth, yearSize, 'first');
+        } else if (type === 'month' || type === 'quarter') {
+          if (datePanelType === 'year') {
+            reactData.selectMonth = _xeUtils.default.getWhatYear(selectMonth, yearSize, 'first');
+          } else {
+            reactData.selectMonth = _xeUtils.default.getWhatYear(selectMonth, 1, 'first');
+          }
+        } else {
+          if (datePanelType === 'year') {
+            reactData.selectMonth = _xeUtils.default.getWhatYear(selectMonth, yearSize, 'first');
+          } else if (datePanelType === 'month') {
+            reactData.selectMonth = _xeUtils.default.getWhatYear(selectMonth, 1, 'first');
+          } else {
+            reactData.selectMonth = _xeUtils.default.getWhatMonth(selectMonth, 1, 'first');
+          }
+        }
+        $xeCalendar.dispatchEvent('date-next', {
+          type: type
+        }, evnt);
+      }
+    },
+    isDateDisabled: function isDateDisabled(item) {
+      var $xeCalendar = this;
+      var props = $xeCalendar;
+      var reactData = $xeCalendar.reactData;
+      var disabledMethod = props.disabledMethod;
+      var datePanelType = reactData.datePanelType;
+      return disabledMethod && disabledMethod({
+        type: datePanelType,
+        viewType: datePanelType,
+        date: item.date,
+        $calendar: $xeCalendar
+      });
+    },
+    dateSelectItem: function dateSelectItem(date) {
+      var $xeCalendar = this;
+      var props = $xeCalendar;
+      var reactData = $xeCalendar.reactData;
+      var type = props.type;
+      var datePanelType = reactData.datePanelType;
+      if (type === 'month') {
+        if (datePanelType === 'year') {
+          reactData.datePanelType = 'month';
+          $xeCalendar.dateCheckMonth(date);
+        } else {
+          $xeCalendar.dateChange(date);
+        }
+      } else if (type === 'year') {
+        $xeCalendar.dateChange(date);
+      } else if (type === 'quarter') {
+        if (datePanelType === 'year') {
+          reactData.datePanelType = 'quarter';
+          $xeCalendar.dateCheckMonth(date);
+        } else {
+          $xeCalendar.dateChange(date);
+        }
+      } else {
+        if (datePanelType === 'month') {
+          reactData.datePanelType = type === 'week' ? type : 'day';
+          $xeCalendar.dateCheckMonth(date);
+        } else if (datePanelType === 'year') {
+          reactData.datePanelType = 'month';
+          $xeCalendar.dateCheckMonth(date);
+        } else {
+          $xeCalendar.dateChange(date);
+        }
+      }
+    },
+    dateSelectEvent: function dateSelectEvent(item) {
+      var $xeCalendar = this;
+      if (!$xeCalendar.isDateDisabled(item)) {
+        $xeCalendar.dateSelectItem(item.date);
+      }
+    },
+    dateMoveDay: function dateMoveDay(offsetDay) {
+      var $xeCalendar = this;
+      if (!$xeCalendar.isDateDisabled({
+        date: offsetDay
+      })) {
+        var dayList = $xeCalendar.computeDayList;
+        if (!dayList.some(function (item) {
+          return _xeUtils.default.isDateSame(item.date, offsetDay, 'yyyyMMdd');
+        })) {
+          $xeCalendar.dateCheckMonth(offsetDay);
+        }
+        $xeCalendar.dateParseValue(offsetDay);
+      }
+    },
+    dateMoveYear: function dateMoveYear(offsetYear) {
+      var $xeCalendar = this;
+      if (!$xeCalendar.isDateDisabled({
+        date: offsetYear
+      })) {
+        var yearList = $xeCalendar.computeYearList;
+        if (!yearList.some(function (item) {
+          return _xeUtils.default.isDateSame(item.date, offsetYear, 'yyyy');
+        })) {
+          $xeCalendar.dateCheckMonth(offsetYear);
+        }
+        $xeCalendar.dateParseValue(offsetYear);
+      }
+    },
+    dateMoveQuarter: function dateMoveQuarter(offsetQuarter) {
+      var $xeCalendar = this;
+      if (!$xeCalendar.isDateDisabled({
+        date: offsetQuarter
+      })) {
+        var quarterList = $xeCalendar.computeQuarterList;
+        if (!quarterList.some(function (item) {
+          return _xeUtils.default.isDateSame(item.date, offsetQuarter, 'yyyyq');
+        })) {
+          $xeCalendar.dateCheckMonth(offsetQuarter);
+        }
+        $xeCalendar.dateParseValue(offsetQuarter);
+      }
+    },
+    dateMoveMonth: function dateMoveMonth(offsetMonth) {
+      var $xeCalendar = this;
+      if (!$xeCalendar.isDateDisabled({
+        date: offsetMonth
+      })) {
+        var monthList = $xeCalendar.computeMonthList;
+        if (!monthList.some(function (item) {
+          return _xeUtils.default.isDateSame(item.date, offsetMonth, 'yyyyMM');
+        })) {
+          $xeCalendar.dateCheckMonth(offsetMonth);
+        }
+        $xeCalendar.dateParseValue(offsetMonth);
+      }
+    },
+    dateMouseenterEvent: function dateMouseenterEvent(item) {
+      var $xeCalendar = this;
+      var reactData = $xeCalendar.reactData;
+      if (!$xeCalendar.isDateDisabled(item)) {
+        var datePanelType = reactData.datePanelType;
+        if (datePanelType === 'month') {
+          $xeCalendar.dateMoveMonth(item.date);
+        } else if (datePanelType === 'quarter') {
+          $xeCalendar.dateMoveQuarter(item.date);
+        } else if (datePanelType === 'year') {
+          $xeCalendar.dateMoveYear(item.date);
+        } else {
+          $xeCalendar.dateMoveDay(item.date);
+        }
+      }
+    },
+    dateConfirmEvent: function dateConfirmEvent() {},
+    dateOpenPanel: function dateOpenPanel() {
+      var $xeCalendar = this;
+      var props = $xeCalendar;
+      var reactData = $xeCalendar.reactData;
+      var type = props.type;
+      var dateValue = $xeCalendar.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) {
+        $xeCalendar.dateMonthHandle(dateValue, 0);
+        $xeCalendar.dateParseValue(dateValue);
+      } else {
+        $xeCalendar.dateNowHandle();
+      }
+    },
+    //
+    // Render
+    //
+    renderDateLabel: function renderDateLabel(h, item, label) {
+      var $xeCalendar = this;
+      var props = $xeCalendar;
+      var reactData = $xeCalendar.reactData;
+      var festivalMethod = props.festivalMethod;
+      if (festivalMethod) {
+        var datePanelType = reactData.datePanelType;
+        var festivalRest = festivalMethod({
+          type: datePanelType,
+          viewType: datePanelType,
+          date: item.date,
+          $calendar: $xeCalendar
+        });
+        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;
+        var labels = [h('span', {
+          class: ['vxe-calendar--date-label', {
+            'is-notice': festivalItem.notice
+          }]
+        }, extraItem && extraItem.label ? [h('span', "".concat(label || '')), h('span', {
+          class: ['vxe-calendar--date-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(',');
+          labels.push(h('span', {
+            class: ['vxe-calendar--date-festival', festivalItem.important ? 'is-important' : '', festivalItem.className],
+            style: festivalItem.style
+          }, [festivalLabels.length > 1 ? h('span', {
+            class: ['vxe-calendar--date-festival--overlap', "overlap--".concat(festivalLabels.length)]
+          }, festivalLabels.map(function (label) {
+            return h('span', label.substring(0, 3));
+          })) : h('span', {
+            class: 'vxe-calendar--date-festival--label'
+          }, festivalLabels[0].substring(0, 3))]));
+        }
+        return labels;
+      }
+      return "".concat(label || '');
+    },
+    renderDateDayTable: function renderDateDayTable(h) {
+      var $xeCalendar = this;
+      var props = $xeCalendar;
+      var reactData = $xeCalendar.reactData;
+      var multiple = props.multiple;
+      var datePanelType = reactData.datePanelType,
+        datePanelValue = reactData.datePanelValue;
+      var dateValue = $xeCalendar.computeDateValue;
+      var dateHeaders = $xeCalendar.computeDateHeaders;
+      var dayDatas = $xeCalendar.computeDayDatas;
+      var dateListValue = $xeCalendar.computeDateListValue;
+      var matchFormat = 'yyyyMMdd';
+      return [h('table', {
+        class: "vxe-calendar--date-".concat(datePanelType, "-view"),
+        attrs: {
+          cellspacing: 0,
+          cellpadding: 0,
+          border: 0
+        }
+      }, [h('tr', dateHeaders.map(function (item) {
+        return h('th', {
+          class: 'vxe-calendar--view-th'
+        }, item.label);
+      }))].concat(_toConsumableArray(dayDatas.map(function (rows) {
+        return h('tr', rows.map(function (item) {
+          return h('td', {
+            class: ['vxe-calendar--view-td', {
+              'is--prev': item.isPrev,
+              'is--current': item.isCurrent,
+              'is--now': item.isNow,
+              'is--next': item.isNext,
+              'is--disabled': $xeCalendar.isDateDisabled(item),
+              'is--selected': multiple ? dateListValue.some(function (val) {
+                return _xeUtils.default.isDateSame(val, item.date, matchFormat);
+              }) : _xeUtils.default.isDateSame(dateValue, item.date, matchFormat),
+              'is--hover': _xeUtils.default.isDateSame(datePanelValue, item.date, matchFormat)
+            }],
+            on: {
+              click: function click() {
+                return $xeCalendar.dateSelectEvent(item);
+              },
+              mouseenter: function mouseenter() {
+                return $xeCalendar.dateMouseenterEvent(item);
+              }
+            }
+          }, $xeCalendar.renderDateLabel(h, item, item.label));
+        }));
+      }))))];
+    },
+    renderDateWeekTable: function renderDateWeekTable(h) {
+      var $xeCalendar = this;
+      var props = $xeCalendar;
+      var reactData = $xeCalendar.reactData;
+      var multiple = props.multiple;
+      var datePanelType = reactData.datePanelType,
+        datePanelValue = reactData.datePanelValue;
+      var dateValue = $xeCalendar.computeDateValue;
+      var weekHeaders = $xeCalendar.computeWeekHeaders;
+      var weekDates = $xeCalendar.computeWeekDates;
+      var dateListValue = $xeCalendar.computeDateListValue;
+      var matchFormat = 'yyyyMMdd';
+      return [h('table', {
+        class: "vxe-calendar--date-".concat(datePanelType, "-view"),
+        attrs: {
+          cellspacing: 0,
+          cellpadding: 0,
+          border: 0
+        }
+      }, [h('tr', weekHeaders.map(function (item) {
+        return h('td', {
+          class: 'vxe-calendar--view-th'
+        }, item.label);
+      }))].concat(_toConsumableArray(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);
+        });
+        return h('tr', rows.map(function (item) {
+          return h('td', {
+            class: ['vxe-calendar--view-td', {
+              'is--prev': item.isPrev,
+              'is--current': item.isCurrent,
+              'is--now': item.isNow,
+              'is--next': item.isNext,
+              'is--disabled': $xeCalendar.isDateDisabled(item),
+              'is--selected': isSelected,
+              'is--hover': isHover
+            }],
+            on: {
+              click: function click() {
+                return $xeCalendar.dateSelectEvent(item);
+              },
+              mouseenter: function mouseenter() {
+                return $xeCalendar.dateMouseenterEvent(item);
+              }
+            }
+          }, $xeCalendar.renderDateLabel(h, item, item.label));
+        }));
+      }))))];
+    },
+    renderDateMonthTable: function renderDateMonthTable(h) {
+      var $xeCalendar = this;
+      var props = $xeCalendar;
+      var reactData = $xeCalendar.reactData;
+      var multiple = props.multiple;
+      var datePanelType = reactData.datePanelType,
+        datePanelValue = reactData.datePanelValue;
+      var dateValue = $xeCalendar.computeDateValue;
+      var monthDatas = $xeCalendar.computeMonthDatas;
+      var dateListValue = $xeCalendar.computeDateListValue;
+      var matchFormat = 'yyyyMM';
+      return [h('table', {
+        class: "vxe-calendar--date-".concat(datePanelType, "-view"),
+        attrs: {
+          cellspacing: 0,
+          cellpadding: 0,
+          border: 0
+        }
+      }, [h('tbody', monthDatas.map(function (rows) {
+        return h('tr', rows.map(function (item) {
+          return h('td', {
+            class: ['vxe-calendar--view-td', {
+              'is--prev': item.isPrev,
+              'is--current': item.isCurrent,
+              'is--now': item.isNow,
+              'is--next': item.isNext,
+              'is--disabled': $xeCalendar.isDateDisabled(item),
+              'is--selected': multiple ? dateListValue.some(function (val) {
+                return _xeUtils.default.isDateSame(val, item.date, matchFormat);
+              }) : _xeUtils.default.isDateSame(dateValue, item.date, matchFormat),
+              'is--hover': _xeUtils.default.isDateSame(datePanelValue, item.date, matchFormat)
+            }],
+            on: {
+              click: function click() {
+                return $xeCalendar.dateSelectEvent(item);
+              },
+              mouseenter: function mouseenter() {
+                return $xeCalendar.dateMouseenterEvent(item);
+              }
+            }
+          }, $xeCalendar.renderDateLabel(h, item, (0, _ui.getI18n)("vxe.input.date.months.m".concat(item.month))));
+        }));
+      }))])];
+    },
+    renderDateQuarterTable: function renderDateQuarterTable(h) {
+      var $xeCalendar = this;
+      var props = $xeCalendar;
+      var reactData = $xeCalendar.reactData;
+      var multiple = props.multiple;
+      var datePanelType = reactData.datePanelType,
+        datePanelValue = reactData.datePanelValue;
+      var dateValue = $xeCalendar.computeDateValue;
+      var quarterDatas = $xeCalendar.computeQuarterDatas;
+      var dateListValue = $xeCalendar.computeDateListValue;
+      var matchFormat = 'yyyyq';
+      return [h('table', {
+        class: "vxe-calendar--date-".concat(datePanelType, "-view"),
+        attrs: {
+          cellspacing: 0,
+          cellpadding: 0,
+          border: 0
+        }
+      }, [h('tbody', quarterDatas.map(function (rows) {
+        return h('tr', rows.map(function (item) {
+          return h('td', {
+            class: ['vxe-calendar--view-td', {
+              'is--prev': item.isPrev,
+              'is--current': item.isCurrent,
+              'is--now': item.isNow,
+              'is--next': item.isNext,
+              'is--disabled': $xeCalendar.isDateDisabled(item),
+              'is--selected': multiple ? dateListValue.some(function (val) {
+                return _xeUtils.default.isDateSame(val, item.date, matchFormat);
+              }) : _xeUtils.default.isDateSame(dateValue, item.date, matchFormat),
+              'is--hover': _xeUtils.default.isDateSame(datePanelValue, item.date, matchFormat)
+            }],
+            on: {
+              click: function click() {
+                return $xeCalendar.dateSelectEvent(item);
+              },
+              mouseenter: function mouseenter() {
+                return $xeCalendar.dateMouseenterEvent(item);
+              }
+            }
+          }, $xeCalendar.renderDateLabel(h, item, (0, _ui.getI18n)("vxe.input.date.quarters.q".concat(item.quarter))));
+        }));
+      }))])];
+    },
+    renderDateYearTable: function renderDateYearTable(h) {
+      var $xeCalendar = this;
+      var props = $xeCalendar;
+      var reactData = $xeCalendar.reactData;
+      var multiple = props.multiple;
+      var datePanelType = reactData.datePanelType,
+        datePanelValue = reactData.datePanelValue;
+      var dateValue = $xeCalendar.computeDateValue;
+      var yearDatas = $xeCalendar.computeYearDatas;
+      var dateListValue = $xeCalendar.computeDateListValue;
+      var matchFormat = 'yyyy';
+      return [h('table', {
+        class: "vxe-calendar--date-".concat(datePanelType, "-view"),
+        attrs: {
+          cellspacing: 0,
+          cellpadding: 0,
+          border: 0
+        }
+      }, [h('tbody', yearDatas.map(function (rows) {
+        return h('tr', rows.map(function (item) {
+          return h('td', {
+            class: ['vxe-calendar--view-td', {
+              'is--prev': item.isPrev,
+              'is--current': item.isCurrent,
+              'is--now': item.isNow,
+              'is--next': item.isNext,
+              'is--disabled': $xeCalendar.isDateDisabled(item),
+              'is--selected': multiple ? dateListValue.some(function (val) {
+                return _xeUtils.default.isDateSame(val, item.date, matchFormat);
+              }) : _xeUtils.default.isDateSame(dateValue, item.date, matchFormat),
+              'is--hover': _xeUtils.default.isDateSame(datePanelValue, item.date, matchFormat)
+            }],
+            on: {
+              click: function click() {
+                return $xeCalendar.dateSelectEvent(item);
+              },
+              mouseenter: function mouseenter() {
+                return $xeCalendar.dateMouseenterEvent(item);
+              }
+            }
+          }, $xeCalendar.renderDateLabel(h, item, item.year));
+        }));
+      }))])];
+    },
+    renderDateTable: function renderDateTable(h) {
+      var $xeCalendar = this;
+      var reactData = $xeCalendar.reactData;
+      var datePanelType = reactData.datePanelType;
+      switch (datePanelType) {
+        case 'week':
+          return $xeCalendar.renderDateWeekTable(h);
+        case 'month':
+          return $xeCalendar.renderDateMonthTable(h);
+        case 'quarter':
+          return $xeCalendar.renderDateQuarterTable(h);
+        case 'year':
+          return $xeCalendar.renderDateYearTable(h);
+      }
+      return $xeCalendar.renderDateDayTable(h);
+    },
+    renderDatePanel: function renderDatePanel(h) {
+      var $xeCalendar = this;
+      var props = $xeCalendar;
+      var reactData = $xeCalendar.reactData;
+      var multiple = props.multiple;
+      var datePanelType = reactData.datePanelType;
+      var isDisabledPrevDateBtn = $xeCalendar.computeIsDisabledPrevDateBtn;
+      var isDisabledNextDateBtn = $xeCalendar.computeIsDisabledNextDateBtn;
+      var selectDatePanelLabel = $xeCalendar.computeSelectDatePanelLabel;
+      return [h('div', {
+        class: 'vxe-calendar--header'
+      }, [h('div', {
+        class: 'vxe-calendar--type-wrapper'
+      }, [h(_button.default, {
+        props: {
+          disabled: datePanelType === 'year',
+          content: selectDatePanelLabel
+        },
+        on: {
+          click: $xeCalendar.dateToggleTypeEvent
+        }
+      })]), h('div', {
+        class: 'vxe-calendar--btn-wrapper'
+      }, [h(_button.default, {
+        props: {
+          disabled: isDisabledPrevDateBtn,
+          icon: 'vxe-icon-caret-left'
+        },
+        on: {
+          click: $xeCalendar.datePrevEvent
+        }
+      }), h(_button.default, {
+        props: {
+          icon: 'vxe-icon-dot'
+        },
+        on: {
+          click: $xeCalendar.dateTodayMonthEvent
+        }
+      }), h(_button.default, {
+        props: {
+          disabled: isDisabledNextDateBtn,
+          icon: 'vxe-icon-caret-right'
+        },
+        on: {
+          click: $xeCalendar.dateNextEvent
+        }
+      }), multiple && $xeCalendar.computeSupportMultiples ? h('span', {
+        class: 'vxe-calendar--btn vxe-calendar--confirm-btn'
+      }, [h('button', {
+        class: 'vxe-calendar--confirm',
+        attrs: {
+          type: 'button'
+        },
+        on: {
+          click: $xeCalendar.dateConfirmEvent
+        }
+      }, (0, _ui.getI18n)('vxe.button.confirm'))]) : null])]), h('div', {
+        class: 'vxe-calendar--body'
+      }, $xeCalendar.renderDateTable(h))];
+    },
+    renderVN: function renderVN(h) {
+      var $xeCalendar = this;
+      var props = $xeCalendar;
+      var className = props.className,
+        type = props.type;
+      var vSize = $xeCalendar.computeSize;
+      var isDisabled = $xeCalendar.computeIsDisabled;
+      var calendarStyle = $xeCalendar.computeCalendarStyle;
+      return h('div', {
+        ref: 'refElem',
+        class: ['vxe-calendar', "type--".concat(type), className, _defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--disabled', isDisabled)],
+        style: calendarStyle
+      }, [$xeCalendar.renderDatePanel(h)]);
+    }
+  },
+  watch: {
+    value: function value(val) {
+      var $xeCalendar = this;
+      var reactData = $xeCalendar.reactData;
+      reactData.inputValue = val;
+      $xeCalendar.changeValue();
+    },
+    type: function type() {
+      var $xeCalendar = this;
+      var reactData = $xeCalendar.reactData;
+      // 切换类型是重置内置变量
+      Object.assign(reactData, {
+        selectValue: null,
+        inputValue: null,
+        datePanelValue: null,
+        datePanelLabel: '',
+        datePanelType: 'day',
+        selectMonth: null,
+        currentDate: null
+      });
+      $xeCalendar.initValue();
+      $xeCalendar.dateOpenPanel();
+    },
+    computeDateLabelFormat: function computeDateLabelFormat() {
+      var $xeCalendar = this;
+      var props = $xeCalendar;
+      var reactData = $xeCalendar.reactData;
+      var isCalendarType = $xeCalendar.computeIsCalendarType;
+      if (isCalendarType) {
+        $xeCalendar.dateParseValue(reactData.datePanelValue);
+        reactData.inputValue = props.multiple ? $xeCalendar.computeDateMultipleLabel : reactData.datePanelLabel;
+      }
+    }
+  },
+  created: function created() {
+    var $xeCalendar = this;
+    var props = $xeCalendar;
+    var reactData = $xeCalendar.reactData;
+    reactData.selectValue = props.value;
+    reactData.inputValue = props.value;
+    $xeCalendar.initValue();
+  },
+  mounted: function mounted() {
+    var $xeCalendar = this;
+    $xeCalendar.dateOpenPanel();
+  },
+  render: function render(h) {
+    return this.renderVN(h);
+  }
+});