vxe-pc-ui 3.15.24 → 3.15.25

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

@@ -2,6 +2,8 @@ import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
 import { getConfig, getI18n, createEvent, globalMixins, renderEmptyElement } from '../../ui';
 import { toStringTimeDate, getDateQuarter, parseDateValue, parseDateObj, handleValueFormat, hasDateValueType, hasTimestampValueType } from './util';
+import { createComponentLog } from '../../ui/src/log';
+const { errLog } = createComponentLog('date-panel');
 export default {
     name: 'VxeDatePanel',
     mixins: [
@@ -12,7 +14,7 @@ export default {
         event: 'modelValue'
     },
     props: {
-        value: [String, Number, Date],
+        value: [String, Number, Date, Array],
         type: {
             type: String,
             default: 'date'
@@ -81,9 +83,9 @@ export default {
             currentDate: null
         };
         const internalData = {
-            yearSize: 12,
-            monthSize: 20,
-            quarterSize: 8,
+            yearSize: 16,
+            monthSize: 12,
+            quarterSize: 4,
             hpTimeout: undefined
         };
         return {
@@ -92,17 +94,24 @@ export default {
             internalData
         };
     },
-    computed: Object.assign(Object.assign({}, {}), { computeIsDateTimeType() {
+    computed: Object.assign(Object.assign({}, {}), { computeIsTimeType() {
             const $xeDatePanel = this;
             const props = $xeDatePanel;
             const { type } = props;
-            return type === 'time' || type === 'datetime';
+            return type === 'time';
+        },
+        computeIsTimeOrDateTimeType() {
+            const $xeDatePanel = this;
+            const props = $xeDatePanel;
+            const { type } = props;
+            const isTimeType = $xeDatePanel.computeIsTimeType;
+            return isTimeType || type === 'datetime';
         },
         computeIsDatePanelType() {
             const $xeDatePanel = this;
             const props = $xeDatePanel;
-            const isDateTimeType = $xeDatePanel.computeIsDateTimeType;
-            return isDateTimeType || ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
+            const isTimeOrDateTimeType = $xeDatePanel.computeIsTimeOrDateTimeType;
+            return isTimeOrDateTimeType || ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
         },
         computeDateStartDate() {
             const $xeDatePanel = this;
@@ -117,19 +126,25 @@ export default {
         computeDateListValue() {
             const $xeDatePanel = this;
             const props = $xeDatePanel;
-            const { value: modelValue, multiple } = props;
+            const { value: modelValue, valueFormat } = props;
             const isDatePanelType = $xeDatePanel.computeIsDatePanelType;
             const dateValueFormat = $xeDatePanel.computeDateValueFormat;
-            if (multiple && modelValue && isDatePanelType) {
-                return XEUtils.toValueString(modelValue).split(',').map(item => {
-                    const date = $xeDatePanel.parseDate(item, dateValueFormat);
-                    if (XEUtils.isValidDate(date)) {
-                        return date;
+            const restList = [];
+            if (modelValue && isDatePanelType) {
+                (XEUtils.isArray(modelValue) ? modelValue : XEUtils.toValueString(modelValue).split(',')).forEach(val => {
+                    let strVal = val;
+                    if (val) {
+                        if (valueFormat === 'timestamp') {
+                            if (XEUtils.isString(val) && /^\d+$/.test(val)) {
+                                strVal = Number(strVal);
+                            }
+                        }
+                        const date = $xeDatePanel.parseDate(strVal, dateValueFormat);
+                        restList.push(date);
                     }
-                    return date;
                 });
             }
-            return [];
+            return restList;
         },
         computeDateMultipleValue() {
             const $xeDatePanel = this;
@@ -221,8 +236,8 @@ export default {
         computeDateHMSTime() {
             const $xeDatePanel = this;
             const dateValue = $xeDatePanel.computeDateValue;
-            const isDateTimeType = $xeDatePanel.computeIsDateTimeType;
-            return dateValue && isDateTimeType ? (dateValue.getHours() * 3600 + dateValue.getMinutes() * 60 + dateValue.getSeconds()) * 1000 : 0;
+            const isTimeOrDateTimeType = $xeDatePanel.computeIsTimeOrDateTimeType;
+            return dateValue && isTimeOrDateTimeType ? (dateValue.getHours() * 3600 + dateValue.getMinutes() * 60 + dateValue.getSeconds()) * 1000 : 0;
         },
         computeDateLabelFormat() {
             const $xeDatePanel = this;
@@ -245,7 +260,7 @@ export default {
                 const currFullYear = currentDate.getFullYear();
                 const selectFullYear = selectMonth.getFullYear();
                 const startYearDate = new Date(selectFullYear - selectFullYear % yearSize, 0, 1);
-                for (let index = -4; index < yearSize + 4; index++) {
+                for (let index = 0; index < yearSize; index++) {
                     const date = XEUtils.getWhatYear(startYearDate, index, 'first');
                     const itemFullYear = date.getFullYear();
                     years.push({
@@ -356,7 +371,7 @@ export default {
                 const currQuarter = getDateQuarter(currentDate);
                 const firstYear = XEUtils.getWhatYear(selectMonth, 0, 'first');
                 const selFullYear = firstYear.getFullYear();
-                for (let index = -2; index < quarterSize - 2; index++) {
+                for (let index = 0; index < quarterSize; index++) {
                     const date = XEUtils.getWhatQuarter(firstYear, index);
                     const itemFullYear = date.getFullYear();
                     const itemQuarter = getDateQuarter(date);
@@ -389,7 +404,7 @@ export default {
                 const currFullYear = currentDate.getFullYear();
                 const currMonth = currentDate.getMonth();
                 const selFullYear = XEUtils.getWhatYear(selectMonth, 0, 'first').getFullYear();
-                for (let index = -4; index < monthSize - 4; index++) {
+                for (let index = 0; index < monthSize; index++) {
                     const date = XEUtils.getWhatYear(selectMonth, 0, index);
                     const itemFullYear = date.getFullYear();
                     const itemMonth = date.getMonth();
@@ -473,8 +488,8 @@ export default {
             const timeOpts = $xeDatePanel.computeTimeOpts;
             const { hours: hourOptions, hourDisabledMethod } = timeOpts;
             const list = [];
-            const isDateTimeType = $xeDatePanel.computeIsDateTimeType;
-            if (isDateTimeType) {
+            const isTimeOrDateTimeType = $xeDatePanel.computeIsTimeOrDateTimeType;
+            if (isTimeOrDateTimeType) {
                 if (hourOptions && hourOptions.length) {
                     hourOptions.forEach(item => {
                         if (XEUtils.isNumber(item) || XEUtils.isString(item)) {
@@ -513,8 +528,8 @@ export default {
             const timeOpts = $xeDatePanel.computeTimeOpts;
             const { minutes: minuteOptions, minuteDisabledMethod } = timeOpts;
             const list = [];
-            const isDateTimeType = $xeDatePanel.computeIsDateTimeType;
-            if (isDateTimeType) {
+            const isTimeOrDateTimeType = $xeDatePanel.computeIsTimeOrDateTimeType;
+            if (isTimeOrDateTimeType) {
                 if (minuteOptions && minuteOptions.length) {
                     minuteOptions.forEach(item => {
                         if (XEUtils.isNumber(item) || XEUtils.isString(item)) {
@@ -567,8 +582,8 @@ export default {
             const timeOpts = $xeDatePanel.computeTimeOpts;
             const { seconds: secondOptions, secondDisabledMethod } = timeOpts;
             const list = [];
-            const isDateTimeType = $xeDatePanel.computeIsDateTimeType;
-            if (isDateTimeType) {
+            const isTimeOrDateTimeType = $xeDatePanel.computeIsTimeOrDateTimeType;
+            if (isTimeOrDateTimeType) {
                 if (secondOptions && secondOptions.length) {
                     secondOptions.forEach(item => {
                         if (XEUtils.isNumber(item) || XEUtils.isString(item)) {
@@ -638,7 +653,7 @@ export default {
             const props = $xeDatePanel;
             const { type, multiple } = props;
             if (type === 'time') {
-                return toStringTimeDate(XEUtils.isArray(value) ? value : XEUtils.last(value));
+                return toStringTimeDate(XEUtils.isArray(value) ? XEUtils.last(value) : value);
             }
             if (XEUtils.isArray(value)) {
                 return XEUtils.toStringDate(XEUtils.last(value), format);
@@ -813,14 +828,15 @@ export default {
             const reactData = $xeDatePanel.reactData;
             const { value: modelValue, multiple, valueSort } = props;
             const { datetimePanelValue } = reactData;
-            const isDateTimeType = $xeDatePanel.computeIsDateTimeType;
+            const isTimeType = $xeDatePanel.computeIsTimeType;
+            const isTimeOrDateTimeType = $xeDatePanel.computeIsTimeOrDateTimeType;
             const dateValueFormat = $xeDatePanel.computeDateValueFormat;
             const firstDayOfWeek = $xeDatePanel.computeFirstDayOfWeek;
             if (props.type === 'week') {
                 const sWeek = XEUtils.toNumber(props.selectDay);
                 date = XEUtils.getWhatWeek(date, 0, sWeek, firstDayOfWeek);
             }
-            else if (isDateTimeType) {
+            else if (isTimeOrDateTimeType) {
                 if (datetimePanelValue) {
                     date.setHours(datetimePanelValue.getHours());
                     date.setMinutes(datetimePanelValue.getMinutes());
@@ -829,10 +845,10 @@ export default {
             }
             const inpVal = XEUtils.toDateString(date, dateValueFormat, { firstDay: firstDayOfWeek });
             $xeDatePanel.dateCheckMonth(date);
-            if (multiple) {
+            if (!isTimeType && multiple) {
                 const overCount = $xeDatePanel.computeOverCount;
                 // 如果为多选
-                if (isDateTimeType) {
+                if (isTimeOrDateTimeType) {
                     // 如果是datetime特殊类型
                     const dateListValue = isReload ? [] : [...$xeDatePanel.computeDateListValue];
                     let datetimeRest = [];
@@ -1216,17 +1232,19 @@ export default {
             const { multiple } = props;
             const { datetimePanelValue } = reactData;
             const dateValue = $xeDatePanel.computeDateValue;
-            const isDateTimeType = $xeDatePanel.computeIsDateTimeType;
-            if (isDateTimeType) {
+            const isTimeType = $xeDatePanel.computeIsTimeType;
+            const isTimeOrDateTimeType = $xeDatePanel.computeIsTimeOrDateTimeType;
+            if (isTimeOrDateTimeType) {
                 const dateValueFormat = $xeDatePanel.computeDateValueFormat;
-                if (multiple) {
+                if (!isTimeType && multiple) {
                     // 如果为多选
                     const dateMultipleValue = $xeDatePanel.computeDateMultipleValue;
-                    if (isDateTimeType) {
+                    const dateListValue = $xeDatePanel.computeDateListValue;
+                    if (isTimeOrDateTimeType) {
                         // 如果是datetime特殊类型
-                        const dateListValue = [...$xeDatePanel.computeDateListValue];
+                        const listVals = dateListValue.length ? [...dateListValue] : [];
                         const datetimeRest = [];
-                        dateListValue.forEach(item => {
+                        listVals.forEach(item => {
                             if (item) {
                                 if (datetimePanelValue) {
                                     item.setHours(datetimePanelValue.getHours());
@@ -1277,7 +1295,7 @@ export default {
             const props = $xeDatePanel;
             const reactData = $xeDatePanel.reactData;
             const { type, defaultDate, defaultTime } = props;
-            const isDateTimeType = $xeDatePanel.computeIsDateTimeType;
+            const isTimeOrDateTimeType = $xeDatePanel.computeIsTimeOrDateTimeType;
             const dateValue = $xeDatePanel.computeDateValue;
             if (['year', 'quarter', 'month', 'week'].indexOf(type) > -1) {
                 reactData.datePanelType = type;
@@ -1305,7 +1323,7 @@ export default {
                     $xeDatePanel.dateNowHandle();
                 }
             }
-            if (isDateTimeType) {
+            if (isTimeOrDateTimeType) {
                 let dtPanelValue = reactData.datePanelValue;
                 if (!dtPanelValue) {
                     dtPanelValue = XEUtils.getWhatDay(Date.now(), 0, 'first');
@@ -1981,6 +1999,11 @@ export default {
     },
     created() {
         const $xeDatePanel = this;
+        const props = $xeDatePanel;
+        const { type, multiple } = props;
+        if (multiple && type === 'time') {
+            errLog('vxe.error.notSupportProp', [`type=${type}`, 'multiple=true', 'multiple=false']);
+        }
         $xeDatePanel.initValue();
         $xeDatePanel.dateOpenPanel();
     },

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

@@ -78,7 +78,7 @@ export function parseDateValue(val, type, options) {
     const { valueFormat } = options;
     if (val) {
         if (type === 'time') {
-            return toStringTimeDate(XEUtils.isArray(val) ? val : XEUtils.last(val));
+            return toStringTimeDate(XEUtils.isArray(val) ? XEUtils.last(val) : val);
         }
         if (XEUtils.isNumber(val) || /^[0-9]{10,15}$/.test(`${val}`)) {
             return new Date(Number(val));
@@ -259,6 +259,16 @@ export function checkDateInputFormat(numStr, formatKey) {
     }
     return numVal;
 }
+export const getPrevYear = (date, size = 1) => {
+    const currtYear = date.getFullYear();
+    date.setFullYear(currtYear - size);
+    return date;
+};
+export const getNextYear = (date, size = 1) => {
+    const currtYear = date.getFullYear();
+    date.setFullYear(currtYear + size);
+    return date;
+};
 export const getPrevMonth = (date) => {
     const currtYear = date.getFullYear();
     const currMonth = date.getMonth();

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

@@ -229,17 +229,24 @@ export default {
             }
             return disabled;
         },
-        computeIsDateTimeType() {
+        computeIsTimeType() {
             const $xeDatePicker = this;
             const props = $xeDatePicker;
             const { type } = props;
-            return type === 'time' || type === 'datetime';
+            return type === 'time';
+        },
+        computeIsTimeOrDateTimeType() {
+            const $xeDatePicker = this;
+            const props = $xeDatePicker;
+            const { type } = props;
+            const isTimeType = $xeDatePicker.computeIsTimeType;
+            return isTimeType || type === 'datetime';
         },
         computeIsDatePickerType() {
             const $xeDatePicker = this;
             const props = $xeDatePicker;
-            const isDateTimeType = $xeDatePicker.computeIsDateTimeType;
-            return isDateTimeType || ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
+            const isTimeOrDateTimeType = $xeDatePicker.computeIsTimeOrDateTimeType;
+            return isTimeOrDateTimeType || ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
         },
         computeIsClearable() {
             const $xeDatePicker = this;
@@ -249,8 +256,8 @@ export default {
         computeIsDatePanelType() {
             const $xeDatePicker = this;
             const props = $xeDatePicker;
-            const isDateTimeType = $xeDatePicker.computeIsDateTimeType;
-            return isDateTimeType || ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
+            const isTimeOrDateTimeType = $xeDatePicker.computeIsTimeOrDateTimeType;
+            return isTimeOrDateTimeType || ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
         },
         computeDateListValue() {
             const $xeDatePicker = this;
@@ -541,7 +548,7 @@ export default {
             const $xeDatePicker = this;
             const props = $xeDatePicker;
             const { value: modelValue, multiple } = props;
-            const isDateTimeType = $xeDatePicker.computeIsDateTimeType;
+            const isTimeOrDateTimeType = $xeDatePicker.computeIsTimeOrDateTimeType;
             const dateValueFormat = $xeDatePicker.computeDateValueFormat;
             const firstDayOfWeek = $xeDatePicker.computeFirstDayOfWeek;
             if (props.type === 'week') {
@@ -552,7 +559,7 @@ export default {
             if (multiple) {
                 const overCount = $xeDatePicker.computeOverCount;
                 // 如果为多选
-                if (isDateTimeType) {
+                if (isTimeOrDateTimeType) {
                     // 如果是datetime特殊类型
                     const dateListValue = isReload ? [] : [...$xeDatePicker.computeDateListValue];
                     const datetimeRest = [];
@@ -1143,9 +1150,9 @@ export default {
             const props = $xeDatePicker;
             const { multiple, autoClose } = props;
             const { value, $event } = params;
-            const isDateTimeType = $xeDatePicker.computeIsDateTimeType;
+            const isTimeOrDateTimeType = $xeDatePicker.computeIsTimeOrDateTimeType;
             $xeDatePicker.handleChange(value, $event);
-            if (!multiple && !isDateTimeType) {
+            if (!multiple && !isTimeOrDateTimeType) {
                 if (autoClose) {
                     $xeDatePicker.hidePanel();
                 }
@@ -1472,7 +1479,7 @@ export default {
             const btnTransfer = $xeDatePicker.computeBtnTransfer;
             const shortcutOpts = $xeDatePicker.computeShortcutOpts;
             const isClearable = $xeDatePicker.computeIsClearable;
-            const isDateTimeType = $xeDatePicker.computeIsDateTimeType;
+            const isTimeOrDateTimeType = $xeDatePicker.computeIsTimeOrDateTimeType;
             const shortcutList = $xeDatePicker.computeShortcutList;
             const timeOpts = $xeDatePicker.computeTimeOpts;
             const dateStartDate = $xeDatePicker.computeDateStartDate;
@@ -1486,7 +1493,7 @@ export default {
             const rightSlot = slots.right;
             const ppClassName = popupOpts.className;
             const hasShortcutBtn = shortcutList.length > 0;
-            const showConfirmBtn = (showConfirmButton === null ? (isDateTimeType || multiple) : showConfirmButton);
+            const showConfirmBtn = (showConfirmButton === null ? (isTimeOrDateTimeType || multiple) : showConfirmButton);
             const showClearBtn = (showClearButton === null ? (isClearable && showConfirmBtn && type !== 'time') : showClearButton);
             return h('div', {
                 ref: 'refInputPanel',

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

@@ -3,7 +3,7 @@ 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, getPrevMonth, getNextMonth } from '../../date-panel/src/util';
+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';
@@ -21,8 +21,8 @@ function createReactData() {
         isActivated: false,
         selectStValue: '',
         selectEdValue: '',
-        paneStartVal: '',
-        paneEndVal: ''
+        paneStartVal: [],
+        paneEndVal: []
     };
 }
 function createInternalData() {
@@ -260,11 +260,18 @@ export default {
             const { startValue, endValue } = props;
             return `${startValue || ''}${endValue || ''}`;
         },
-        computeIsDateTimeType() {
+        computeIsTimeType() {
             const $xeDateRangePicker = this;
             const props = $xeDateRangePicker;
             const { type } = props;
-            return type === 'time' || type === 'datetime';
+            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;
@@ -469,7 +476,7 @@ export default {
             const $xeDateRangePicker = this;
             const props = $xeDateRangePicker;
             const reactData = $xeDateRangePicker.reactData;
-            const { value: modelValue, startValue, endValue } = props;
+            const { value: modelValue, startValue, endValue, valueFormat } = props;
             let restObj = {
                 sValue: '',
                 eValue: ''
@@ -490,8 +497,20 @@ export default {
                     restObj = $xeDateRangePicker.paraeUpdateModel();
                 }
             }
-            reactData.selectStValue = restObj.sValue;
-            reactData.selectEdValue = restObj.eValue;
+            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;
@@ -686,12 +705,17 @@ export default {
         },
         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 ((startValue && !endValue) || (!startValue && endValue)) {
+                if (isTimeType) {
+                    $startDatePanel.confirmByEvent(evnt);
+                    $endDatePanel.confirmByEvent(evnt);
+                }
+                else if ((startValue && !endValue) || (!startValue && endValue)) {
                     $xeDateRangePicker.handleChange('', '', evnt);
                 }
                 else {
@@ -724,11 +748,16 @@ export default {
             else {
                 startValue = currValue || XEUtils.last(paneVals);
             }
-            reactData.paneEndVal = [startValue, endValue].join(',');
-            reactData.paneStartVal = [startValue, endValue].join(',');
+            reactData.paneEndVal = [startValue, endValue];
+            reactData.paneStartVal = [startValue, endValue];
             $xeDateRangePicker.handleChange(startValue, endValue, $event);
             $xeDateRangePicker.handleSelectClose();
-            if (!selectStatus) {
+            if (selectStatus) {
+                if (startValue && endValue) {
+                    internalData.selectStatus = false;
+                }
+            }
+            else {
                 internalData.selectStatus = true;
             }
             $xeDateRangePicker.$nextTick(() => {
@@ -757,11 +786,16 @@ export default {
             else {
                 endValue = currValue || XEUtils.last(paneVals);
             }
-            reactData.paneEndVal = [startValue, endValue].join(',');
-            reactData.paneStartVal = [startValue, endValue].join(',');
+            reactData.paneEndVal = [startValue, endValue];
+            reactData.paneStartVal = [startValue, endValue];
             $xeDateRangePicker.handleChange(startValue, endValue, $event);
             $xeDateRangePicker.handleSelectClose();
-            if (!selectStatus) {
+            if (selectStatus) {
+                if (startValue && endValue) {
+                    internalData.selectStatus = false;
+                }
+            }
+            else {
                 internalData.selectStatus = true;
             }
             $xeDateRangePicker.$nextTick(() => {
@@ -794,6 +828,20 @@ export default {
                     }
                     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() {
@@ -819,6 +867,16 @@ export default {
                         $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 {
@@ -851,6 +909,20 @@ export default {
                     }
                     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() {
@@ -876,6 +948,16 @@ export default {
                         $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 {
@@ -1210,7 +1292,8 @@ export default {
             const isClearable = $xeDateRangePicker.computeIsClearable;
             const panelLabelObj = $xeDateRangePicker.computePanelLabelObj;
             const shortcutList = $xeDateRangePicker.computeShortcutList;
-            const isDateTimeType = $xeDateRangePicker.computeIsDateTimeType;
+            const isTimeType = $xeDateRangePicker.computeIsTimeType;
+            const isTimeOrDateTimeType = $xeDateRangePicker.computeIsTimeOrDateTimeType;
             const defaultDates = $xeDateRangePicker.computeDefaultDates;
             const defaultTimes = $xeDateRangePicker.computeDefaultTimes;
             const timeOpts = $xeDateRangePicker.computeTimeOpts;
@@ -1226,7 +1309,7 @@ export default {
             const [sdDate, edDate] = defaultDates;
             const [sdTime, edTime] = defaultTimes;
             const hasShortcutBtn = shortcutList.length > 0;
-            const showConfirmBtn = (showConfirmButton === null ? (isDateTimeType || !autoClose) : showConfirmButton);
+            const showConfirmBtn = (showConfirmButton === null ? (isTimeOrDateTimeType || !autoClose) : showConfirmButton);
             const showClearBtn = (showClearButton === null ? isClearable : showClearButton);
             return h('div', {
                 ref: 'refInputPanel',
@@ -1280,7 +1363,7 @@ export default {
                                         ref: 'refStartDatePanel',
                                         props: {
                                             value: paneStartVal,
-                                            multiple: true,
+                                            multiple: !isTimeType,
                                             valueSort: true,
                                             limitCount: 3,
                                             defaultMode: 'first',
@@ -1311,7 +1394,7 @@ export default {
                                         ref: 'refEndDatePanel',
                                         props: {
                                             value: paneEndVal,
-                                            multiple: true,
+                                            multiple: !isTimeType,
                                             valueSort: true,
                                             limitCount: 3,
                                             defaultMode: 'last',