vxe-pc-ui 3.16.0 → 3.16.2

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

@@ -0,0 +1,1679 @@
+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);
+    }
+};