vxe-pc-ui 3.15.28 → 3.16.0

package/es/date-range-picker/src/date-range-picker.js

@@ -1,1679 +0,0 @@
-import { defineVxeComponent } from '../../ui/src/comp';
-import XEUtils from 'xe-utils';
-import { getConfig, getIcon, getI18n, commands, globalEvents, createEvent, GLOBAL_EVENT_KEYS, globalMixins, renderEmptyElement } from '../../ui';
-import { getFuncText, getLastZIndex, nextZIndex, isEnableConf } from '../../ui/src/utils';
-import { updatePanelPlacement, getEventTargetNode } from '../../ui/src/dom';
-import { parseDateString, parseDateObj, getRangeDateByCode, handleValueFormat, hasTimestampValueType, hasDateValueType, parseDateValue, getNextMonth, getPrevMonth, getNextYear, getPrevYear } from '../../date-panel/src/util';
-import { getSlotVNs } from '../../ui/src/vn';
-import { createComponentLog } from '../../ui/src/log';
-import VxeDatePanelComponent from '../../date-panel/src/date-panel';
-import VxeButtonComponent from '../../button/src/button';
-import VxeButtonGroupComponent from '../../button/src/button-group';
-const { errLog } = createComponentLog('date-range-picker');
-function createReactData() {
-    return {
-        initialized: false,
-        panelIndex: 0,
-        visiblePanel: false,
-        isAniVisible: false,
-        panelStyle: {},
-        panelPlacement: '',
-        isActivated: false,
-        selectStValue: '',
-        selectEdValue: '',
-        paneStartVal: [],
-        paneEndVal: []
-    };
-}
-function createInternalData() {
-    return {
-    // selectStatus: false
-    // hpTimeout: undefined
-    };
-}
-export default {
-    name: 'VxeDateRangePicker',
-    mixins: [
-        globalMixins.sizeMixin
-    ],
-    model: {
-        prop: 'value',
-        event: 'modelValue'
-    },
-    props: {
-        value: [String, Number, Date, Array],
-        startValue: [String, Number, Date],
-        endValue: [String, Number, Date],
-        immediate: {
-            type: Boolean,
-            default: true
-        },
-        name: String,
-        type: {
-            type: String,
-            default: 'date'
-        },
-        clearable: {
-            type: Boolean,
-            default: () => getConfig().dateRangePicker.clearable
-        },
-        linkedPanels: {
-            type: Boolean,
-            default: () => getConfig().dateRangePicker.linkedPanels
-        },
-        readonly: {
-            type: Boolean,
-            default: null
-        },
-        disabled: {
-            type: Boolean,
-            default: null
-        },
-        placeholder: String,
-        autoComplete: {
-            type: String,
-            default: 'off'
-        },
-        form: String,
-        className: String,
-        zIndex: Number,
-        size: {
-            type: String,
-            default: () => getConfig().dateRangePicker.size || getConfig().size
-        },
-        // startDate: {
-        //   type: [String, Number, Date] as PropType<VxeDateRangePickerPropTypes.StartDate>,
-        //   default: () => getConfig().dateRangePicker.startDate
-        // },
-        // endDate: {
-        //   type: [String, Number, Date] as PropType<VxeDateRangePickerPropTypes.EndDate>,
-        //   default: () => getConfig().dateRangePicker.endDate
-        // },
-        minDate: [String, Number, Date],
-        maxDate: [String, Number, Date],
-        defaultDate: [String, Number, Date, Array],
-        defaultTime: [String, Number, Date, Array],
-        startDay: {
-            type: [String, Number],
-            default: () => getConfig().dateRangePicker.startDay
-        },
-        labelFormat: String,
-        valueFormat: String,
-        timeFormat: String,
-        valueType: String,
-        editable: {
-            type: Boolean,
-            default: true
-        },
-        festivalMethod: {
-            type: Function,
-            default: () => getConfig().dateRangePicker.festivalMethod
-        },
-        disabledMethod: {
-            type: Function,
-            default: () => getConfig().dateRangePicker.disabledMethod
-        },
-        separator: {
-            type: [String, Number],
-            default: () => getConfig().dateRangePicker.separator
-        },
-        // week
-        selectDay: {
-            type: [String, Number],
-            default: () => getConfig().dateRangePicker.selectDay
-        },
-        showClearButton: {
-            type: Boolean,
-            default: () => getConfig().dateRangePicker.showClearButton
-        },
-        showConfirmButton: {
-            type: Boolean,
-            default: () => getConfig().dateRangePicker.showConfirmButton
-        },
-        autoClose: {
-            type: Boolean,
-            default: () => getConfig().dateRangePicker.autoClose
-        },
-        prefixIcon: String,
-        suffixIcon: String,
-        placement: String,
-        transfer: {
-            type: Boolean,
-            default: null
-        },
-        timeConfig: Object,
-        popupConfig: Object,
-        shortcutConfig: Object
-    },
-    inject: {
-        $xeModal: {
-            default: null
-        },
-        $xeDrawer: {
-            default: null
-        },
-        $xeTable: {
-            default: null
-        },
-        $xeForm: {
-            default: null
-        },
-        formItemInfo: {
-            from: 'xeFormItemInfo',
-            default: null
-        }
-    },
-    provide() {
-        const $xeDateRangePicker = this;
-        return {
-            $xeDateRangePicker
-        };
-    },
-    data() {
-        const xID = XEUtils.uniqueId();
-        const reactData = createReactData();
-        return Object.assign(Object.assign({}, {}), { xID,
-            reactData });
-    },
-    computed: Object.assign(Object.assign({}, {}), { computeBtnTransfer() {
-            const $xeDateRangePicker = this;
-            const props = $xeDateRangePicker;
-            const $xeTable = $xeDateRangePicker.$xeTable;
-            const $xeModal = $xeDateRangePicker.$xeModal;
-            const $xeDrawer = $xeDateRangePicker.$xeDrawer;
-            const $xeForm = $xeDateRangePicker.$xeForm;
-            const { transfer } = props;
-            const popupOpts = $xeDateRangePicker.computePopupOpts;
-            if (XEUtils.isBoolean(popupOpts.transfer)) {
-                return popupOpts.transfer;
-            }
-            if (transfer === null) {
-                const globalTransfer = getConfig().dateRangePicker.transfer;
-                if (XEUtils.isBoolean(globalTransfer)) {
-                    return globalTransfer;
-                }
-                if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
-                    return true;
-                }
-            }
-            return transfer;
-        },
-        computeFormReadonly() {
-            const $xeDateRangePicker = this;
-            const props = $xeDateRangePicker;
-            const $xeForm = $xeDateRangePicker.$xeForm;
-            const { readonly } = props;
-            if (readonly === null) {
-                if ($xeForm) {
-                    return $xeForm.readonly;
-                }
-                return false;
-            }
-            return readonly;
-        },
-        computeIsDisabled() {
-            const $xeDateRangePicker = this;
-            const props = $xeDateRangePicker;
-            const $xeForm = $xeDateRangePicker.$xeForm;
-            const { disabled } = props;
-            if (disabled === null) {
-                if ($xeForm) {
-                    return $xeForm.disabled;
-                }
-                return false;
-            }
-            return disabled;
-        },
-        computeDefaultDates() {
-            const $xeDateRangePicker = this;
-            const props = $xeDateRangePicker;
-            const { defaultDate } = props;
-            if (defaultDate) {
-                if (XEUtils.isArray(defaultDate)) {
-                    return defaultDate;
-                }
-                if (`${defaultDate}`.indexOf(',') > -1) {
-                    return `${defaultDate}`.split(',');
-                }
-                return [defaultDate, defaultDate];
-            }
-            return [];
-        },
-        computeDefaultTimes() {
-            const $xeDateRangePicker = this;
-            const props = $xeDateRangePicker;
-            const { defaultTime } = props;
-            if (defaultTime) {
-                if (XEUtils.isArray(defaultTime)) {
-                    return defaultTime;
-                }
-                if (`${defaultTime}`.indexOf(',') > -1) {
-                    return `${defaultTime}`.split(',');
-                }
-                return [defaultTime, defaultTime];
-            }
-            return [];
-        },
-        computeMVal() {
-            const $xeDateRangePicker = this;
-            const props = $xeDateRangePicker;
-            const { startValue, endValue } = props;
-            return `${startValue || ''}${endValue || ''}`;
-        },
-        computeIsTimeType() {
-            const $xeDateRangePicker = this;
-            const props = $xeDateRangePicker;
-            const { type } = props;
-            return type === 'time';
-        },
-        computeIsTimeOrDateTimeType() {
-            const $xeDateRangePicker = this;
-            const props = $xeDateRangePicker;
-            const { type } = props;
-            const isTimeType = $xeDateRangePicker.computeIsTimeType;
-            return isTimeType || type === 'datetime';
-        },
-        computeIsDatePickerType() {
-            const $xeDateRangePicker = this;
-            const props = $xeDateRangePicker;
-            return ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
-        },
-        computeIsClearable() {
-            const $xeDateRangePicker = this;
-            const props = $xeDateRangePicker;
-            return props.clearable;
-        },
-        computeInpPlaceholder() {
-            const $xeDateRangePicker = this;
-            const props = $xeDateRangePicker;
-            const { placeholder } = props;
-            if (placeholder) {
-                return getFuncText(placeholder);
-            }
-            const globalPlaceholder = getConfig().dateRangePicker.placeholder;
-            if (globalPlaceholder) {
-                return getFuncText(globalPlaceholder);
-            }
-            return getI18n('vxe.dateRangePicker.pleaseRange');
-        },
-        computeInpImmediate() {
-            const $xeDateRangePicker = this;
-            const props = $xeDateRangePicker;
-            const { immediate } = props;
-            return immediate;
-        },
-        computeTimeOpts() {
-            const $xeDatePicker = this;
-            const props = $xeDatePicker;
-            return Object.assign({}, getConfig().dateRangePicker.timeConfig, props.timeConfig);
-        },
-        computePopupOpts() {
-            const $xeDateRangePicker = this;
-            const props = $xeDateRangePicker;
-            return Object.assign({}, getConfig().dateRangePicker.popupConfig, props.popupConfig);
-        },
-        computeShortcutOpts() {
-            const $xeDateRangePicker = this;
-            const props = $xeDateRangePicker;
-            return Object.assign({}, getConfig().dateRangePicker.shortcutConfig, props.shortcutConfig);
-        },
-        computeShortcutList() {
-            const $xeDateRangePicker = this;
-            const shortcutOpts = $xeDateRangePicker.computeShortcutOpts;
-            const { options } = shortcutOpts;
-            if (options) {
-                return options.map((option, index) => {
-                    return Object.assign({
-                        name: `${option.name || option.code || index}`
-                    }, option);
-                });
-            }
-            return [];
-        },
-        computeDateLabelFormat() {
-            const $xeDateRangePicker = this;
-            const props = $xeDateRangePicker;
-            const { labelFormat } = props;
-            return labelFormat || getI18n(`vxe.input.date.labelFormat.${props.type}`);
-        },
-        computeDateValueFormat() {
-            const $xeDateRangePicker = this;
-            const props = $xeDateRangePicker;
-            const { type, valueFormat } = props;
-            return handleValueFormat(type, valueFormat);
-        },
-        computeFirstDayOfWeek() {
-            const $xeDateRangePicker = this;
-            const props = $xeDateRangePicker;
-            const { startDay } = props;
-            return XEUtils.toNumber(startDay);
-        },
-        computePanelLabelObj() {
-            const $xeDateRangePicker = this;
-            const reactData = $xeDateRangePicker.reactData;
-            const { selectStValue, selectEdValue } = reactData;
-            const vals = selectStValue || selectEdValue ? [selectStValue || '', selectEdValue || ''] : [];
-            return $xeDateRangePicker.formatRangeLabel(vals);
-        },
-        computeInputLabel() {
-            const $xeDateRangePicker = this;
-            const panelLabelObj = $xeDateRangePicker.computePanelLabelObj;
-            return panelLabelObj.label;
-        } }),
-    methods: {
-        //
-        // Method
-        //
-        dispatchEvent(type, params, evnt) {
-            const $xeDateRangePicker = this;
-            $xeDateRangePicker.$emit(type, createEvent(evnt, { $dateRangePicker: $xeDateRangePicker }, params));
-        },
-        emitModel(value) {
-            const $xeDateRangePicker = this;
-            const { _events } = $xeDateRangePicker;
-            if (_events && _events.modelValue) {
-                $xeDateRangePicker.$emit('modelValue', value);
-            }
-            else {
-                $xeDateRangePicker.$emit('model-value', value);
-            }
-        },
-        formatRangeLabel(vals) {
-            const $xeDateRangePicker = this;
-            const props = $xeDateRangePicker;
-            const { type, separator } = props;
-            const dateLabelFormat = $xeDateRangePicker.computeDateLabelFormat;
-            const dateValueFormat = $xeDateRangePicker.computeDateValueFormat;
-            const firstDayOfWeek = $xeDateRangePicker.computeFirstDayOfWeek;
-            const startRest = vals[0]
-                ? parseDateObj(vals[0], type, {
-                    valueFormat: dateValueFormat,
-                    labelFormat: dateLabelFormat,
-                    firstDay: firstDayOfWeek
-                })
-                : null;
-            const endRest = vals[1]
-                ? parseDateObj(vals[1], type, {
-                    valueFormat: dateValueFormat,
-                    labelFormat: dateLabelFormat,
-                    firstDay: firstDayOfWeek
-                })
-                : null;
-            const startLabel = startRest ? startRest.label : '';
-            const endLabel = endRest ? endRest.label : '';
-            return {
-                label: (startLabel || endLabel ? [startLabel, endLabel] : []).join(`${separator || ' ~ '}`),
-                startLabel,
-                endLabel
-            };
-        },
-        getRangeValue(sValue, eValue) {
-            const $xeDateRangePicker = this;
-            const props = $xeDateRangePicker;
-            const { value: modelValue, valueType, valueFormat } = props;
-            let isArr = valueFormat === 'date' || XEUtils.isArray(modelValue);
-            if (valueType) {
-                switch (valueType) {
-                    case 'array':
-                        isArr = true;
-                        break;
-                    case 'string':
-                        isArr = false;
-                        break;
-                }
-            }
-            if (sValue || eValue) {
-                const rest = [sValue || null, eValue || null];
-                if (isArr) {
-                    return rest;
-                }
-                return rest.join(',');
-            }
-            return isArr ? [] : '';
-        },
-        paraeUpdateModel() {
-            const $xeDateRangePicker = this;
-            const props = $xeDateRangePicker;
-            const { type, value: modelValue } = props;
-            const dateValueFormat = $xeDateRangePicker.computeDateValueFormat;
-            let sValue = '';
-            let eValue = '';
-            if (XEUtils.isArray(modelValue)) {
-                const date1 = parseDateString(modelValue[0], type, { valueFormat: dateValueFormat });
-                const date2 = parseDateString(modelValue[1], type, { valueFormat: dateValueFormat });
-                if (date1 || date2) {
-                    sValue = date1 || '';
-                    eValue = date2 || '';
-                }
-            }
-            else if (XEUtils.isString(modelValue)) {
-                const strArr = modelValue.split(',');
-                if (strArr[0] || strArr[1]) {
-                    sValue = strArr[0] || '';
-                    eValue = strArr[1] || '';
-                }
-            }
-            return {
-                sValue,
-                eValue
-            };
-        },
-        parseUpdateData() {
-            const $xeDateRangePicker = this;
-            const props = $xeDateRangePicker;
-            const { type, startValue, endValue } = props;
-            const dateValueFormat = $xeDateRangePicker.computeDateValueFormat;
-            let sValue = '';
-            let eValue = '';
-            sValue = parseDateString(startValue, type, { valueFormat: dateValueFormat });
-            eValue = parseDateString(endValue, type, { valueFormat: dateValueFormat });
-            return {
-                sValue,
-                eValue
-            };
-        },
-        updateModelValue(isModel) {
-            const $xeDateRangePicker = this;
-            const props = $xeDateRangePicker;
-            const reactData = $xeDateRangePicker.reactData;
-            const { value: modelValue, startValue, endValue, valueFormat } = props;
-            let restObj = {
-                sValue: '',
-                eValue: ''
-            };
-            if (isModel) {
-                if (modelValue) {
-                    restObj = $xeDateRangePicker.paraeUpdateModel();
-                }
-                else {
-                    restObj = $xeDateRangePicker.parseUpdateData();
-                }
-            }
-            else {
-                if (startValue || endValue) {
-                    restObj = $xeDateRangePicker.parseUpdateData();
-                }
-                else {
-                    restObj = $xeDateRangePicker.paraeUpdateModel();
-                }
-            }
-            let startRest = restObj.sValue;
-            let endRest = restObj.eValue;
-            if (valueFormat === 'timestamp') {
-                if (XEUtils.isString(startRest) && /^\d+$/.test(startRest)) {
-                    startRest = Number(startRest);
-                }
-                if (XEUtils.isString(endRest) && /^\d+$/.test(endRest)) {
-                    endRest = Number(endRest);
-                }
-            }
-            reactData.selectStValue = startRest;
-            reactData.selectEdValue = endRest;
-            reactData.paneEndVal = [startRest, endRest];
-            reactData.paneStartVal = [startRest, endRest];
-        },
-        triggerEvent(evnt) {
-            const $xeDateRangePicker = this;
-            const reactData = $xeDateRangePicker.reactData;
-            const { selectStValue, selectEdValue } = reactData;
-            const value = $xeDateRangePicker.getRangeValue(selectStValue, selectEdValue);
-            $xeDateRangePicker.dispatchEvent(evnt.type, { value, startValue: selectStValue, endValue: selectEdValue }, evnt);
-        },
-        handleChange(sValue, eValue, evnt) {
-            const $xeDateRangePicker = this;
-            const props = $xeDateRangePicker;
-            const reactData = $xeDateRangePicker.reactData;
-            const $xeForm = $xeDateRangePicker.$xeForm;
-            const formItemInfo = $xeDateRangePicker.formItemInfo;
-            const { type, value: modelValue, valueFormat } = props;
-            const dateValueFormat = $xeDateRangePicker.computeDateValueFormat;
-            let startRest = sValue;
-            let endRest = eValue;
-            if (hasTimestampValueType(valueFormat)) {
-                if (startRest) {
-                    const dateVal = parseDateValue(startRest, type, { valueFormat: dateValueFormat });
-                    startRest = dateVal ? dateVal.getTime() : null;
-                }
-                if (endRest) {
-                    const dateVal = parseDateValue(endRest, type, { valueFormat: dateValueFormat });
-                    endRest = dateVal ? dateVal.getTime() : null;
-                }
-            }
-            else if (hasDateValueType(valueFormat)) {
-                if (startRest) {
-                    startRest = parseDateValue(startRest, type, { valueFormat: dateValueFormat });
-                }
-                if (endRest) {
-                    endRest = parseDateValue(endRest, type, { valueFormat: dateValueFormat });
-                }
-            }
-            reactData.selectStValue = startRest;
-            reactData.selectEdValue = endRest;
-            const value = $xeDateRangePicker.getRangeValue(startRest, endRest);
-            const isFinish = (startRest && endRest) || (!startRest && !endRest);
-            $xeDateRangePicker.$emit('update:modelValue', value);
-            $xeDateRangePicker.$emit('update:startValue', startRest || '');
-            $xeDateRangePicker.$emit('update:endValue', endRest || '');
-            if (XEUtils.toValueString(modelValue) !== value) {
-                $xeDateRangePicker.dispatchEvent('change', { value, startValue: startRest, endValue: endRest, isFinish }, evnt);
-                // 自动更新校验状态
-                if ($xeForm && formItemInfo) {
-                    $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
-                }
-            }
-        },
-        changeEvent(evnt) {
-            const $xeDateRangePicker = this;
-            const inpImmediate = $xeDateRangePicker.computeInpImmediate;
-            if (!inpImmediate) {
-                $xeDateRangePicker.triggerEvent(evnt);
-            }
-        },
-        focusEvent(evnt) {
-            const $xeDateRangePicker = this;
-            const reactData = $xeDateRangePicker.reactData;
-            const popupOpts = $xeDateRangePicker.computePopupOpts;
-            const { trigger } = popupOpts;
-            reactData.isActivated = true;
-            if (!trigger || trigger === 'default') {
-                $xeDateRangePicker.dateRangePickerOpenEvent(evnt);
-            }
-            else if (trigger === 'icon') {
-                $xeDateRangePicker.hidePanel();
-            }
-            $xeDateRangePicker.triggerEvent(evnt);
-        },
-        clickPrefixEvent(evnt) {
-            const $xeDateRangePicker = this;
-            const reactData = $xeDateRangePicker.reactData;
-            const isDisabled = $xeDateRangePicker.computeIsDisabled;
-            if (!isDisabled) {
-                const { selectStValue, selectEdValue } = reactData;
-                const value = $xeDateRangePicker.getRangeValue(selectStValue, selectEdValue);
-                $xeDateRangePicker.dispatchEvent('prefix-click', { value, startValue: selectStValue, endValue: selectEdValue }, evnt);
-            }
-        },
-        hidePanel() {
-            const $xeDateRangePicker = this;
-            const reactData = $xeDateRangePicker.reactData;
-            const internalData = $xeDateRangePicker.internalData;
-            return new Promise(resolve => {
-                reactData.visiblePanel = false;
-                internalData.hpTimeout = setTimeout(() => {
-                    reactData.isAniVisible = false;
-                    resolve();
-                }, 350);
-            });
-        },
-        clearValueEvent(evnt, value) {
-            const $xeDateRangePicker = this;
-            const isDatePickerType = $xeDateRangePicker.computeIsDatePickerType;
-            if (isDatePickerType) {
-                $xeDateRangePicker.hidePanel();
-            }
-            const startValue = '';
-            const endValue = '';
-            $xeDateRangePicker.handleChange(startValue, endValue, evnt);
-            $xeDateRangePicker.dispatchEvent('clear', { value, startValue, endValue }, evnt);
-        },
-        checkValue() {
-            const $xeDateRangePicker = this;
-            const $startDatePanel = $xeDateRangePicker.$refs.refStartDatePanel;
-            const $endDatePanel = $xeDateRangePicker.$refs.refEndDatePanel;
-            if ($startDatePanel && $endDatePanel) {
-                const startValue = $startDatePanel.getModelValue();
-                const endValue = $endDatePanel.getModelValue();
-                if (!startValue || !endValue) {
-                    $xeDateRangePicker.handleChange('', '', { type: 'check' });
-                }
-            }
-        },
-        panelCellClassName({ date }) {
-            const $xeDateRangePicker = this;
-            const reactData = $xeDateRangePicker.reactData;
-            const startValue = reactData.selectStValue;
-            const endValue = reactData.selectEdValue;
-            if (startValue && endValue) {
-                const currTime = date.getTime();
-                const startTime = XEUtils.toStringDate(startValue).getTime();
-                const endTime = XEUtils.toStringDate(endValue).getTime();
-                if (currTime >= startTime && currTime <= endTime) {
-                    return 'is--range-selected';
-                }
-            }
-            return '';
-        },
-        handleSelectClose() {
-            const $xeDateRangePicker = this;
-            const props = $xeDateRangePicker;
-            const reactData = $xeDateRangePicker.reactData;
-            const internalData = $xeDateRangePicker.internalData;
-            const { autoClose } = props;
-            const { selectStValue, selectEdValue } = reactData;
-            const { selectStatus } = internalData;
-            const isDatePickerType = $xeDateRangePicker.computeIsDatePickerType;
-            if (autoClose) {
-                if (selectStatus && isDatePickerType) {
-                    if (selectStValue && selectEdValue) {
-                        $xeDateRangePicker.hidePanel();
-                    }
-                }
-            }
-            else {
-                if (selectStValue && selectEdValue) {
-                    internalData.selectStatus = false;
-                }
-            }
-        },
-        clickSuffixEvent(evnt) {
-            const $xeDateRangePicker = this;
-            const reactData = $xeDateRangePicker.reactData;
-            const isDisabled = $xeDateRangePicker.computeIsDisabled;
-            if (!isDisabled) {
-                const { selectStValue, selectEdValue } = reactData;
-                const value = $xeDateRangePicker.getRangeValue(selectStValue, selectEdValue);
-                $xeDateRangePicker.dispatchEvent('suffix-click', { value, startValue: selectStValue, endValue: selectEdValue }, evnt);
-            }
-        },
-        blurEvent(evnt) {
-            const $xeDateRangePicker = this;
-            const reactData = $xeDateRangePicker.reactData;
-            const $xeForm = $xeDateRangePicker.$xeForm;
-            const formItemInfo = $xeDateRangePicker.formItemInfo;
-            const { selectStValue, selectEdValue } = reactData;
-            const inpImmediate = $xeDateRangePicker.computeInpImmediate;
-            const value = '';
-            if (!inpImmediate) {
-                $xeDateRangePicker.handleChange(selectStValue, selectEdValue, evnt);
-            }
-            if (!reactData.visiblePanel) {
-                reactData.isActivated = false;
-            }
-            $xeDateRangePicker.dispatchEvent('blur', { value, startValue: selectStValue, endValue: selectEdValue }, evnt);
-            // 自动更新校验状态
-            if ($xeForm && formItemInfo) {
-                $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
-            }
-        },
-        keydownEvent(evnt) {
-            const $xeDateRangePicker = this;
-            $xeDateRangePicker.triggerEvent(evnt);
-        },
-        keyupEvent(evnt) {
-            const $xeDateRangePicker = this;
-            $xeDateRangePicker.triggerEvent(evnt);
-        },
-        confirmEvent(evnt) {
-            const $xeDateRangePicker = this;
-            const isTimeType = $xeDateRangePicker.computeIsTimeType;
-            const $startDatePanel = $xeDateRangePicker.$refs.refStartDatePanel;
-            const $endDatePanel = $xeDateRangePicker.$refs.refEndDatePanel;
-            if ($startDatePanel && $endDatePanel) {
-                const startValue = $startDatePanel.getModelValue();
-                const endValue = $endDatePanel.getModelValue();
-                if (isTimeType) {
-                    $startDatePanel.confirmByEvent(evnt);
-                    $endDatePanel.confirmByEvent(evnt);
-                }
-                else if ((startValue && !endValue) || (!startValue && endValue)) {
-                    $xeDateRangePicker.handleChange('', '', evnt);
-                }
-                else {
-                    $startDatePanel.confirmByEvent(evnt);
-                    $endDatePanel.confirmByEvent(evnt);
-                }
-                const value = $xeDateRangePicker.getRangeValue(startValue, endValue);
-                $xeDateRangePicker.dispatchEvent('confirm', { value, startValue, endValue }, evnt);
-            }
-            $xeDateRangePicker.hidePanel();
-        },
-        startPanelChangeEvent(params) {
-            const $xeDateRangePicker = this;
-            const reactData = $xeDateRangePicker.reactData;
-            const internalData = $xeDateRangePicker.internalData;
-            const { selectStatus } = internalData;
-            const { value, currValue, $event } = params;
-            const paneVals = value ? (XEUtils.isString(value) ? value.split(',') : [value]) : [];
-            let startValue = '';
-            let endValue = '';
-            if (selectStatus) {
-                startValue = paneVals[0];
-                if (paneVals[1]) {
-                    endValue = paneVals[1];
-                }
-                else {
-                    endValue = reactData.selectEdValue;
-                }
-            }
-            else {
-                startValue = currValue || XEUtils.last(paneVals);
-            }
-            reactData.paneEndVal = [startValue, endValue];
-            reactData.paneStartVal = [startValue, endValue];
-            $xeDateRangePicker.handleChange(startValue, endValue, $event);
-            $xeDateRangePicker.handleSelectClose();
-            if (selectStatus) {
-                if (startValue && endValue) {
-                    internalData.selectStatus = false;
-                }
-            }
-            else {
-                internalData.selectStatus = true;
-            }
-            $xeDateRangePicker.$nextTick(() => {
-                $xeDateRangePicker.handleUpdateStartPanelDate();
-            });
-        },
-        endPanelChangeEvent(params) {
-            const $xeDateRangePicker = this;
-            const reactData = $xeDateRangePicker.reactData;
-            const internalData = $xeDateRangePicker.internalData;
-            const { selectStatus } = internalData;
-            const { value, currValue, $event } = params;
-            const paneVals = value ? (XEUtils.isString(value) ? value.split(',') : [value]) : [];
-            let startValue = '';
-            let endValue = '';
-            if (selectStatus) {
-                endValue = paneVals[0];
-                if (paneVals[1]) {
-                    startValue = paneVals[0];
-                    endValue = paneVals[1];
-                }
-                else {
-                    startValue = reactData.selectStValue;
-                }
-            }
-            else {
-                endValue = currValue || XEUtils.last(paneVals);
-            }
-            reactData.paneEndVal = [startValue, endValue];
-            reactData.paneStartVal = [startValue, endValue];
-            $xeDateRangePicker.handleChange(startValue, endValue, $event);
-            $xeDateRangePicker.handleSelectClose();
-            if (selectStatus) {
-                if (startValue && endValue) {
-                    internalData.selectStatus = false;
-                }
-            }
-            else {
-                internalData.selectStatus = true;
-            }
-            $xeDateRangePicker.$nextTick(() => {
-                $xeDateRangePicker.handleUpdateEndPanelDate();
-            });
-        },
-        handleUpdateStartPanelDate() {
-            const $xeDateRangePicker = this;
-            const $startDatePanel = $xeDateRangePicker.$refs.refStartDatePanel;
-            const $endDatePanel = $xeDateRangePicker.$refs.refEndDatePanel;
-            if (!$startDatePanel || !$endDatePanel) {
-                return;
-            }
-            const startPanelDate = $startDatePanel.getPanelDate();
-            const endPanelDate = $endDatePanel.getPanelDate();
-            if (!startPanelDate || !endPanelDate) {
-                return;
-            }
-            const viewType = $startDatePanel.getViewType();
-            const startYear = startPanelDate.getFullYear();
-            const startMonth = startPanelDate.getMonth();
-            const endYear = endPanelDate.getFullYear();
-            const endMonth = endPanelDate.getMonth();
-            switch (viewType) {
-                case 'day':
-                case 'date':
-                case 'week': {
-                    if (endYear <= startYear && endMonth <= startMonth) {
-                        $endDatePanel.setPanelDate(getNextMonth(startPanelDate));
-                    }
-                    break;
-                }
-                case 'month':
-                case 'quarter': {
-                    if (endYear <= startYear) {
-                        $endDatePanel.setPanelDate(getNextYear(startPanelDate));
-                    }
-                    break;
-                }
-                case 'year': {
-                    const yearList = $startDatePanel.computeYearList;
-                    if (yearList.some((item) => XEUtils.isDateSame(item.date, endPanelDate, 'yyyy'))) {
-                        $endDatePanel.setPanelDate(getNextYear(startPanelDate, yearList.length));
-                    }
-                    break;
-                }
-            }
-        },
-        startPanelDateBtnChangeEvent() {
-            const $xeDateRangePicker = this;
-            const props = $xeDateRangePicker;
-            const { linkedPanels } = props;
-            const $startDatePanel = $xeDateRangePicker.$refs.refStartDatePanel;
-            const $endDatePanel = $xeDateRangePicker.$refs.refEndDatePanel;
-            if (!$startDatePanel || !$endDatePanel) {
-                return;
-            }
-            const startPanelDate = $startDatePanel.getPanelDate();
-            const endPanelDate = $endDatePanel.getPanelDate();
-            if (!startPanelDate || !endPanelDate) {
-                return;
-            }
-            const viewType = $startDatePanel.getViewType();
-            if (linkedPanels) {
-                switch (viewType) {
-                    case 'day':
-                    case 'date':
-                    case 'week': {
-                        $endDatePanel.setPanelDate(getNextMonth(startPanelDate));
-                        break;
-                    }
-                    case 'month':
-                    case 'quarter': {
-                        $endDatePanel.setPanelDate(getNextYear(startPanelDate));
-                        break;
-                    }
-                    case 'year': {
-                        const yearList = $startDatePanel.computeYearList;
-                        $endDatePanel.setPanelDate(getNextYear(startPanelDate, yearList.length));
-                        break;
-                    }
-                }
-            }
-            else {
-                $xeDateRangePicker.handleUpdateStartPanelDate();
-            }
-        },
-        handleUpdateEndPanelDate() {
-            const $xeDateRangePicker = this;
-            const $startDatePanel = $xeDateRangePicker.$refs.refStartDatePanel;
-            const $endDatePanel = $xeDateRangePicker.$refs.refEndDatePanel;
-            if (!$startDatePanel || !$endDatePanel) {
-                return;
-            }
-            const startPanelDate = $startDatePanel.getPanelDate();
-            const endPanelDate = $endDatePanel.getPanelDate();
-            if (!startPanelDate || !endPanelDate) {
-                return;
-            }
-            const viewType = $endDatePanel.getViewType();
-            const startYear = startPanelDate.getFullYear();
-            const startMonth = startPanelDate.getMonth();
-            const endYear = endPanelDate.getFullYear();
-            const endMonth = endPanelDate.getMonth();
-            switch (viewType) {
-                case 'day':
-                case 'date':
-                case 'week': {
-                    if (startYear >= endYear && startMonth >= endMonth) {
-                        $startDatePanel.setPanelDate(getPrevMonth(endPanelDate));
-                    }
-                    break;
-                }
-                case 'month':
-                case 'quarter': {
-                    if (startYear >= endYear) {
-                        $startDatePanel.setPanelDate(getPrevYear(endPanelDate));
-                    }
-                    break;
-                }
-                case 'year': {
-                    const yearList = $endDatePanel.computeYearList;
-                    if (yearList.some((item) => XEUtils.isDateSame(item.date, startPanelDate, 'yyyy'))) {
-                        $startDatePanel.setPanelDate(getPrevYear(endPanelDate, yearList.length));
-                    }
-                    break;
-                }
-            }
-        },
-        endPanelDateBtnChangeEvent() {
-            const $xeDateRangePicker = this;
-            const props = $xeDateRangePicker;
-            const { linkedPanels } = props;
-            const $startDatePanel = $xeDateRangePicker.$refs.refStartDatePanel;
-            const $endDatePanel = $xeDateRangePicker.$refs.refEndDatePanel;
-            if (!$startDatePanel || !$endDatePanel) {
-                return;
-            }
-            const startPanelDate = $startDatePanel.getPanelDate();
-            const endPanelDate = $endDatePanel.getPanelDate();
-            if (!startPanelDate || !endPanelDate) {
-                return;
-            }
-            const viewType = $endDatePanel.getViewType();
-            if (linkedPanels) {
-                switch (viewType) {
-                    case 'day':
-                    case 'date':
-                    case 'week': {
-                        $startDatePanel.setPanelDate(getPrevMonth(endPanelDate));
-                        break;
-                    }
-                    case 'month':
-                    case 'quarter': {
-                        $startDatePanel.setPanelDate(getPrevYear(endPanelDate));
-                        break;
-                    }
-                    case 'year': {
-                        const yearList = $endDatePanel.computeYearList;
-                        $startDatePanel.setPanelDate(getPrevYear(endPanelDate, yearList.length));
-                        break;
-                    }
-                }
-            }
-            else {
-                $xeDateRangePicker.handleUpdateEndPanelDate();
-            }
-        },
-        // 全局事件
-        handleGlobalMousedownEvent(evnt) {
-            const $xeDateRangePicker = this;
-            const reactData = $xeDateRangePicker.reactData;
-            const { visiblePanel, isActivated } = reactData;
-            const el = $xeDateRangePicker.$refs.refElem;
-            const panelWrapperElem = $xeDateRangePicker.$refs.refPanelWrapper;
-            const isDisabled = $xeDateRangePicker.computeIsDisabled;
-            if (!isDisabled && isActivated) {
-                reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelWrapperElem).flag;
-                if (!reactData.isActivated) {
-                    if (visiblePanel) {
-                        $xeDateRangePicker.checkValue();
-                        $xeDateRangePicker.hidePanel();
-                    }
-                }
-            }
-        },
-        handleGlobalKeydownEvent(evnt) {
-            const $xeDateRangePicker = this;
-            const reactData = $xeDateRangePicker.reactData;
-            const { visiblePanel } = reactData;
-            const isDisabled = $xeDateRangePicker.computeIsDisabled;
-            if (!isDisabled) {
-                const isTab = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.TAB);
-                const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE);
-                if (isTab) {
-                    reactData.isActivated = false;
-                }
-                if (visiblePanel) {
-                    if (isEsc || isTab) {
-                        $xeDateRangePicker.checkValue();
-                        $xeDateRangePicker.hidePanel();
-                    }
-                }
-            }
-        },
-        handleGlobalMousewheelEvent(evnt) {
-            const $xeDateRangePicker = this;
-            const reactData = $xeDateRangePicker.reactData;
-            const { visiblePanel } = reactData;
-            const isDisabled = $xeDateRangePicker.computeIsDisabled;
-            if (!isDisabled) {
-                if (visiblePanel) {
-                    const panelWrapperElem = $xeDateRangePicker.$refs.refPanelWrapper;
-                    if (getEventTargetNode(evnt, panelWrapperElem).flag) {
-                        $xeDateRangePicker.updatePlacement();
-                    }
-                    else {
-                        $xeDateRangePicker.checkValue();
-                        $xeDateRangePicker.hidePanel();
-                    }
-                }
-            }
-        },
-        handleGlobalBlurEvent() {
-            const $xeDateRangePicker = this;
-            const reactData = $xeDateRangePicker.reactData;
-            const { visiblePanel, isActivated } = reactData;
-            if (visiblePanel) {
-                $xeDateRangePicker.checkValue();
-                $xeDateRangePicker.hidePanel();
-            }
-            if (isActivated) {
-                reactData.isActivated = false;
-            }
-            if (visiblePanel || isActivated) {
-                const targetElem = $xeDateRangePicker.$refs.refInputTarget;
-                if (targetElem) {
-                    targetElem.blur();
-                }
-            }
-        },
-        handleGlobalResizeEvent() {
-            const $xeDateRangePicker = this;
-            const reactData = $xeDateRangePicker.reactData;
-            const { visiblePanel } = reactData;
-            if (visiblePanel) {
-                $xeDateRangePicker.updatePlacement();
-            }
-        },
-        // 弹出面板
-        updateZindex() {
-            const $xeDateRangePicker = this;
-            const props = $xeDateRangePicker;
-            const reactData = $xeDateRangePicker.reactData;
-            const popupOpts = $xeDateRangePicker.computePopupOpts;
-            const customZIndex = popupOpts.zIndex || props.zIndex;
-            if (customZIndex) {
-                reactData.panelIndex = XEUtils.toNumber(customZIndex);
-            }
-            else if (reactData.panelIndex < getLastZIndex()) {
-                reactData.panelIndex = nextZIndex();
-            }
-        },
-        updatePlacement() {
-            const $xeDateRangePicker = this;
-            const props = $xeDateRangePicker;
-            const reactData = $xeDateRangePicker.reactData;
-            const { placement } = props;
-            const { panelIndex } = reactData;
-            const targetElem = $xeDateRangePicker.$refs.refInputTarget;
-            const panelElem = $xeDateRangePicker.$refs.refInputPanel;
-            if (!panelElem) {
-                return $xeDateRangePicker.$nextTick();
-            }
-            const btnTransfer = $xeDateRangePicker.computeBtnTransfer;
-            const popupOpts = $xeDateRangePicker.computePopupOpts;
-            const handleStyle = () => {
-                const ppObj = updatePanelPlacement(targetElem, panelElem, {
-                    placement: popupOpts.placement || placement,
-                    defaultPlacement: popupOpts.defaultPlacement,
-                    teleportTo: btnTransfer
-                });
-                const panelStyle = Object.assign(ppObj.style, {
-                    zIndex: panelIndex
-                });
-                reactData.panelStyle = panelStyle;
-                reactData.panelPlacement = ppObj.placement;
-            };
-            handleStyle();
-            return $xeDateRangePicker.$nextTick().then(handleStyle);
-        },
-        showPanel() {
-            const $xeDateRangePicker = this;
-            const reactData = $xeDateRangePicker.reactData;
-            const internalData = $xeDateRangePicker.internalData;
-            const { visiblePanel } = reactData;
-            const isDisabled = $xeDateRangePicker.computeIsDisabled;
-            const btnTransfer = $xeDateRangePicker.computeBtnTransfer;
-            const panelElem = $xeDateRangePicker.$refs.refInputPanel;
-            if (!isDisabled && !visiblePanel) {
-                if (!reactData.initialized) {
-                    reactData.initialized = true;
-                    if (btnTransfer && panelElem) {
-                        document.body.appendChild(panelElem);
-                    }
-                }
-                if (internalData.hpTimeout) {
-                    clearTimeout(internalData.hpTimeout);
-                    internalData.hpTimeout = undefined;
-                }
-                internalData.selectStatus = false;
-                reactData.isActivated = true;
-                reactData.isAniVisible = true;
-                setTimeout(() => {
-                    reactData.visiblePanel = true;
-                    $xeDateRangePicker.handleUpdateStartPanelDate();
-                    $xeDateRangePicker.updatePlacement();
-                }, 10);
-                $xeDateRangePicker.updateZindex();
-                return $xeDateRangePicker.updatePlacement();
-            }
-            return $xeDateRangePicker.$nextTick();
-        },
-        dateRangePickerOpenEvent(evnt) {
-            const $xeDateRangePicker = this;
-            const formReadonly = $xeDateRangePicker.computeFormReadonly;
-            if (!formReadonly) {
-                evnt.preventDefault();
-                $xeDateRangePicker.showPanel();
-            }
-        },
-        clickIconEvent(evnt) {
-            const $xeDateRangePicker = this;
-            const reactData = $xeDateRangePicker.reactData;
-            const { visiblePanel } = reactData;
-            const popupOpts = $xeDateRangePicker.computePopupOpts;
-            const { trigger } = popupOpts;
-            if (!trigger || trigger === 'default' || trigger === 'icon') {
-                if (visiblePanel) {
-                    $xeDateRangePicker.hidePanel();
-                }
-                else {
-                    $xeDateRangePicker.dateRangePickerOpenEvent(evnt);
-                }
-            }
-        },
-        clickEvent(evnt) {
-            const $xeDateRangePicker = this;
-            $xeDateRangePicker.triggerEvent(evnt);
-        },
-        handleShortcutEvent({ option, $event }) {
-            const $xeDateRangePicker = this;
-            const props = $xeDateRangePicker;
-            const reactData = $xeDateRangePicker.reactData;
-            const { type } = props;
-            const shortcutOpts = $xeDateRangePicker.computeShortcutOpts;
-            const { autoClose } = shortcutOpts;
-            const { code, clickMethod } = option;
-            let startValue = reactData.selectStValue;
-            let endValue = reactData.selectEdValue;
-            let value = $xeDateRangePicker.getRangeValue(startValue, endValue);
-            const shortcutParams = {
-                $dateRangePicker: $xeDateRangePicker,
-                option: option,
-                value,
-                startValue,
-                endValue,
-                code
-            };
-            if (!clickMethod && code) {
-                const gCommandOpts = commands.get(code);
-                const drpCommandMethod = gCommandOpts ? gCommandOpts.dateRangePickerCommandMethod : null;
-                if (drpCommandMethod) {
-                    drpCommandMethod(shortcutParams);
-                }
-                else {
-                    const dateValueFormat = $xeDateRangePicker.computeDateValueFormat;
-                    const firstDayOfWeek = $xeDateRangePicker.computeFirstDayOfWeek;
-                    switch (code) {
-                        case 'last1':
-                        case 'last3':
-                        case 'last7':
-                        case 'last30':
-                        case 'last60':
-                        case 'last90':
-                        case 'last180': {
-                            const restObj = getRangeDateByCode(code, value, type, {
-                                valueFormat: dateValueFormat,
-                                firstDay: firstDayOfWeek
-                            });
-                            startValue = restObj.startValue;
-                            endValue = restObj.endValue;
-                            value = $xeDateRangePicker.getRangeValue(startValue, endValue);
-                            shortcutParams.value = value;
-                            shortcutParams.startValue = startValue;
-                            shortcutParams.endValue = endValue;
-                            $xeDateRangePicker.handleChange(startValue, endValue, $event);
-                            break;
-                        }
-                        default:
-                            errLog('vxe.error.notCommands', [code]);
-                            break;
-                    }
-                }
-            }
-            else {
-                const optClickMethod = clickMethod || shortcutOpts.clickMethod;
-                if (optClickMethod) {
-                    optClickMethod(shortcutParams);
-                }
-            }
-            if (autoClose) {
-                $xeDateRangePicker.hidePanel();
-            }
-            $xeDateRangePicker.dispatchEvent('shortcut-click', shortcutParams, $event);
-        },
-        setModelValue(startValue, endValue) {
-            const $xeDateRangePicker = this;
-            const reactData = $xeDateRangePicker.reactData;
-            reactData.selectStValue = startValue || '';
-            reactData.selectEdValue = endValue || '';
-            const value = $xeDateRangePicker.getRangeValue(startValue, endValue);
-            $xeDateRangePicker.emitModel(value);
-        },
-        setModelValueByEvent(evnt, startValue, endValue) {
-            const $xeDateRangePicker = this;
-            $xeDateRangePicker.handleChange(startValue || '', endValue || '', evnt);
-        },
-        focus() {
-            const $xeDateRangePicker = this;
-            const reactData = $xeDateRangePicker.reactData;
-            const inputElem = $xeDateRangePicker.$refs.refInputTarget;
-            reactData.isActivated = true;
-            inputElem.focus();
-            return $xeDateRangePicker.$nextTick();
-        },
-        blur() {
-            const $xeDateRangePicker = this;
-            const reactData = $xeDateRangePicker.reactData;
-            const inputElem = $xeDateRangePicker.$refs.refInputTarget;
-            inputElem.blur();
-            reactData.isActivated = false;
-            return $xeDateRangePicker.$nextTick();
-        },
-        select() {
-            const $xeDateRangePicker = this;
-            const reactData = $xeDateRangePicker.reactData;
-            const inputElem = $xeDateRangePicker.$refs.refInputTarget;
-            inputElem.select();
-            reactData.isActivated = false;
-            return $xeDateRangePicker.$nextTick();
-        },
-        //
-        // Render
-        //
-        renderShortcutBtn(h, pos, isVertical) {
-            const $xeDateRangePicker = this;
-            const shortcutOpts = $xeDateRangePicker.computeShortcutOpts;
-            const { position, align, mode } = shortcutOpts;
-            const shortcutList = $xeDateRangePicker.computeShortcutList;
-            if (isEnableConf(shortcutOpts) && shortcutList.length && (position || 'left') === pos) {
-                return h('div', {
-                    class: `vxe-date-range-picker--layout-${pos}-wrapper`
-                }, [
-                    h(VxeButtonGroupComponent, {
-                        props: {
-                            options: shortcutList,
-                            mode,
-                            align,
-                            vertical: isVertical
-                        },
-                        on: {
-                            click: $xeDateRangePicker.handleShortcutEvent
-                        }
-                    })
-                ]);
-            }
-            return renderEmptyElement($xeDateRangePicker);
-        },
-        renderPanel(h) {
-            const $xeDateRangePicker = this;
-            const props = $xeDateRangePicker;
-            const slots = $xeDateRangePicker.$scopedSlots;
-            const reactData = $xeDateRangePicker.reactData;
-            const popupOpts = $xeDateRangePicker.computePopupOpts;
-            if (popupOpts.enabled === false) {
-                return renderEmptyElement($xeDateRangePicker);
-            }
-            const { type, separator, autoClose, valueFormat, showConfirmButton, showClearButton } = props;
-            const { initialized, isAniVisible, visiblePanel, panelPlacement, panelStyle, selectStValue, selectEdValue, paneStartVal, paneEndVal } = reactData;
-            const vSize = $xeDateRangePicker.computeSize;
-            const btnTransfer = $xeDateRangePicker.computeBtnTransfer;
-            const shortcutOpts = $xeDateRangePicker.computeShortcutOpts;
-            const isClearable = $xeDateRangePicker.computeIsClearable;
-            const panelLabelObj = $xeDateRangePicker.computePanelLabelObj;
-            const shortcutList = $xeDateRangePicker.computeShortcutList;
-            const isTimeType = $xeDateRangePicker.computeIsTimeType;
-            const isTimeOrDateTimeType = $xeDateRangePicker.computeIsTimeOrDateTimeType;
-            const defaultDates = $xeDateRangePicker.computeDefaultDates;
-            const defaultTimes = $xeDateRangePicker.computeDefaultTimes;
-            const timeOpts = $xeDateRangePicker.computeTimeOpts;
-            const { startLabel, endLabel } = panelLabelObj;
-            const { position } = shortcutOpts;
-            const headerSlot = slots.header;
-            const footerSlot = slots.footer;
-            const topSlot = slots.top;
-            const bottomSlot = slots.bottom;
-            const leftSlot = slots.left;
-            const rightSlot = slots.right;
-            const ppClassName = popupOpts.className;
-            const [sdDate, edDate] = defaultDates;
-            const [sdTime, edTime] = defaultTimes;
-            const hasShortcutBtn = shortcutList.length > 0;
-            const showConfirmBtn = (showConfirmButton === null ? (isTimeOrDateTimeType || !autoClose) : showConfirmButton);
-            const showClearBtn = (showClearButton === null ? isClearable : showClearButton);
-            return h('div', {
-                ref: 'refInputPanel',
-                class: ['vxe-table--ignore-clear vxe-date-range-picker--panel', `type--${type}`, ppClassName ? (XEUtils.isFunction(ppClassName) ? ppClassName({ $dateRangePicker: $xeDateRangePicker }) : ppClassName) : '', {
-                        [`size--${vSize}`]: vSize,
-                        'is--transfer': btnTransfer,
-                        'ani--leave': isAniVisible,
-                        'ani--enter': visiblePanel,
-                        'show--top': !!(topSlot || headerSlot || (hasShortcutBtn && (position === 'top' || position === 'header'))),
-                        'show--bottom': !!(bottomSlot || footerSlot || (hasShortcutBtn && (position === 'bottom' || position === 'footer'))),
-                        'show--left': !!(leftSlot || (hasShortcutBtn && position === 'left')),
-                        'show--right': !!(rightSlot || (hasShortcutBtn && position === 'right'))
-                    }],
-                attrs: {
-                    placement: panelPlacement
-                },
-                style: panelStyle
-            }, initialized && (visiblePanel || isAniVisible)
-                ? [
-                    h('div', {
-                        ref: 'refPanelWrapper',
-                        class: ['vxe-date-range-picker--layout-all-wrapper', `type--${type}`, {
-                                [`size--${vSize}`]: vSize
-                            }]
-                    }, [
-                        topSlot
-                            ? h('div', {
-                                class: 'vxe-date-range-picker--layout-top-wrapper'
-                            }, topSlot({}))
-                            : $xeDateRangePicker.renderShortcutBtn(h, 'top'),
-                        h('div', {
-                            class: 'vxe-date-range-picker--layout-body-layout-wrapper'
-                        }, [
-                            leftSlot
-                                ? h('div', {
-                                    class: 'vxe-date-range-picker--layout-left-wrapper'
-                                }, leftSlot({}))
-                                : $xeDateRangePicker.renderShortcutBtn(h, 'left', true),
-                            h('div', {
-                                class: 'vxe-date-range-picker--layout-body-content-wrapper'
-                            }, [
-                                headerSlot
-                                    ? h('div', {
-                                        class: 'vxe-date-range-picker--layout-header-wrapper'
-                                    }, headerSlot({}))
-                                    : $xeDateRangePicker.renderShortcutBtn(h, 'header'),
-                                h('div', {
-                                    class: 'vxe-date-range-picker--layout-body-wrapper'
-                                }, [
-                                    h(VxeDatePanelComponent, {
-                                        ref: 'refStartDatePanel',
-                                        props: {
-                                            value: paneStartVal,
-                                            multiple: !isTimeType,
-                                            valueSort: true,
-                                            limitCount: 3,
-                                            defaultMode: 'first',
-                                            type: props.type,
-                                            className: props.className,
-                                            minDate: props.minDate,
-                                            maxDate: props.maxDate,
-                                            startDay: props.startDay,
-                                            labelFormat: props.labelFormat,
-                                            valueFormat: valueFormat === 'date' || valueFormat === 'timestamp' ? '' : valueFormat,
-                                            timeFormat: props.timeFormat,
-                                            defaultDate: sdDate,
-                                            defaultTime: sdTime,
-                                            timeConfig: timeOpts,
-                                            festivalMethod: props.festivalMethod,
-                                            disabledMethod: props.disabledMethod,
-                                            cellClassName: $xeDateRangePicker.panelCellClassName,
-                                            selectDay: props.selectDay
-                                        },
-                                        on: {
-                                            change: $xeDateRangePicker.startPanelChangeEvent,
-                                            datePrev: $xeDateRangePicker.endPanelDateBtnChangeEvent,
-                                            dateToday: $xeDateRangePicker.endPanelDateBtnChangeEvent,
-                                            dateNext: $xeDateRangePicker.endPanelDateBtnChangeEvent
-                                        }
-                                    }),
-                                    h(VxeDatePanelComponent, {
-                                        ref: 'refEndDatePanel',
-                                        props: {
-                                            value: paneEndVal,
-                                            multiple: !isTimeType,
-                                            valueSort: true,
-                                            limitCount: 3,
-                                            defaultMode: 'last',
-                                            type: props.type,
-                                            className: props.className,
-                                            minDate: props.minDate,
-                                            maxDate: props.maxDate,
-                                            startDay: props.startDay,
-                                            labelFormat: props.labelFormat,
-                                            valueFormat: valueFormat === 'date' || valueFormat === 'timestamp' ? '' : valueFormat,
-                                            timeFormat: props.timeFormat,
-                                            defaultDate: edDate,
-                                            defaultTime: edTime,
-                                            timeConfig: timeOpts,
-                                            festivalMethod: props.festivalMethod,
-                                            disabledMethod: props.disabledMethod,
-                                            cellClassName: $xeDateRangePicker.panelCellClassName,
-                                            selectDay: props.selectDay
-                                        },
-                                        on: {
-                                            change: $xeDateRangePicker.endPanelChangeEvent,
-                                            datePrev: $xeDateRangePicker.endPanelDateBtnChangeEvent,
-                                            dateToday: $xeDateRangePicker.endPanelDateBtnChangeEvent,
-                                            dateNext: $xeDateRangePicker.endPanelDateBtnChangeEvent
-                                        }
-                                    })
-                                ]),
-                                h('div', {
-                                    class: 'vxe-date-range-picker--layout-footer-wrapper'
-                                }, [
-                                    h('div', {
-                                        class: 'vxe-date-range-picker--layout-footer-label'
-                                    }, startLabel || endLabel
-                                        ? [
-                                            h('span', startLabel),
-                                            h('span', `${separator || ''}`),
-                                            h('span', endLabel)
-                                        ]
-                                        : `${separator || ''}`),
-                                    h('div', {
-                                        class: 'vxe-date-range-picker--layout-footer-custom'
-                                    }, footerSlot ? footerSlot({}) : [$xeDateRangePicker.renderShortcutBtn(h, 'footer')]),
-                                    h('div', {
-                                        class: 'vxe-date-range-picker--layout-footer-btns'
-                                    }, [
-                                        showClearBtn
-                                            ? h(VxeButtonComponent, {
-                                                props: {
-                                                    size: 'mini',
-                                                    disabled: !(selectStValue || selectEdValue),
-                                                    content: getI18n('vxe.button.clear')
-                                                },
-                                                on: {
-                                                    click: $xeDateRangePicker.clearValueEvent
-                                                }
-                                            })
-                                            : renderEmptyElement($xeDateRangePicker),
-                                        showConfirmBtn
-                                            ? h(VxeButtonComponent, {
-                                                props: {
-                                                    size: 'mini',
-                                                    status: 'primary',
-                                                    content: getI18n('vxe.button.confirm')
-                                                },
-                                                on: {
-                                                    click: $xeDateRangePicker.confirmEvent
-                                                }
-                                            })
-                                            : renderEmptyElement($xeDateRangePicker)
-                                    ])
-                                ])
-                            ]),
-                            rightSlot
-                                ? h('div', {
-                                    class: 'vxe-date-range-picker--layout-right-wrapper'
-                                }, rightSlot({}))
-                                : $xeDateRangePicker.renderShortcutBtn(h, 'right', true)
-                        ]),
-                        bottomSlot
-                            ? h('div', {
-                                class: 'vxe-date-range-picker--layout-bottom-wrapper'
-                            }, bottomSlot({}))
-                            : $xeDateRangePicker.renderShortcutBtn(h, 'bottom')
-                    ])
-                ]
-                : []);
-        },
-        renderPrefixIcon(h) {
-            const $xeDateRangePicker = this;
-            const props = $xeDateRangePicker;
-            const slots = $xeDateRangePicker.$scopedSlots;
-            const { prefixIcon } = props;
-            const prefixSlot = slots.prefix;
-            return prefixSlot || prefixIcon
-                ? h('div', {
-                    class: 'vxe-date-range-picker--prefix',
-                    on: {
-                        click: $xeDateRangePicker.clickPrefixEvent
-                    }
-                }, [
-                    h('div', {
-                        class: 'vxe-date-range-picker--prefix-icon'
-                    }, prefixSlot
-                        ? getSlotVNs(prefixSlot({}))
-                        : [
-                            h('i', {
-                                class: prefixIcon
-                            })
-                        ])
-                ])
-                : null;
-        },
-        renderSuffixIcon(h) {
-            const $xeDateRangePicker = this;
-            const props = $xeDateRangePicker;
-            const slots = $xeDateRangePicker.$scopedSlots;
-            const reactData = $xeDateRangePicker.reactData;
-            const { suffixIcon } = props;
-            const { selectStValue, selectEdValue } = reactData;
-            const suffixSlot = slots.suffix;
-            const isDisabled = $xeDateRangePicker.computeIsDisabled;
-            const isClearable = $xeDateRangePicker.computeIsClearable;
-            return h('div', {
-                class: ['vxe-date-range-picker--suffix', {
-                        'is--clear': isClearable && !isDisabled && (selectStValue || selectEdValue)
-                    }]
-            }, [
-                isClearable
-                    ? h('div', {
-                        class: 'vxe-date-range-picker--clear-icon',
-                        on: {
-                            click: $xeDateRangePicker.clearValueEvent
-                        }
-                    }, [
-                        h('i', {
-                            class: getIcon().INPUT_CLEAR
-                        })
-                    ])
-                    : renderEmptyElement($xeDateRangePicker),
-                $xeDateRangePicker.renderExtraSuffixIcon(h),
-                suffixSlot || suffixIcon
-                    ? h('div', {
-                        class: 'vxe-date-range-picker--suffix-icon',
-                        on: {
-                            click: $xeDateRangePicker.clickSuffixEvent
-                        }
-                    }, suffixSlot
-                        ? getSlotVNs(suffixSlot({}))
-                        : [
-                            h('i', {
-                                class: suffixIcon
-                            })
-                        ])
-                    : renderEmptyElement($xeDateRangePicker)
-            ]);
-        },
-        renderExtraSuffixIcon(h) {
-            const $xeDateRangePicker = this;
-            return h('div', {
-                class: 'vxe-date-range-picker--control-icon',
-                on: {
-                    click: $xeDateRangePicker.dateRangePickerOpenEvent
-                }
-            }, [
-                h('i', {
-                    class: ['vxe-date-range-picker--date-picker-icon', getIcon().DATE_PICKER_DATE]
-                })
-            ]);
-        },
-        renderVN(h) {
-            const $xeDateRangePicker = this;
-            const props = $xeDateRangePicker;
-            const reactData = $xeDateRangePicker.reactData;
-            const { className, type, name, autoComplete } = props;
-            const { selectStValue, selectEdValue, visiblePanel, isActivated } = reactData;
-            const vSize = $xeDateRangePicker.computeSize;
-            const isDisabled = $xeDateRangePicker.computeIsDisabled;
-            const formReadonly = $xeDateRangePicker.computeFormReadonly;
-            const inputLabel = $xeDateRangePicker.computeInputLabel;
-            if (formReadonly) {
-                return h('div', {
-                    ref: 'refElem',
-                    class: ['vxe-date-range-picker--readonly', `type--${type}`, className]
-                }, inputLabel);
-            }
-            const inpPlaceholder = $xeDateRangePicker.computeInpPlaceholder;
-            const isClearable = $xeDateRangePicker.computeIsClearable;
-            const prefix = $xeDateRangePicker.renderPrefixIcon(h);
-            const suffix = $xeDateRangePicker.renderSuffixIcon(h);
-            return h('div', {
-                ref: 'refElem',
-                class: ['vxe-date-range-picker', `type--${type}`, className, {
-                        [`size--${vSize}`]: vSize,
-                        'is--prefix': !!prefix,
-                        'is--suffix': !!suffix,
-                        'is--visible': visiblePanel,
-                        'is--disabled': isDisabled,
-                        'is--active': isActivated,
-                        'show--clear': isClearable && !isDisabled && (selectStValue || selectEdValue)
-                    }],
-                attrs: {
-                    spellcheck: false
-                }
-            }, [
-                prefix || renderEmptyElement($xeDateRangePicker),
-                h('div', {
-                    class: 'vxe-date-range-picker--wrapper'
-                }, [
-                    h('input', {
-                        ref: 'refInputTarget',
-                        class: 'vxe-date-range-picker--inner',
-                        domProps: {
-                            value: inputLabel
-                        },
-                        attrs: {
-                            name,
-                            type: 'text',
-                            placeholder: inpPlaceholder,
-                            editable: false,
-                            disabled: isDisabled,
-                            autocomplete: autoComplete
-                        },
-                        on: {
-                            keydown: $xeDateRangePicker.keydownEvent,
-                            keyup: $xeDateRangePicker.keyupEvent,
-                            click: $xeDateRangePicker.clickEvent,
-                            change: $xeDateRangePicker.changeEvent,
-                            focus: $xeDateRangePicker.focusEvent,
-                            blur: $xeDateRangePicker.blurEvent
-                        }
-                    })
-                ]),
-                suffix || renderEmptyElement($xeDateRangePicker),
-                // 下拉面板
-                $xeDateRangePicker.renderPanel(h)
-            ]);
-        }
-    },
-    watch: {
-        value() {
-            const $xeDateRangePicker = this;
-            $xeDateRangePicker.updateModelValue(true);
-        },
-        computeMVal() {
-            const $xeDateRangePicker = this;
-            $xeDateRangePicker.updateModelValue(false);
-        }
-    },
-    created() {
-        const $xeDateRangePicker = this;
-        $xeDateRangePicker.internalData = createInternalData();
-        $xeDateRangePicker.updateModelValue(true);
-        globalEvents.on($xeDateRangePicker, 'mousewheel', $xeDateRangePicker.handleGlobalMousewheelEvent);
-        globalEvents.on($xeDateRangePicker, 'mousedown', $xeDateRangePicker.handleGlobalMousedownEvent);
-        globalEvents.on($xeDateRangePicker, 'keydown', $xeDateRangePicker.handleGlobalKeydownEvent);
-        globalEvents.on($xeDateRangePicker, 'blur', $xeDateRangePicker.handleGlobalBlurEvent);
-        globalEvents.on($xeDateRangePicker, 'resize', $xeDateRangePicker.handleGlobalResizeEvent);
-    },
-    deactivated() {
-        const $xeDateRangePicker = this;
-        $xeDateRangePicker.checkValue();
-    },
-    beforeDestroy() {
-        const $xeDateRangePicker = this;
-        const reactData = $xeDateRangePicker.reactData;
-        const internalData = $xeDateRangePicker.internalData;
-        const panelElem = $xeDateRangePicker.$refs.refInputPanel;
-        if (panelElem && panelElem.parentNode) {
-            panelElem.parentNode.removeChild(panelElem);
-        }
-        $xeDateRangePicker.checkValue();
-        globalEvents.off($xeDateRangePicker, 'mousewheel');
-        globalEvents.off($xeDateRangePicker, 'mousedown');
-        globalEvents.off($xeDateRangePicker, 'blur');
-        globalEvents.off($xeDateRangePicker, 'resize');
-        XEUtils.assign(reactData, createReactData());
-        XEUtils.assign(internalData, createInternalData());
-    },
-    render(h) {
-        return this.renderVN(h);
-    }
-};