vxe-pc-ui 4.15.22 → 4.15.24

package/dist/all.esm.js

@@ -81,7 +81,7 @@ function checkDynamic() {
 }
 
 const { log } = VxeUI;
-const uiVersion = `ui v${"4.15.22"}`;
+const uiVersion = `ui v${"4.15.24"}`;
 function createComponentLog(name) {
     const tableVersion = VxeUI.tableVersion ? `table v${VxeUI.tableVersion}` : '';
     const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';
@@ -95,7 +95,7 @@ function createComponentLog(name) {
 const warnLog$g = log.create('warn', uiVersion);
 log.create('error', uiVersion);
 
-const version = "4.15.22";
+const version = "4.15.24";
 VxeUI.uiVersion = version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -2545,6 +2545,28 @@ function deModelValue(nodeid) {
     return nodeid ? decodeURIComponent(`${nodeid}`) : nodeid;
 }
 
+function createReactData$l() {
+    return {
+        target: null,
+        isUpdate: false,
+        visible: false,
+        tipPos: null,
+        tipContent: '',
+        tipActive: false,
+        tipTarget: null,
+        tipZindex: 0,
+        tipStore: {
+            style: {},
+            placement: '',
+            arrowStyle: {}
+        }
+    };
+}
+function createInternalData$k() {
+    return {
+    // showDelayTip: undefined
+    };
+}
 var VxeTooltipComponent = defineVxeComponent({
     name: 'VxeTooltip',
     props: {
@@ -2633,22 +2655,8 @@ var VxeTooltipComponent = defineVxeComponent({
         const { slots, emit } = context;
         const xID = XEUtils.uniqueId();
         const { computeSize } = useSize(props);
-        const reactData = reactive({
-            target: null,
-            isUpdate: false,
-            visible: false,
-            tipPos: null,
-            tipContent: '',
-            tipActive: false,
-            tipTarget: null,
-            tipZindex: 0,
-            tipStore: {
-                style: {},
-                placement: '',
-                arrowStyle: {}
-            }
-        });
-        const internalData = {};
+        const reactData = reactive(createReactData$l());
+        const internalData = createInternalData$k();
         const refElem = ref();
         const contentWrapperfElem = ref();
         const computeWrapperStyle = computed(() => {
@@ -3032,6 +3040,7 @@ var VxeTooltipComponent = defineVxeComponent({
             }
             reactData.isUpdate = false;
         });
+        handleDelayFn();
         onMounted(() => {
             const contentWrapperfEl = contentWrapperfElem.value;
             if (contentWrapperfEl) {
@@ -3090,7 +3099,10 @@ var VxeTooltipComponent = defineVxeComponent({
                 }
             }
         });
-        handleDelayFn();
+        onUnmounted(() => {
+            XEUtils.assign(reactData, createReactData$l());
+            XEUtils.assign(internalData, createInternalData$k());
+        });
         $xeTooltip.renderVN = renderVN;
         return $xeTooltip;
     },
@@ -3855,12 +3867,12 @@ VxeUI.component(VxeButtonComponent);
 const Button = VxeButton;
 
 const { errLog: errLog$h } = createComponentLog('backtop');
-function createInternalData$i() {
+function createInternalData$j() {
     return {
         targetEl: null
     };
 }
-function createReactData$j() {
+function createReactData$k() {
     return {
         showBtn: false,
         backtopZindex: 0
@@ -3939,8 +3951,8 @@ var VxeBacktopComponent = defineVxeComponent({
         const xID = XEUtils.uniqueId();
         const refElem = ref();
         const { computeSize } = useSize(props);
-        const internalData = createInternalData$i();
-        const reactData = reactive(createReactData$j());
+        const internalData = createInternalData$j();
+        const reactData = reactive(createReactData$k());
         const refMaps = {
             refElem
         };
@@ -4117,8 +4129,8 @@ var VxeBacktopComponent = defineVxeComponent({
         });
         onBeforeUnmount(() => {
             removeScrollEvent();
-            XEUtils.assign(reactData, createReactData$j());
-            XEUtils.assign(internalData, createInternalData$i());
+            XEUtils.assign(reactData, createReactData$k());
+            XEUtils.assign(internalData, createInternalData$j());
         });
         $xeBacktop.renderVN = renderVN;
         return $xeBacktop;
@@ -4560,7 +4572,7 @@ function parseDateValue(val, type, options) {
     const { valueFormat } = options;
     if (val) {
         if (type === 'time') {
-            return toStringTimeDate(val);
+            return toStringTimeDate(XEUtils.isArray(val) ? val : XEUtils.last(val));
         }
         if (XEUtils.isNumber(val) || /^[0-9]{10,15}$/.test(`${val}`)) {
             return new Date(Number(val));
@@ -4568,6 +4580,9 @@ function parseDateValue(val, type, options) {
         if (XEUtils.isString(val)) {
             return XEUtils.toStringDate(XEUtils.last(val.split(',')), valueFormat);
         }
+        if (XEUtils.isArray(val)) {
+            return XEUtils.toStringDate(XEUtils.last(val), valueFormat);
+        }
         return XEUtils.toStringDate(val, valueFormat);
     }
     return null;
@@ -4738,6 +4753,30 @@ function checkDateInputFormat(numStr, formatKey) {
     }
     return numVal;
 }
+const getPrevMonth = (date) => {
+    const currtYear = date.getFullYear();
+    const currMonth = date.getMonth();
+    if (currMonth) {
+        date.setMonth(currMonth - 1);
+    }
+    else {
+        date.setFullYear(currtYear - 1);
+        date.setMonth(11);
+    }
+    return date;
+};
+const getNextMonth = (date) => {
+    const currtYear = date.getFullYear();
+    const currMonth = date.getMonth();
+    if (currMonth < 11) {
+        date.setMonth(currMonth + 1);
+    }
+    else {
+        date.setFullYear(currtYear + 1);
+        date.setMonth(0);
+    }
+    return date;
+};
 
 const { errLog: errLog$g } = createComponentLog('calendar');
 const { menus: menus$2, getConfig: getConfig$2, getI18n: getI18n$1 } = VxeUI;
@@ -6831,7 +6870,7 @@ function getRowIdByField(row, keyField) {
     const rowKey = getRowKeyByField(row, keyField);
     return enModelValue(rowKey);
 }
-function createReactData$i() {
+function createReactData$j() {
     return {
         scrollYLoad: false,
         bodyHeight: 0,
@@ -6851,7 +6890,7 @@ function createReactData$i() {
         dragTipText: ''
     };
 }
-function createInternalData$h() {
+function createInternalData$i() {
     return {
         resizeObserver: undefined,
         fullData: [],
@@ -6924,8 +6963,8 @@ var VxeListComponent = defineVxeComponent({
         const xID = XEUtils.uniqueId();
         const browseObj = XEUtils.browse();
         const { computeSize } = useSize(props);
-        const reactData = reactive(createReactData$i());
-        const internalData = createInternalData$h();
+        const reactData = reactive(createReactData$j());
+        const internalData = createInternalData$i();
         const crossListDragRowInfo = getCrossListDragRowInfo();
         const refElem = ref();
         const refHeaderElem = ref();
@@ -8347,8 +8386,8 @@ var VxeListComponent = defineVxeComponent({
                 resizeObserver.disconnect();
             }
             globalEvents.off($xeList, 'resize');
-            XEUtils.assign(reactData, createReactData$i());
-            XEUtils.assign(internalData, createInternalData$h());
+            XEUtils.assign(reactData, createReactData$j());
+            XEUtils.assign(internalData, createInternalData$i());
         });
         $xeList.renderVN = renderVN;
         return $xeList;
@@ -11079,7 +11118,7 @@ const Input = VxeInput;
 function getNodeUniqueId$1() {
     return XEUtils.uniqueId('node_');
 }
-function createReactData$h() {
+function createReactData$i() {
     return {
         initialized: false,
         searchValue: '',
@@ -11102,7 +11141,7 @@ function createReactData$h() {
         lazyOptFlag: 1
     };
 }
-function createInternalData$g() {
+function createInternalData$h() {
     return {
         // hpTimeout: undefined,
         listVirtualYOpts: {
@@ -11229,8 +11268,8 @@ var VxeCascaderComponent = defineVxeComponent({
         const refInpSearch = ref();
         const refChunkWrapper = ref();
         const refOptionPanel = ref();
-        const reactData = reactive(createReactData$h());
-        const internalData = createInternalData$g();
+        const reactData = reactive(createReactData$i());
+        const internalData = createInternalData$h();
         const refMaps = {
             refElem
         };
@@ -12802,7 +12841,8 @@ var VxeCascaderComponent = defineVxeComponent({
             globalEvents.off($xeCascader, 'mousedown');
             globalEvents.off($xeCascader, 'blur');
             globalEvents.off($xeCascader, 'resize');
-            XEUtils.assign(internalData, createInternalData$g());
+            XEUtils.assign(reactData, createReactData$i());
+            XEUtils.assign(internalData, createInternalData$h());
         });
         provide('$xeCascader', $xeCascader);
         $xeCascader.renderVN = renderVN;
@@ -13206,10 +13246,10 @@ dynamicApp.use(VxeCheckboxButton);
 VxeUI.component(VxeCheckboxButtonComponent);
 const CheckboxButton = VxeCheckboxButton;
 
-function createReactData$g() {
+function createReactData$h() {
     return {};
 }
-function createInternalData$f() {
+function createInternalData$g() {
     return {
     // isLoaded: false
     };
@@ -13252,8 +13292,8 @@ var VxeCheckboxGroupComponent = defineVxeComponent({
         const $xeForm = inject('$xeForm', null);
         const formItemInfo = inject('xeFormItemInfo', null);
         const xID = XEUtils.uniqueId();
-        const reactData = reactive(createReactData$g());
-        const internalData = createInternalData$f();
+        const reactData = reactive(createReactData$h());
+        const internalData = createInternalData$g();
         const computeIsReadonly = computed(() => {
             const { readonly } = props;
             if (readonly === null) {
@@ -13425,8 +13465,8 @@ var VxeCheckboxGroupComponent = defineVxeComponent({
             });
         });
         onUnmounted(() => {
-            XEUtils.assign(reactData, createReactData$g());
-            XEUtils.assign(internalData, createInternalData$f());
+            XEUtils.assign(reactData, createReactData$h());
+            XEUtils.assign(internalData, createInternalData$g());
         });
         provide('$xeCheckboxGroup', $xeCheckboxGroup);
         $xeCheckboxGroup.renderVN = renderVN;
@@ -13559,7 +13599,7 @@ dynamicApp.use(VxeCol);
 VxeUI.component(VxeColComponent);
 const Col = VxeCol;
 
-function createReactData$f() {
+function createReactData$g() {
     return {
         staticPanes: [],
         cachePaneMaps: {},
@@ -13567,7 +13607,7 @@ function createReactData$f() {
         openKeyFlag: 0
     };
 }
-function createInternalData$e() {
+function createInternalData$f() {
     return {
         // esTime: null,
         activeKeyMaps: {},
@@ -13604,8 +13644,8 @@ var VxeCollapseComponent = defineVxeComponent({
         const xID = XEUtils.uniqueId();
         const { computeSize } = useSize(props);
         const refElem = ref();
-        const reactData = reactive(createReactData$f());
-        const internalData = createInternalData$e();
+        const reactData = reactive(createReactData$g());
+        const internalData = createInternalData$f();
         const refMaps = {
             refElem
         };
@@ -13884,8 +13924,8 @@ var VxeCollapseComponent = defineVxeComponent({
             if (esTime) {
                 clearTimeout(esTime);
             }
-            XEUtils.assign(reactData, createReactData$f());
-            XEUtils.assign(internalData, createInternalData$e());
+            XEUtils.assign(reactData, createReactData$g());
+            XEUtils.assign(internalData, createInternalData$f());
         });
         provide('$xeCollapse', $xeCollapse);
         $xeCollapse.renderVN = renderVN;
@@ -16270,12 +16310,12 @@ dynamicApp.use(VxeColorPicker);
 VxeUI.component(VxeColorPickerComponent);
 const ColorPicker = VxeColorPicker;
 
-function createInternalData$d() {
+function createInternalData$e() {
     return {
     // leaveTime: null
     };
 }
-function createReactData$e() {
+function createReactData$f() {
     return {
         visible: false,
         activeOption: null,
@@ -16330,8 +16370,8 @@ var VxeContextMenuComponent = defineVxeComponent({
         const xID = XEUtils.uniqueId();
         const refElem = ref();
         const { computeSize } = useSize(props);
-        const internalData = createInternalData$d();
-        const reactData = reactive(createReactData$e());
+        const internalData = createInternalData$e();
+        const reactData = reactive(createReactData$f());
         const refMaps = {
             refElem
         };
@@ -16886,8 +16926,8 @@ var VxeContextMenuComponent = defineVxeComponent({
             globalEvents.off($xeContextMenu, 'keydown');
             globalEvents.off($xeContextMenu, 'mousedown');
             globalEvents.off($xeContextMenu, 'blur');
-            XEUtils.assign(reactData, createReactData$e());
-            XEUtils.assign(internalData, createInternalData$d());
+            XEUtils.assign(reactData, createReactData$f());
+            XEUtils.assign(internalData, createInternalData$e());
         });
         $xeContextMenu.renderVN = renderVN;
         return $xeContextMenu;
@@ -17393,7 +17433,7 @@ const Countdown = VxeCountdown;
 var VxeDatePanelComponent = defineVxeComponent({
     name: 'VxeDatePanel',
     props: {
-        modelValue: [String, Number, Date],
+        modelValue: [String, Number, Date, Array],
         type: {
             type: String,
             default: 'date'
@@ -17418,6 +17458,7 @@ var VxeDatePanelComponent = defineVxeComponent({
             type: [String, Number, Date],
             default: () => getConfig$3().datePanel.endDate
         },
+        defaultMode: String,
         defaultDate: [String, Number, Date],
         defaultTime: [String, Number, Date],
         minDate: [String, Number, Date],
@@ -17429,6 +17470,7 @@ var VxeDatePanelComponent = defineVxeComponent({
         labelFormat: String,
         valueFormat: String,
         timeFormat: String,
+        valueSort: Boolean,
         festivalMethod: {
             type: Function,
             default: () => getConfig$3().datePanel.festivalMethod
@@ -17507,10 +17549,10 @@ var VxeDatePanelComponent = defineVxeComponent({
             return props.endDate ? XEUtils.toStringDate(props.endDate) : null;
         });
         const computeDateListValue = computed(() => {
-            const { modelValue, multiple } = props;
+            const { modelValue } = props;
             const isDatePanelType = computeIsDatePanelType.value;
             const dateValueFormat = computeDateValueFormat.value;
-            if (multiple && modelValue && isDatePanelType) {
+            if (modelValue && isDatePanelType) {
                 return XEUtils.toValueString(modelValue).split(',').map(item => {
                     const date = parseDate(item, dateValueFormat);
                     if (XEUtils.isValidDate(date)) {
@@ -17551,12 +17593,14 @@ var VxeDatePanelComponent = defineVxeComponent({
             return handleValueFormat(type, valueFormat);
         });
         const computeDateValue = computed(() => {
-            const { modelValue } = props;
+            const { modelValue, defaultMode } = props;
             const isDatePanelType = computeIsDatePanelType.value;
             const dateValueFormat = computeDateValueFormat.value;
             let val = null;
             if (modelValue && isDatePanelType) {
-                const date = parseDate(modelValue, dateValueFormat);
+                const vals = XEUtils.isString(modelValue) ? modelValue.split(',') : modelValue;
+                const currVal = defaultMode === 'last' ? XEUtils.last(vals) : XEUtils.first(vals);
+                const date = parseDate(currVal, dateValueFormat);
                 if (XEUtils.isValidDate(date)) {
                     val = date;
                 }
@@ -17950,10 +17994,10 @@ var VxeDatePanelComponent = defineVxeComponent({
         const parseDate = (value, format) => {
             const { type, multiple } = props;
             if (type === 'time') {
-                return toStringTimeDate(value);
+                return toStringTimeDate(XEUtils.isArray(value) ? value : XEUtils.last(value));
             }
             if (XEUtils.isArray(value)) {
-                return XEUtils.toStringDate(value[0], format);
+                return XEUtils.toStringDate(XEUtils.last(value), format);
             }
             if (XEUtils.isString(value)) {
                 return XEUtils.toStringDate(multiple ? XEUtils.last(value.split(',')) : value, format);
@@ -18022,7 +18066,7 @@ var VxeDatePanelComponent = defineVxeComponent({
             reactData.inputValue = value;
             emit('update:modelValue', value);
         };
-        const handleChange = (value, evnt) => {
+        const handleChange = (value, evnt, params) => {
             const { type, modelValue, valueFormat } = props;
             const dateValueFormat = computeDateValueFormat.value;
             reactData.inputLabel = value;
@@ -18031,20 +18075,20 @@ var VxeDatePanelComponent = defineVxeComponent({
                 const timeNum = dateVal ? dateVal.getTime() : null;
                 emitModel(timeNum);
                 if (modelValue !== timeNum) {
-                    dispatchEvent('change', { value: timeNum }, evnt);
+                    dispatchEvent('change', { value: timeNum, currValue: params ? params.currValue : '' }, evnt);
                 }
             }
             else if (hasDateValueType(valueFormat)) {
                 const dateVal = parseDateValue(value, type, { valueFormat: dateValueFormat });
                 emitModel(dateVal);
                 if (modelValue && dateVal ? XEUtils.toStringDate(modelValue).getTime() !== dateVal.getTime() : modelValue !== dateVal) {
-                    dispatchEvent('change', { value: dateVal }, evnt);
+                    dispatchEvent('change', { value: dateVal, currValue: params ? params.currValue : '' }, evnt);
                 }
             }
             else {
                 emitModel(value);
                 if (XEUtils.toValueString(modelValue) !== value) {
-                    dispatchEvent('change', { value }, evnt);
+                    dispatchEvent('change', { value, currValue: params ? params.currValue : '' }, evnt);
                 }
             }
         };
@@ -18102,7 +18146,7 @@ var VxeDatePanelComponent = defineVxeComponent({
             }
         };
         const dateChange = (date, isReload) => {
-            const { modelValue, multiple } = props;
+            const { modelValue, multiple, valueSort } = props;
             const { datetimePanelValue } = reactData;
             const isDateTimeType = computeIsDateTimeType.value;
             const dateValueFormat = computeDateValueFormat.value;
@@ -18126,7 +18170,7 @@ var VxeDatePanelComponent = defineVxeComponent({
                 if (isDateTimeType) {
                     // 如果是datetime特殊类型
                     const dateListValue = isReload ? [] : [...computeDateListValue.value];
-                    const datetimeRest = [];
+                    let datetimeRest = [];
                     const eqIndex = XEUtils.findIndexOf(dateListValue, val => XEUtils.isDateSame(date, val, 'yyyyMMdd'));
                     if (eqIndex === -1) {
                         if (overCount) {
@@ -18148,27 +18192,37 @@ var VxeDatePanelComponent = defineVxeComponent({
                             datetimeRest.push(item);
                         }
                     });
-                    handleChange(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' });
+                    // 排序
+                    if (valueSort) {
+                        datetimeRest = datetimeRest.sort((a, b) => a.getTime() - b.getTime());
+                    }
+                    handleChange(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' }, { currValue: inpVal });
                 }
                 else {
                     const dateMultipleValue = isReload ? [] : computeDateMultipleValue.value;
+                    let dateRest = [];
                     // 如果是日期类型
                     if (dateMultipleValue.some(val => XEUtils.isEqual(val, inpVal))) {
-                        handleChange(dateMultipleValue.filter(val => !XEUtils.isEqual(val, inpVal)).join(','), { type: 'update' });
+                        dateRest = dateMultipleValue.filter(val => !XEUtils.isEqual(val, inpVal));
                     }
                     else {
                         if (overCount) {
                             // 如果超出最大多选数量
                             return;
                         }
-                        handleChange(dateMultipleValue.concat([inpVal]).join(','), { type: 'update' });
+                        dateRest = dateMultipleValue.concat([inpVal]);
                     }
+                    // 排序
+                    if (valueSort) {
+                        dateRest = dateRest.sort();
+                    }
+                    handleChange(dateRest.join(','), { type: 'update' }, { currValue: inpVal });
                 }
             }
             else {
                 // 如果为单选
                 if (!XEUtils.isEqual(modelValue, inpVal)) {
-                    handleChange(inpVal, { type: 'update' });
+                    handleChange(inpVal, { type: 'update' }, { currValue: inpVal });
                 }
             }
         };
@@ -18563,6 +18617,10 @@ var VxeDatePanelComponent = defineVxeComponent({
             getModelValue() {
                 return reactData.inputValue;
             },
+            getViewType() {
+                const { datePanelType } = reactData;
+                return datePanelType;
+            },
             setPanelDate(date) {
                 if (date) {
                     dateCheckMonth(date);
@@ -19161,7 +19219,7 @@ const parseInputKayMaps = {};
 inputMaskedKeys.forEach(key => {
     parseInputKayMaps[key] = true;
 });
-function createReactData$d() {
+function createReactData$e() {
     return {
         initialized: false,
         panelIndex: 0,
@@ -19174,7 +19232,7 @@ function createReactData$d() {
         labelFlag: 0
     };
 }
-function createInternalData$c() {
+function createInternalData$d() {
     return {
         // hpTimeout: undefined,
         // fsTimeout: undefined,
@@ -19314,8 +19372,8 @@ var VxeDatePickerComponent = defineVxeComponent({
         const formItemInfo = inject('xeFormItemInfo', null);
         const xID = XEUtils.uniqueId();
         const { computeSize } = useSize(props);
-        const reactData = reactive(createReactData$d());
-        const internalData = createInternalData$c();
+        const reactData = reactive(createReactData$e());
+        const internalData = createInternalData$d();
         const refElem = ref();
         const refInputTarget = ref();
         const refInputPanel = ref();
@@ -20717,6 +20775,7 @@ var VxeDatePickerComponent = defineVxeComponent({
         watch(() => props.modelValue, () => {
             updateModelValue();
         });
+        updateModelValue();
         nextTick(() => {
             globalEvents.on($xeDatePicker, 'mousewheel', handleGlobalMousewheelEvent);
             globalEvents.on($xeDatePicker, 'mousedown', handleGlobalMousedownEvent);
@@ -20741,8 +20800,9 @@ var VxeDatePickerComponent = defineVxeComponent({
             globalEvents.off($xeDatePicker, 'keydown');
             globalEvents.off($xeDatePicker, 'blur');
             globalEvents.off($xeDatePicker, 'resize');
+            XEUtils.assign(reactData, createReactData$e());
+            XEUtils.assign(internalData, createInternalData$d());
         });
-        updateModelValue();
         provide('$xeDatePicker', $xeDatePicker);
         $xeDatePicker.renderVN = renderVN;
         return $xeDatePicker;
@@ -20762,6 +20822,27 @@ VxeUI.component(VxeDatePickerComponent);
 const DatePicker = VxeDatePicker;
 
 const { errLog: errLog$d } = createComponentLog('date-range-picker');
+function createReactData$d() {
+    return {
+        initialized: false,
+        panelIndex: 0,
+        visiblePanel: false,
+        isAniVisible: false,
+        panelStyle: {},
+        panelPlacement: '',
+        isActivated: false,
+        selectStValue: '',
+        selectEdValue: '',
+        paneStartVal: '',
+        paneEndVal: ''
+    };
+}
+function createInternalData$c() {
+    return {
+    // selectStatus: false
+    // hpTimeout: undefined
+    };
+}
 var VxeDateRangePickerComponent = defineVxeComponent({
     name: 'VxeDateRangePicker',
     props: {
@@ -20898,21 +20979,8 @@ var VxeDateRangePickerComponent = defineVxeComponent({
         const formItemInfo = inject('xeFormItemInfo', null);
         const xID = XEUtils.uniqueId();
         const { computeSize } = useSize(props);
-        const reactData = reactive({
-            initialized: false,
-            panelIndex: 0,
-            visiblePanel: false,
-            isAniVisible: false,
-            panelStyle: {},
-            panelPlacement: '',
-            isActivated: false,
-            startValue: '',
-            endValue: ''
-        });
-        const internalData = {
-        // selectStatus: false
-        // hpTimeout: undefined
-        };
+        const reactData = reactive(createReactData$d());
+        const internalData = createInternalData$c();
         const refElem = ref();
         const refInputTarget = ref();
         const refInputPanel = ref();
@@ -21058,8 +21126,8 @@ var VxeDateRangePickerComponent = defineVxeComponent({
             return XEUtils.toNumber(startDay);
         });
         const computePanelLabelObj = computed(() => {
-            const { startValue, endValue } = reactData;
-            const vals = startValue || endValue ? [startValue || '', endValue || ''] : [];
+            const { selectStValue, selectEdValue } = reactData;
+            const vals = selectStValue || selectEdValue ? [selectStValue || '', selectEdValue || ''] : [];
             return formatRangeLabel(vals);
         });
         const computeInputLabel = computed(() => {
@@ -21094,8 +21162,8 @@ var VxeDateRangePickerComponent = defineVxeComponent({
             };
         };
         const getRangeValue = (sValue, eValue) => {
-            const { modelValue, valueType } = props;
-            let isArr = XEUtils.isArray(modelValue);
+            const { modelValue, valueType, valueFormat } = props;
+            let isArr = valueFormat === 'date' || XEUtils.isArray(modelValue);
             if (valueType) {
                 switch (valueType) {
                     case 'array':
@@ -21107,7 +21175,7 @@ var VxeDateRangePickerComponent = defineVxeComponent({
                 }
             }
             if (sValue || eValue) {
-                const rest = [sValue || '', eValue || ''];
+                const rest = [sValue || null, eValue || null];
                 if (isArr) {
                     return rest;
                 }
@@ -21174,25 +21242,46 @@ var VxeDateRangePickerComponent = defineVxeComponent({
                     restObj = paraeUpdateModel();
                 }
             }
-            reactData.startValue = restObj.sValue;
-            reactData.endValue = restObj.eValue;
+            reactData.selectStValue = restObj.sValue;
+            reactData.selectEdValue = restObj.eValue;
         };
         const triggerEvent = (evnt) => {
-            const { startValue, endValue } = reactData;
-            const value = getRangeValue(startValue, endValue);
-            dispatchEvent(evnt.type, { value, startValue, endValue }, evnt);
+            const { selectStValue, selectEdValue } = reactData;
+            const value = getRangeValue(selectStValue, selectEdValue);
+            dispatchEvent(evnt.type, { value, startValue: selectStValue, endValue: selectEdValue }, evnt);
         };
         const handleChange = (sValue, eValue, evnt) => {
-            const { modelValue } = props;
-            reactData.startValue = sValue;
-            reactData.endValue = eValue;
-            const value = getRangeValue(sValue, eValue);
-            const isFinish = (sValue && eValue) || (!sValue && !eValue);
+            const { type, modelValue, valueFormat } = props;
+            const dateValueFormat = computeDateValueFormat.value;
+            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 = getRangeValue(startRest, endRest);
+            const isFinish = (startRest && endRest) || (!startRest && !endRest);
             emit('update:modelValue', value);
-            emit('update:startValue', sValue || '');
-            emit('update:endValue', eValue || '');
+            emit('update:startValue', startRest || '');
+            emit('update:endValue', endRest || '');
             if (XEUtils.toValueString(modelValue) !== value) {
-                dispatchEvent('change', { value, startValue: sValue, endValue: eValue, isFinish }, evnt);
+                dispatchEvent('change', { value, startValue: startRest, endValue: endRest, isFinish }, evnt);
                 // 自动更新校验状态
                 if ($xeForm && formItemInfo) {
                     $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
@@ -21220,9 +21309,9 @@ var VxeDateRangePickerComponent = defineVxeComponent({
         const clickPrefixEvent = (evnt) => {
             const isDisabled = computeIsDisabled.value;
             if (!isDisabled) {
-                const { startValue, endValue } = reactData;
-                const value = getRangeValue(startValue, endValue);
-                dispatchEvent('prefix-click', { value, startValue, endValue }, evnt);
+                const { selectStValue, selectEdValue } = reactData;
+                const value = getRangeValue(selectStValue, selectEdValue);
+                dispatchEvent('prefix-click', { value, startValue: selectStValue, endValue: selectEdValue }, evnt);
             }
         };
         const hidePanel = () => {
@@ -21256,8 +21345,8 @@ var VxeDateRangePickerComponent = defineVxeComponent({
             }
         };
         const panelCellClassName = ({ date }) => {
-            const startValue = reactData.startValue;
-            const endValue = reactData.endValue;
+            const startValue = reactData.selectStValue;
+            const endValue = reactData.selectEdValue;
             if (startValue && endValue) {
                 const currTime = date.getTime();
                 const startTime = XEUtils.toStringDate(startValue).getTime();
@@ -21270,18 +21359,18 @@ var VxeDateRangePickerComponent = defineVxeComponent({
         };
         const handleSelectClose = () => {
             const { autoClose } = props;
-            const { startValue, endValue } = reactData;
+            const { selectStValue, selectEdValue } = reactData;
             const { selectStatus } = internalData;
             const isDatePickerType = computeIsDatePickerType.value;
             if (autoClose) {
                 if (selectStatus && isDatePickerType) {
-                    if (startValue && endValue) {
+                    if (selectStValue && selectEdValue) {
                         hidePanel();
                     }
                 }
             }
             else {
-                if (startValue && endValue) {
+                if (selectStValue && selectEdValue) {
                     internalData.selectStatus = false;
                 }
             }
@@ -21289,23 +21378,23 @@ var VxeDateRangePickerComponent = defineVxeComponent({
         const clickSuffixEvent = (evnt) => {
             const isDisabled = computeIsDisabled.value;
             if (!isDisabled) {
-                const { startValue, endValue } = reactData;
-                const value = getRangeValue(startValue, endValue);
-                dispatchEvent('suffix-click', { value, startValue, endValue }, evnt);
+                const { selectStValue, selectEdValue } = reactData;
+                const value = getRangeValue(selectStValue, selectEdValue);
+                dispatchEvent('suffix-click', { value, startValue: selectStValue, endValue: selectEdValue }, evnt);
             }
         };
         const blurEvent = (evnt) => {
-            const { startValue, endValue } = reactData;
+            const { selectStValue, selectEdValue } = reactData;
             const inpImmediate = computeInpImmediate.value;
             const value = '';
             if (!inpImmediate) {
-                handleChange(startValue, endValue, evnt);
+                handleChange(selectStValue, selectEdValue, evnt);
             }
             if (!reactData.visiblePanel) {
                 reactData.isActivated = false;
                 checkValue();
             }
-            dispatchEvent('blur', { value, startValue, endValue }, evnt);
+            dispatchEvent('blur', { value, startValue: selectStValue, endValue: selectEdValue }, evnt);
             // 自动更新校验状态
             if ($xeForm && formItemInfo) {
                 $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
@@ -21337,107 +21426,170 @@ var VxeDateRangePickerComponent = defineVxeComponent({
         };
         const startPanelChangeEvent = (params) => {
             const { selectStatus } = internalData;
-            const { value, $event } = params;
-            const endValue = selectStatus ? reactData.endValue : '';
-            handleChange(value, endValue, $event);
+            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].join(',');
+            reactData.paneStartVal = [startValue, endValue].join(',');
+            handleChange(startValue, endValue, $event);
             handleSelectClose();
             if (!selectStatus) {
                 internalData.selectStatus = true;
             }
             nextTick(() => {
-                const $startDatePanel = refStartDatePanel.value;
-                const $endDatePanel = refEndDatePanel.value;
-                if ($startDatePanel && $endDatePanel) {
-                    const startValue = $startDatePanel.getModelValue();
-                    if (!endValue && startValue) {
-                        $endDatePanel.setPanelDate(XEUtils.toStringDate(startValue));
-                    }
-                }
+                handleUpdateStartPanelDate();
             });
         };
         const endPanelChangeEvent = (params) => {
             const { selectStatus } = internalData;
-            const { value, $event } = params;
-            const startValue = selectStatus ? reactData.startValue : '';
-            handleChange(startValue, value, $event);
+            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].join(',');
+            reactData.paneStartVal = [startValue, endValue].join(',');
+            handleChange(startValue, endValue, $event);
             handleSelectClose();
             if (!selectStatus) {
                 internalData.selectStatus = true;
             }
             nextTick(() => {
-                const $startDatePanel = refStartDatePanel.value;
-                const $endDatePanel = refEndDatePanel.value;
-                if ($startDatePanel && $endDatePanel) {
-                    const endValue = $endDatePanel.getModelValue();
-                    if (!startValue && endValue) {
-                        $startDatePanel.setPanelDate(XEUtils.toStringDate(endValue));
+                handleUpdateEndPanelDate();
+            });
+        };
+        const handleUpdateStartPanelDate = () => {
+            const $startDatePanel = refStartDatePanel.value;
+            const $endDatePanel = refEndDatePanel.value;
+            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;
                 }
-            });
+            }
         };
-        const startPanelDateBtnChangeEvent = (params) => {
+        const startPanelDateBtnChangeEvent = () => {
             const { linkedPanels } = props;
+            const $startDatePanel = refStartDatePanel.value;
+            const $endDatePanel = refEndDatePanel.value;
+            if (!$startDatePanel || !$endDatePanel) {
+                return;
+            }
+            const startPanelDate = $startDatePanel.getPanelDate();
+            const endPanelDate = $endDatePanel.getPanelDate();
+            if (!startPanelDate || !endPanelDate) {
+                return;
+            }
+            const viewType = $startDatePanel.getViewType();
             if (linkedPanels) {
-                const { viewType } = params;
-                const $startDatePanel = refStartDatePanel.value;
-                const $endDatePanel = refEndDatePanel.value;
-                if (!$startDatePanel || !$endDatePanel) {
-                    return;
-                }
-                const startPanelDate = $startDatePanel.getPanelDate();
-                if (!startPanelDate) {
-                    return;
-                }
-                const endYear = startPanelDate.getFullYear();
-                const endMonth = startPanelDate.getMonth();
                 switch (viewType) {
                     case 'day':
                     case 'date':
                     case 'week': {
-                        if (endMonth < 11) {
-                            startPanelDate.setMonth(endMonth + 1);
-                        }
-                        else {
-                            startPanelDate.setFullYear(endYear + 1);
-                            startPanelDate.setMonth(0);
-                        }
-                        $endDatePanel.setPanelDate(startPanelDate);
+                        $endDatePanel.setPanelDate(getNextMonth(startPanelDate));
                         break;
                     }
                 }
             }
+            else {
+                handleUpdateStartPanelDate();
+            }
         };
-        const endPanelDateBtnChangeEvent = (params) => {
+        const handleUpdateEndPanelDate = () => {
+            const $startDatePanel = refStartDatePanel.value;
+            const $endDatePanel = refEndDatePanel.value;
+            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;
+                }
+            }
+        };
+        const endPanelDateBtnChangeEvent = () => {
             const { linkedPanels } = props;
+            const $startDatePanel = refStartDatePanel.value;
+            const $endDatePanel = refEndDatePanel.value;
+            if (!$startDatePanel || !$endDatePanel) {
+                return;
+            }
+            const startPanelDate = $startDatePanel.getPanelDate();
+            const endPanelDate = $endDatePanel.getPanelDate();
+            if (!startPanelDate || !endPanelDate) {
+                return;
+            }
+            const viewType = $endDatePanel.getViewType();
             if (linkedPanels) {
-                const { viewType } = params;
-                const $startDatePanel = refStartDatePanel.value;
-                const $endDatePanel = refEndDatePanel.value;
-                if (!$startDatePanel || !$endDatePanel) {
-                    return;
-                }
-                const endPanelDate = $endDatePanel.getPanelDate();
-                if (!endPanelDate) {
-                    return;
-                }
-                const endYear = endPanelDate.getFullYear();
-                const endMonth = endPanelDate.getMonth();
                 switch (viewType) {
                     case 'day':
                     case 'date':
                     case 'week': {
-                        if (endMonth) {
-                            endPanelDate.setMonth(endMonth - 1);
-                        }
-                        else {
-                            endPanelDate.setFullYear(endYear - 1);
-                            endPanelDate.setMonth(11);
-                        }
-                        $startDatePanel.setPanelDate(endPanelDate);
+                        $startDatePanel.setPanelDate(getPrevMonth(endPanelDate));
                         break;
                     }
                 }
             }
+            else {
+                handleUpdateEndPanelDate();
+            }
         };
         // 全局事件
         const handleGlobalMousedownEvent = (evnt) => {
@@ -21562,6 +21714,7 @@ var VxeDateRangePickerComponent = defineVxeComponent({
                 reactData.isAniVisible = true;
                 setTimeout(() => {
                     reactData.visiblePanel = true;
+                    handleUpdateStartPanelDate();
                     updatePlacement();
                 }, 10);
                 updateZindex();
@@ -21597,8 +21750,8 @@ var VxeDateRangePickerComponent = defineVxeComponent({
             const shortcutOpts = computeShortcutOpts.value;
             const { autoClose } = shortcutOpts;
             const { code, clickMethod } = option;
-            let startValue = reactData.startValue;
-            let endValue = reactData.endValue;
+            let startValue = reactData.selectStValue;
+            let endValue = reactData.selectEdValue;
             let value = getRangeValue(startValue, endValue);
             const shortcutParams = {
                 $dateRangePicker: $xeDateRangePicker,
@@ -21661,8 +21814,8 @@ var VxeDateRangePickerComponent = defineVxeComponent({
         dateRangePickerMethods = {
             dispatchEvent,
             setModelValue(startValue, endValue) {
-                reactData.startValue = startValue || '';
-                reactData.endValue = endValue || '';
+                reactData.selectStValue = startValue || '';
+                reactData.selectEdValue = endValue || '';
                 const value = getRangeValue(startValue, endValue);
                 emit('update:modelValue', value);
             },
@@ -21716,8 +21869,8 @@ var VxeDateRangePickerComponent = defineVxeComponent({
             if (popupOpts.enabled === false) {
                 return renderEmptyElement($xeDateRangePicker);
             }
-            const { type, separator, autoClose, showConfirmButton, showClearButton } = props;
-            const { initialized, isAniVisible, visiblePanel, panelPlacement, panelStyle, startValue, endValue } = reactData;
+            const { type, separator, autoClose, valueFormat, showConfirmButton, showClearButton } = props;
+            const { initialized, isAniVisible, visiblePanel, panelPlacement, panelStyle, selectStValue, selectEdValue, paneStartVal, paneEndVal } = reactData;
             const vSize = computeSize.value;
             const btnTransfer = computeBtnTransfer.value;
             const shortcutOpts = computeShortcutOpts.value;
@@ -21794,15 +21947,18 @@ var VxeDateRangePickerComponent = defineVxeComponent({
                                     }, [
                                         h(VxeDatePanel, {
                                             ref: refStartDatePanel,
-                                            modelValue: startValue,
+                                            modelValue: paneStartVal,
+                                            multiple: true,
+                                            valueSort: true,
+                                            limitCount: 3,
+                                            defaultMode: 'first',
                                             type: props.type,
                                             className: props.className,
                                             minDate: props.minDate,
                                             maxDate: props.maxDate,
-                                            endDate: endValue,
                                             startDay: props.startDay,
                                             labelFormat: props.labelFormat,
-                                            valueFormat: props.valueFormat,
+                                            valueFormat: valueFormat === 'date' || valueFormat === 'timestamp' ? '' : valueFormat,
                                             timeFormat: props.timeFormat,
                                             defaultDate: sdDate,
                                             defaultTime: sdTime,
@@ -21818,15 +21974,18 @@ var VxeDateRangePickerComponent = defineVxeComponent({
                                         }),
                                         h(VxeDatePanel, {
                                             ref: refEndDatePanel,
-                                            modelValue: endValue,
+                                            modelValue: paneEndVal,
+                                            multiple: true,
+                                            valueSort: true,
+                                            limitCount: 3,
+                                            defaultMode: 'last',
                                             type: props.type,
                                             className: props.className,
                                             minDate: props.minDate,
                                             maxDate: props.maxDate,
-                                            startDate: startValue,
                                             startDay: props.startDay,
                                             labelFormat: props.labelFormat,
-                                            valueFormat: props.valueFormat,
+                                            valueFormat: valueFormat === 'date' || valueFormat === 'timestamp' ? '' : valueFormat,
                                             timeFormat: props.timeFormat,
                                             defaultDate: edDate,
                                             defaultTime: edTime,
@@ -21862,7 +22021,7 @@ var VxeDateRangePickerComponent = defineVxeComponent({
                                             showClearBtn
                                                 ? h(VxeButton, {
                                                     size: 'mini',
-                                                    disabled: !(startValue || endValue),
+                                                    disabled: !(selectStValue || selectEdValue),
                                                     content: getI18n$2('vxe.button.clear'),
                                                     onClick: clearValueEvent
                                                 })
@@ -21916,13 +22075,13 @@ var VxeDateRangePickerComponent = defineVxeComponent({
         };
         const renderSuffixIcon = () => {
             const { suffixIcon } = props;
-            const { startValue, endValue } = reactData;
+            const { selectStValue, selectEdValue } = reactData;
             const suffixSlot = slots.suffix;
             const isDisabled = computeIsDisabled.value;
             const isClearable = computeIsClearable.value;
             return h('div', {
                 class: ['vxe-date-range-picker--suffix', {
-                        'is--clear': isClearable && !isDisabled && (startValue || endValue)
+                        'is--clear': isClearable && !isDisabled && (selectStValue || selectEdValue)
                     }]
             }, [
                 isClearable
@@ -21962,7 +22121,7 @@ var VxeDateRangePickerComponent = defineVxeComponent({
         };
         const renderVN = () => {
             const { className, type, name, autoComplete } = props;
-            const { startValue, endValue, visiblePanel, isActivated } = reactData;
+            const { selectStValue, selectEdValue, visiblePanel, isActivated } = reactData;
             const vSize = computeSize.value;
             const isDisabled = computeIsDisabled.value;
             const formReadonly = computeFormReadonly.value;
@@ -21986,7 +22145,7 @@ var VxeDateRangePickerComponent = defineVxeComponent({
                         'is--visible': visiblePanel,
                         'is--disabled': isDisabled,
                         'is--active': isActivated,
-                        'show--clear': isClearable && !isDisabled && (startValue || endValue)
+                        'show--clear': isClearable && !isDisabled && (selectStValue || selectEdValue)
                     }],
                 spellcheck: false
             }, [
@@ -22034,14 +22193,16 @@ var VxeDateRangePickerComponent = defineVxeComponent({
         onDeactivated(() => {
             checkValue();
         });
+        onBeforeUnmount(() => {
+            checkValue();
+        });
         onUnmounted(() => {
             globalEvents.off($xeDateRangePicker, 'mousewheel');
             globalEvents.off($xeDateRangePicker, 'mousedown');
             globalEvents.off($xeDateRangePicker, 'blur');
             globalEvents.off($xeDateRangePicker, 'resize');
-        });
-        onBeforeUnmount(() => {
-            checkValue();
+            XEUtils.assign(reactData, createReactData$d());
+            XEUtils.assign(internalData, createInternalData$c());
         });
         provide('$xeDateRangePicker', $xeDateRangePicker);
         $xeDateRangePicker.renderVN = renderVN;
@@ -25047,6 +25208,7 @@ var VxeFormComponent = defineVxeComponent({
         });
         onUnmounted(() => {
             globalEvents.off($xeForm, 'resize');
+            XEUtils.assign(reactData, createReactData$c());
             XEUtils.assign(internalData, createInternalData$b());
         });
         reactData.collapseAll = !!props.collapseStatus;