vxe-pc-ui 3.15.28 → 3.16.0

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

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