vxe-pc-ui 3.0.1 → 3.0.2

package/es/calendar/src/calendar.js

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