@@ -148,12 +150,17 @@ export default defineComponent({
>
{{
default: () => [
- this.startMonthArray.map((monthItem, i) =>
- renderItem(monthItem, i, mergedClsPrefix, 'start')
+ (type === 'monthrange'
+ ? this.startMonthArray
+ : this.startQuarterArray
+ ).map((item, i) =>
+ renderItem(item, i, mergedClsPrefix, 'start')
),
-
+ type === 'monthrange' && (
+
+ )
]
}}
@@ -203,7 +210,7 @@ export default defineComponent({
)
}}
- {type === 'monthrange' ? (
+ {type === 'monthrange' || type === 'quarterrange' ? (
@@ -214,12 +221,17 @@ export default defineComponent({
>
{{
default: () => [
- this.endMonthArray.map((monthItem, i) =>
- renderItem(monthItem, i, mergedClsPrefix, 'end')
+ (type === 'monthrange'
+ ? this.endMonthArray
+ : this.endQuarterArray
+ ).map((item, i) =>
+ renderItem(item, i, mergedClsPrefix, 'end')
),
-
+ type === 'monthrange' && (
+
+ )
]
}}
diff --git a/src/date-picker/src/panel/use-dual-calendar.ts b/src/date-picker/src/panel/use-dual-calendar.ts
index 1380ec308..11082d445 100644
--- a/src/date-picker/src/panel/use-dual-calendar.ts
+++ b/src/date-picker/src/panel/use-dual-calendar.ts
@@ -10,7 +10,8 @@ import {
startOfDay,
set,
getDate,
- getTime
+ getTime,
+ startOfQuarter
} from 'date-fns/esm'
import { VirtualListInst } from 'vueuc'
import {
@@ -22,7 +23,9 @@ import {
yearArray,
monthArray,
getDefaultTime,
- pluckValueFromRange
+ pluckValueFromRange,
+ QuarterItem,
+ quarterArray
} from '../utils'
import { usePanelCommon, usePanelCommonProps } from './use-panel-common'
import {
@@ -47,7 +50,12 @@ const useDualCalendarProps = {
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
function useDualCalendar (
props: ExtractPropTypes
,
- type: 'daterange' | 'datetimerange' | 'monthrange'
+ type:
+ | 'daterange'
+ | 'datetimerange'
+ | 'monthrange'
+ | 'quarterrange'
+ | 'yearrange'
) {
const {
isDateDisabledRef,
@@ -217,6 +225,14 @@ function useDualCalendar (
const endYearArrayRef = computed(() => {
return yearArray(pluckValueFromRange(props.value, 'end'), nowRef.value)
})
+ const startQuarterArrayRef = computed(() => {
+ const startValue = pluckValueFromRange(props.value, 'start')
+ return quarterArray(startValue ?? Date.now(), startValue, nowRef.value)
+ })
+ const endQuarterArrayRef = computed(() => {
+ const endValue = pluckValueFromRange(props.value, 'end')
+ return quarterArray(endValue ?? Date.now(), endValue, nowRef.value)
+ })
const startMonthArrayRef = computed(() => {
const startValue = pluckValueFromRange(props.value, 'start')
return monthArray(startValue ?? Date.now(), startValue, nowRef.value)
@@ -711,17 +727,27 @@ function useDualCalendar (
}
// only for monthrange
function handleColItemClick (
- dateItem: MonthItem | YearItem,
+ dateItem: MonthItem | QuarterItem | YearItem,
clickType: 'start' | 'end'
): void {
const { value } = props
const noCurrentValue = !Array.isArray(value)
const itemTs =
- dateItem.type === 'year'
+ dateItem.type === 'year' && type !== 'yearrange'
? noCurrentValue
- ? set(dateItem.ts, { month: getMonth(new Date()) }).valueOf()
+ ? set(dateItem.ts, {
+ month: getMonth(
+ type === 'quarterrange'
+ ? startOfQuarter(new Date())
+ : new Date()
+ )
+ }).valueOf()
: set(dateItem.ts, {
- month: getMonth(value[clickType === 'start' ? 0 : 1])
+ month: getMonth(
+ type === 'quarterrange'
+ ? startOfQuarter(value[clickType === 'start' ? 0 : 1])
+ : value[clickType === 'start' ? 0 : 1]
+ )
}).valueOf()
: dateItem.ts
if (noCurrentValue) {
@@ -750,6 +776,7 @@ function useDualCalendar (
panelCommon.doUpdateValue(nextValue, props.panel)
switch (type) {
case 'monthrange':
+ case 'quarterrange':
panelCommon.disableTransitionOneTick()
if (otherPartsChanged) {
justifyColumnsScrollState(nextValue, 'start')
@@ -758,6 +785,10 @@ function useDualCalendar (
justifyColumnsScrollState(nextValue, clickType)
}
break
+ case 'yearrange':
+ panelCommon.disableTransitionOneTick()
+ justifyColumnsScrollState(nextValue, 'start')
+ justifyColumnsScrollState(nextValue, 'end')
}
}
function handleStartYearVlScroll (): void {
@@ -816,8 +847,10 @@ function useDualCalendar (
endDateArray: endDateArrayRef,
startYearArray: startYearArrayRef,
startMonthArray: startMonthArrayRef,
+ startQuarterArray: startQuarterArrayRef,
endYearArray: endYearArrayRef,
endMonthArray: endMonthArrayRef,
+ endQuarterArray: endQuarterArrayRef,
isSelecting: isSelectingRef,
handleRangeShortcutMouseenter,
handleRangeShortcutClick,
diff --git a/src/date-picker/src/utils.ts b/src/date-picker/src/utils.ts
index f2500b211..9f1bd28ed 100644
--- a/src/date-picker/src/utils.ts
+++ b/src/date-picker/src/utils.ts
@@ -267,12 +267,12 @@ function monthArray (
}
function quarterArray (
- quarterTs: number,
+ yearAnchorTs: number,
valueTs: number | null,
currentTs: number
): QuarterItem[] {
const calendarQuarters: QuarterItem[] = []
- const yearStart = startOfYear(quarterTs)
+ const yearStart = startOfYear(yearAnchorTs)
for (let i = 0; i < 4; i++) {
calendarQuarters.push(
quarterItem(getTime(addQuarters(yearStart, i)), valueTs, currentTs)
diff --git a/src/date-picker/styles/_common.ts b/src/date-picker/styles/_common.ts
index 1542204e8..e1082f138 100644
--- a/src/date-picker/styles/_common.ts
+++ b/src/date-picker/styles/_common.ts
@@ -21,6 +21,8 @@ export default {
calendarLeftPaddingYear: '0',
calendarLeftPaddingQuarter: '0',
calendarLeftPaddingMonthrange: '0',
+ calendarLeftPaddingQuarterrange: '0',
+ calendarLeftPaddingYearrange: '0',
calendarRightPaddingDate: '6px 12px 4px 12px',
calendarRightPaddingDatetime: '4px 12px',
calendarRightPaddingDaterange: '6px 12px 4px 12px',
@@ -28,5 +30,7 @@ export default {
calendarRightPaddingMonth: '0',
calendarRightPaddingYear: '0',
calendarRightPaddingQuarter: '0',
- calendarRightPaddingMonthrange: '0'
+ calendarRightPaddingMonthrange: '0',
+ calendarRightPaddingQuarterrange: '0',
+ calendarRightPaddingYearrange: '0'
}