@coreui/vue-pro 5.17.1 → 5.19.0

package/src/components/calendar/CCalendar.ts

@@ -15,6 +15,9 @@ import {
   isMonthDisabled,
   isMonthInRange,
   isMonthSelected,
+  isQuarterDisabled,
+  isQuarterInRange,
+  isQuarterSelected,
   isToday,
   isSameDateAs,
   isYearDisabled,
@@ -77,7 +80,7 @@ const CCalendar = defineComponent({
       default: 1,
     },
     /**
-     * Set the format of day name.
+     * Set the format of days.
      *
      * @default 'numeric'
      * @since 4.6.0
@@ -138,6 +141,19 @@ const CCalendar = defineComponent({
      * Min selectable date.
      */
     minDate: null as unknown as PropType<Date | string | null>,
+    /**
+     * Sets the format for month names.
+     *
+     * @default 'short'
+     * @since 5.18.0
+     */
+    monthFormat: {
+      type: String as PropType<'long' | 'narrow' | 'short' | 'numeric' | '2-digit'>,
+      default: 'short',
+      validator: (value: string) => {
+        return ['long', 'narrow', 'short', 'numeric', '2-digit'].includes(value)
+      },
+    },
     /**
      * Show arrows navigation.
      */
@@ -166,14 +182,15 @@ const CCalendar = defineComponent({
      */
     selectAdjacementDays: Boolean,
     /**
-     * Specify the type of date selection as day, week, month, or year.
+     * Specify the type of date selection as day, week, month, quarter, or year.
      *
      * @since 5.0.0
      */
     selectionType: {
       type: String as PropType<SelectionTypes>,
       default: 'day',
-      validator: (value: SelectionTypes) => ['day', 'week', 'month', 'year'].includes(value),
+      validator: (value: SelectionTypes) =>
+        ['day', 'week', 'month', 'quarter', 'year'].includes(value),
     },
     /**
      * Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.
@@ -221,6 +238,19 @@ const CCalendar = defineComponent({
      * @since 5.0.0
      */
     weekNumbersLabel: String,
+    /**
+     * Sets the format for years.
+     *
+     * @default 'numeric'
+     * @since 5.18.0
+     */
+    yearFormat: {
+      type: String as PropType<'numeric' | '2-digit'>,
+      default: 'numeric',
+      validator: (value: string) => {
+        return ['numeric', '2-digit'].includes(value)
+      },
+    },
   },
   emits: [
     /**
@@ -233,6 +263,7 @@ const CCalendar = defineComponent({
      * Callback fired when the calendar date changed.
      *
      * @property {Date | null} date
+     * @property {ViewTypes} view
      */
     'calendar-date-change',
     /**
@@ -280,6 +311,7 @@ const CCalendar = defineComponent({
           day: 'days',
           week: 'days',
           month: 'months',
+          quarter: 'quarters',
           year: 'years',
         }
 
@@ -297,7 +329,7 @@ const CCalendar = defineComponent({
         }
 
         if (props.calendarDate) {
-          calendarDate.value = new Date(props.calendarDate)
+          calendarDate.value = convertToDateObject(props.calendarDate, props.selectionType)
         }
       }
     )
@@ -380,7 +412,7 @@ const CCalendar = defineComponent({
 
       calendarDate.value = d
 
-      emit('calendar-date-change', d)
+      emit('calendar-date-change', d, view.value)
     }
 
     const handleCalendarClick = (date: Date, index?: number) => {
@@ -393,6 +425,7 @@ const CCalendar = defineComponent({
       if (view.value === 'months' && props.selectionType !== 'month') {
         calendarDate.value = index ? new Date(_date.setMonth(_date.getMonth() - index)) : _date
         view.value = 'days'
+        emit('calendar-date-change', calendarDate.value, 'days')
         return
       }
 
@@ -400,7 +433,8 @@ const CCalendar = defineComponent({
         calendarDate.value = index
           ? new Date(_date.setFullYear(_date.getFullYear() - index))
           : _date
-        view.value = 'months'
+        view.value = props.selectionType === 'quarter' ? 'quarters' : 'months'
+        emit('calendar-date-change', calendarDate.value, view.value)
         return
       }
 
@@ -411,14 +445,14 @@ const CCalendar = defineComponent({
 
       if (props.range) {
         if (selectEndDate.value) {
-          selectEndDate.value = false
-
           if (startDate.value && startDate.value > date) {
-            startDate.value = null
+            startDate.value = setTimeFromDate(date, startDate.value)
             endDate.value = null
             return
           }
 
+          selectEndDate.value = false
+
           if (isDisableDateInRange(startDate.value, date, props.disabledDates)) {
             startDate.value = null
             endDate.value = null
@@ -430,8 +464,9 @@ const CCalendar = defineComponent({
         }
 
         if (endDate.value && endDate.value < date) {
-          startDate.value = null
+          startDate.value = setTimeFromDate(date, startDate.value)
           endDate.value = null
+          selectEndDate.value = true
           return
         }
 
@@ -456,6 +491,7 @@ const CCalendar = defineComponent({
         handleCalendarClick(date, index)
         if (
           (_view === 'months' && props.selectionType !== 'month') ||
+          (_view === 'quarters' && props.selectionType !== 'quarter') ||
           (_view === 'years' && props.selectionType !== 'year')
         ) {
           nextTick(() => {
@@ -514,12 +550,16 @@ const CCalendar = defineComponent({
               ? -1
               : view.value === 'days'
                 ? -7
+                : view.value === 'quarters'
+                  ? -2
                 : -3,
           ArrowDown:
             props.selectionType === 'week' && view.value === 'days'
               ? 1
               : view.value === 'days'
                 ? 7
+                : view.value === 'quarters'
+                  ? 2
                 : 3,
         }
 
@@ -533,7 +573,7 @@ const CCalendar = defineComponent({
             setCalendarPage(0, event.key === 'ArrowRight' || event.key === 'ArrowDown' ? 1 : -1)
           }
 
-          if (view.value === 'months') {
+          if (view.value === 'months' || view.value === 'quarters') {
             setCalendarPage(event.key === 'ArrowRight' || event.key === 'ArrowDown' ? 1 : -1)
           }
 
@@ -632,13 +672,13 @@ const CCalendar = defineComponent({
       }
     }
 
-    const Calendar = (_calendarDate: Date) => {
+    const Calendar = (_calendarDate: Date, index?: number) => {
       const monthDetails = getMonthDetails(
         _calendarDate.getFullYear(),
         _calendarDate.getMonth(),
         props.firstDayOfWeek
       )
-      const listOfMonths = createGroupsInArray(getMonthsNames(props.locale), 4)
+      const listOfMonths = createGroupsInArray(getMonthsNames(props.locale, props.monthFormat), 4)
       const listOfYears = createGroupsInArray(getYears(_calendarDate.getFullYear()), 4)
       const weekDays = monthDetails[0].days
 
@@ -713,9 +753,9 @@ const CCalendar = defineComponent({
                     ...(isSelected && { 'aria-selected': true }),
                     ...(!isDisabled && {
                       onBlur: () => handleCalendarMouseLeave(),
-                      onClick: () => handleCalendarClick(date),
+                      onClick: () => handleCalendarClick(date, index),
                       onFocus: () => handleCalendarMouseEnter(date),
-                      onKeydown: (event: KeyboardEvent) => handleCalendarKeyDown(event, date),
+                      onKeydown: (event: KeyboardEvent) => handleCalendarKeyDown(event, date, index),
                       onMouseenter: () => handleCalendarMouseEnter(date),
                       onMouseleave: () => handleCalendarMouseLeave(),
                     }),
@@ -732,6 +772,9 @@ const CCalendar = defineComponent({
                       props.disabledDates
                     )
                     const isSelected = isDateSelected(date, startDate.value, endDate.value)
+                    const isInRange = isDateInRange(date, startDate.value, endDate.value)
+                    const isCurrentMonth = month === 'current'
+                    const isTodayDate = isCurrentMonth && isToday(date)
                     return month === 'current' || props.showAdjacementDays
                       ? h(
                           'td',
@@ -747,13 +790,11 @@ const CCalendar = defineComponent({
                                     (hoverDate.value && selectEndDate.value
                                       ? isDateInRange(date, startDate.value, hoverDate.value)
                                       : isDateInRange(date, hoverDate.value, endDate.value)),
-                                  range:
-                                    month === 'current' &&
-                                    isDateInRange(date, startDate.value, endDate.value),
+                                  range: month === 'current' && isInRange,
                                   selected: isSelected,
                                 }),
                                 [month]: true,
-                                today: month === 'current' && isToday(date),
+                                today: isTodayDate,
                               },
                             ],
                             tabindex:
@@ -767,10 +808,10 @@ const CCalendar = defineComponent({
                             ...(props.selectionType === 'day' &&
                               (month === 'current' || props.selectAdjacementDays) && {
                                 onBlur: () => handleCalendarMouseLeave(),
-                                onClick: () => handleCalendarClick(date),
+                                onClick: () => handleCalendarClick(date, index),
                                 onFocus: () => handleCalendarMouseEnter(date),
                                 onKeydown: (event: KeyboardEvent) =>
-                                  handleCalendarKeyDown(event, date),
+                                  handleCalendarKeyDown(event, date, index),
                                 onMouseenter: () => handleCalendarMouseEnter(date),
                                 onMouseleave: () => handleCalendarMouseLeave(),
                               }),
@@ -784,11 +825,20 @@ const CCalendar = defineComponent({
                             {
                               class: 'calendar-cell-inner',
                             },
-                            typeof props.dayFormat === 'function'
-                              ? props.dayFormat(date)
-                              : date.toLocaleDateString(props.locale, {
-                                  day: <'numeric' | '2-digit'>props.dayFormat,
+                            slots.dayCell
+                              ? slots.dayCell({
+                                  date,
+                                  isDisabled,
+                                  isInCurrentMonth: isCurrentMonth,
+                                  isInRange,
+                                  isSelected,
+                                  isToday: isTodayDate,
                                 })
+                              : typeof props.dayFormat === 'function'
+                                ? props.dayFormat(date)
+                                : date.toLocaleDateString(props.locale, {
+                                    day: <'numeric' | '2-digit'>props.dayFormat,
+                                  })
                           )
                         )
                       : h('td')
@@ -811,6 +861,7 @@ const CCalendar = defineComponent({
                     props.disabledDates
                   )
                   const isSelected = isMonthSelected(date, startDate.value, endDate.value)
+                  const isInRange = isMonthInRange(date, startDate.value, endDate.value)
                   return h(
                     'td',
                     {
@@ -824,25 +875,93 @@ const CCalendar = defineComponent({
                             (hoverDate.value && selectEndDate.value
                               ? isMonthInRange(date, startDate.value, hoverDate.value)
                               : isMonthInRange(date, hoverDate.value, endDate.value)),
-                          range: isMonthInRange(date, startDate.value, endDate.value),
+                          range: isInRange,
                         },
                       ],
                       tabindex: isDisabled ? -1 : 0,
                       ...(isSelected && { 'aria-selected': true }),
                       ...(!isDisabled && {
                         onBlur: () => handleCalendarMouseLeave(),
-                        onClick: () => handleCalendarClick(date),
+                        onClick: () => handleCalendarClick(date, index),
                         onFocus: () => handleCalendarMouseEnter(date),
-                        onKeydown: (event: KeyboardEvent) => handleCalendarKeyDown(event, date),
+                        onKeydown: (event: KeyboardEvent) => handleCalendarKeyDown(event, date, index),
                         onMouseenter: () => handleCalendarMouseEnter(date),
                         onMouseleave: () => handleCalendarMouseLeave(),
                       }),
                     },
-                    h('div', { class: 'calendar-cell-inner' }, month)
+                    h(
+                      'div',
+                      { class: 'calendar-cell-inner' },
+                      slots.monthCell
+                        ? slots.monthCell({
+                            date,
+                            isDisabled,
+                            isInRange,
+                            isSelected,
+                          })
+                        : month
+                    )
                   )
                 })
               )
             }),
+          view.value === 'quarters' &&
+            h(
+              'tr',
+              {},
+              Array.from({ length: 4 }, (_, index) => {
+                const date = new Date(_calendarDate.getFullYear(), index * 3, 1)
+                const isDisabled = isQuarterDisabled(
+                  date,
+                  minDate.value,
+                  maxDate.value,
+                  props.disabledDates
+                )
+                const isSelected = isQuarterSelected(date, startDate.value, endDate.value)
+                const isInRange = isQuarterInRange(date, startDate.value, endDate.value)
+                return h(
+                  'td',
+                  {
+                    class: [
+                      'calendar-cell',
+                      'quarters',
+                      {
+                        disabled: isDisabled,
+                        selected: isSelected,
+                        'range-hover':
+                          props.selectionType === 'quarter' &&
+                          (hoverDate.value && selectEndDate.value
+                            ? isQuarterInRange(date, startDate.value, hoverDate.value)
+                            : isQuarterInRange(date, hoverDate.value, endDate.value)),
+                        range: isInRange,
+                      },
+                    ],
+                    tabindex: isDisabled ? -1 : 0,
+                    ...(isSelected && { 'aria-selected': true }),
+                    ...(!isDisabled && {
+                      onBlur: () => handleCalendarMouseLeave(),
+                      onClick: () => handleCalendarClick(date, index),
+                      onFocus: () => handleCalendarMouseEnter(date),
+                      onKeydown: (event: KeyboardEvent) => handleCalendarKeyDown(event, date, index),
+                      onMouseenter: () => handleCalendarMouseEnter(date),
+                      onMouseleave: () => handleCalendarMouseLeave(),
+                    }),
+                  },
+                  h(
+                    'div',
+                    { class: 'calendar-cell-inner' },
+                    slots.quarterCell
+                      ? slots.quarterCell({
+                          date,
+                          isDisabled,
+                          isInRange,
+                          isSelected,
+                        })
+                      : `Q${index + 1}`
+                  )
+                )
+              })
+            ),
           view.value === 'years' &&
             listOfYears.map((row) => {
               return h(
@@ -857,6 +976,7 @@ const CCalendar = defineComponent({
                     props.disabledDates
                   )
                   const isSelected = isYearSelected(date, startDate.value, endDate.value)
+                  const isInRange = isYearInRange(date, startDate.value, endDate.value)
                   return h(
                     'td',
                     {
@@ -870,21 +990,34 @@ const CCalendar = defineComponent({
                             (hoverDate.value && selectEndDate.value
                               ? isYearInRange(date, startDate.value, hoverDate.value)
                               : isYearInRange(date, hoverDate.value, endDate.value)),
-                          range: isYearInRange(date, startDate.value, endDate.value),
+                          range: isInRange,
                         },
                       ],
                       tabindex: isDisabled ? -1 : 0,
                       ...(isSelected && { 'aria-selected': true }),
                       ...(!isDisabled && {
                         onBlur: () => handleCalendarMouseLeave(),
-                        onClick: () => handleCalendarClick(date),
+                        onClick: () => handleCalendarClick(date, index),
                         onFocus: () => handleCalendarMouseEnter(date),
-                        onKeydown: (event: KeyboardEvent) => handleCalendarKeyDown(event, date),
+                        onKeydown: (event: KeyboardEvent) => handleCalendarKeyDown(event, date, index),
                         onMouseenter: () => handleCalendarMouseEnter(date),
                         onMouseleave: () => handleCalendarMouseLeave(),
                       }),
                     },
-                    h('div', { class: 'calendar-cell-inner' }, year)
+                    h(
+                      'div',
+                      { class: 'calendar-cell-inner' },
+                      slots.yearCell
+                        ? slots.yearCell({
+                            date,
+                            isDisabled,
+                            isInRange,
+                            isSelected,
+                          })
+                        : date.toLocaleDateString(props.locale, {
+                            year: props.yearFormat,
+                          })
+                    )
                   )
                 })
               )
@@ -953,8 +1086,8 @@ const CCalendar = defineComponent({
                     if (props.navigation) view.value = 'months'
                   },
                 },
-                _calendarDate.toLocaleDateString(props.locale, { month: 'long' })
-              ),
+              _calendarDate.toLocaleDateString(props.locale, { month: 'long' })
+            ),
             h(
               'button',
               {
@@ -965,7 +1098,7 @@ const CCalendar = defineComponent({
                 },
                 ...(props.navYearFirst && { style: { order: '-1' } }),
               },
-              _calendarDate.toLocaleDateString(props.locale, { year: 'numeric' })
+              _calendarDate.toLocaleDateString(props.locale, { year: props.yearFormat })
             ),
           ]
         ),
@@ -1030,7 +1163,7 @@ const CCalendar = defineComponent({
             const _calendarDate = getCalendarDate(calendarDate.value as Date, index, view.value)
             return h('div', { class: ['calendar', view.value] }, [
               Navigation(_calendarDate),
-              Calendar(_calendarDate),
+              Calendar(_calendarDate, index),
             ])
           }),
         ]

package/src/components/calendar/types.ts

@@ -1,5 +1,5 @@
 export type DisabledDate = ((date: Date) => boolean) | Date | Date[]
 
-export type SelectionTypes = 'day' | 'week' | 'month' | 'year'
+export type SelectionTypes = 'day' | 'week' | 'month' | 'quarter' | 'year'
 
-export type ViewTypes = 'days' | 'months' | 'years'
+export type ViewTypes = 'days' | 'months' | 'quarters' | 'years'

package/src/components/calendar/utils.ts

@@ -60,8 +60,17 @@ const getMondayOfISOWeek = (year: number, week: number): Date => {
  * @returns A number representing year*12 + month for easy comparison.
  */
 const dateToMonthNumber = (date: Date): number => {
-  // prettier-ignore
-  return (date.getFullYear() * 12) + date.getMonth()
+  return date.getFullYear() * 12 + date.getMonth()
+}
+
+/**
+ * Helper function to convert a date to a quarter number for comparison.
+ * @param date - The date to convert.
+ * @returns A number representing year*4 + quarter for easy comparison.
+ */
+const dateToQuarterNumber = (date: Date): number => {
+  const quarter = Math.floor(date.getMonth() / 3)
+  return date.getFullYear() * 4 + quarter
 }
 
 /**
@@ -122,6 +131,34 @@ const parseWeekString = (dateString: string): Date | null => {
   return convertIsoWeekToDate(dateString)
 }
 
+/**
+ * Parses a quarter string and returns a Date object for the first day of that quarter.
+ * @param dateString - The quarter string to parse.
+ * @returns The Date object for the first day of the quarter, or null if invalid.
+ */
+const parseQuarterString = (dateString: string): Date | null => {
+  const quarterPatterns = [
+    /^(\d{4})-Q(\d{1})$/,
+    /^(\d{4})Q(\d{1})$/,
+    /^(\d{4})\s+Q(\d{1})$/,
+  ]
+
+  for (const pattern of quarterPatterns) {
+    const match = dateString.trim().match(pattern)
+    if (match) {
+      const parsedYear = parseYearSmart(match[1])
+      const parsedQuarter = Number.parseInt(match[2], 10)
+
+      if (parsedQuarter >= 1 && parsedQuarter <= 4) {
+        const monthIndex = (parsedQuarter - 1) * 3
+        return new Date(parsedYear, monthIndex, 1)
+      }
+    }
+  }
+
+  return null
+}
+
 /**
  * Parses a month string and returns a Date object for the first day of that month.
  * @param dateString - The month string to parse.
@@ -480,7 +517,7 @@ const parseLocalDateString = (dateString: string): Date | null => {
 /**
  * Converts a date string or Date object to a Date object based on selection type.
  * @param date - The date to convert.
- * @param selectionType - The type of selection ('day', 'week', 'month', 'year').
+ * @param selectionType - The type of selection ('day', 'week', 'month', 'quarter', 'year').
  * @param locale - The locale to use for date parsing (for day parsing).
  * @param includeTime - Whether to include time parsing (for day parsing).
  * @returns The corresponding Date object or null if invalid.
@@ -508,6 +545,9 @@ export const convertToDateObject = (
     case 'month': {
       return parseMonthString(dateString)
     }
+    case 'quarter': {
+      return parseQuarterString(dateString)
+    }
     case 'year': {
       return parseYearString(dateString)
     }
@@ -523,7 +563,7 @@ export const convertToDateObject = (
  * @param dateString - The date string to parse.
  * @param locale - The locale to use for date format patterns.
  * @param includeTime - Whether to include time parsing.
- * @param selectionType - The selection type ('day', 'week', 'month', 'year').
+ * @param selectionType - The selection type ('day', 'week', 'month', 'quarter', 'year').
  * @returns A Date object if parsing succeeds, null if parsing fails.
  */
 export const getLocalDateFromString = (
@@ -565,7 +605,7 @@ export const getCalendarDate = (calendarDate: Date, order: number, view: ViewTyp
     return new Date(calendarDate.getFullYear(), calendarDate.getMonth() + order, 1)
   }
 
-  if (order !== 0 && view === 'months') {
+  if (order !== 0 && (view === 'months' || view === 'quarters')) {
     return new Date(calendarDate.getFullYear() + order, calendarDate.getMonth(), 1)
   }
 
@@ -580,7 +620,7 @@ export const getCalendarDate = (calendarDate: Date, order: number, view: ViewTyp
 /**
  * Formats a date based on the selection type.
  * @param date - The date to format.
- * @param selectionType - The type of selection ('day', 'week', 'month', 'year').
+ * @param selectionType - The type of selection ('day', 'week', 'month', 'quarter', 'year').
  * @returns A formatted date string or the original Date object.
  */
 export const getDateBySelectionType = (
@@ -601,6 +641,11 @@ export const getDateBySelectionType = (
     return `${date.getFullYear()}-${monthNumber}`
   }
 
+  if (selectionType === 'quarter') {
+    const quarter = Math.floor(date.getMonth() / 3) + 1
+    return `${date.getFullYear()}Q${quarter}`
+  }
+
   if (selectionType === 'year') {
     return `${date.getFullYear()}`
   }
@@ -650,7 +695,10 @@ export const getFirstAvailableDateInRange = (
  * @param format - The format of the month names ('short' or 'long').
  * @returns An array of month names.
  */
-export const getMonthsNames = (locale: string, format: 'short' | 'long' = 'short'): string[] => {
+export const getMonthsNames = (
+  locale: string,
+  format: 'long' | 'narrow' | 'short' | 'numeric' | '2-digit' = 'short'
+): string[] => {
   return Array.from({ length: 12 }, (_, i) => {
     return new Date(2000, i, 1).toLocaleString(locale, { month: format })
   })
@@ -1031,6 +1079,101 @@ export const isMonthInRange = (date: Date, start: Date | null, end: Date | null)
   return Boolean(_start && _end && _start <= _date && _date <= _end)
 }
 
+/**
+ * Checks if a quarter is disabled based on the 'quarter' period type.
+ * @param date - The date representing the quarter to check.
+ * @param min - Minimum allowed date.
+ * @param max - Maximum allowed date.
+ * @param disabledDates - Criteria for disabled dates.
+ * @returns True if the quarter is disabled, false otherwise.
+ */
+export const isQuarterDisabled = (
+  date: Date,
+  min?: Date | null,
+  max?: Date | null,
+  disabledDates?: DisabledDate | DisabledDate[]
+) => {
+  const current = dateToQuarterNumber(date)
+  const _min = min ? dateToQuarterNumber(min) : null
+  const _max = max ? dateToQuarterNumber(max) : null
+
+  if (isOutsideRange(current, _min, _max)) {
+    return true
+  }
+
+  if (disabledDates === undefined) {
+    return false
+  }
+
+  const quarter = Math.floor(date.getMonth() / 3)
+  const quarterStartMonth = quarter * 3
+  const quarterEndMonth = quarterStartMonth + 2
+  const year = date.getFullYear()
+
+  const quarterStart = new Date(year, quarterStartMonth, 1)
+  const quarterEnd = new Date(year, quarterEndMonth + 1, 0)
+
+  const startTime = min ? Math.max(quarterStart.getTime(), min.getTime()) : quarterStart.getTime()
+  const endTime = max ? Math.min(quarterEnd.getTime(), max.getTime()) : quarterEnd.getTime()
+
+  for (
+    const currentDate = new Date(startTime);
+    currentDate.getTime() <= endTime;
+    currentDate.setDate(currentDate.getDate() + 1)
+  ) {
+    if (!isDateDisabled(currentDate, min, max, disabledDates)) {
+      return false
+    }
+  }
+
+  return false
+}
+
+/**
+ * Checks if a quarter is selected based on start and end dates.
+ * @param date - The date representing the quarter.
+ * @param start - Start date.
+ * @param end - End date.
+ * @returns True if the quarter is selected, false otherwise.
+ */
+export const isQuarterSelected = (date: Date, start: Date | null, end: Date | null): boolean => {
+  const year = date.getFullYear()
+  const quarter = Math.floor(date.getMonth() / 3)
+
+  if (start !== null) {
+    const startYear = start.getFullYear()
+    const startQuarter = Math.floor(start.getMonth() / 3)
+    if (year === startYear && quarter === startQuarter) {
+      return true
+    }
+  }
+
+  if (end !== null) {
+    const endYear = end.getFullYear()
+    const endQuarter = Math.floor(end.getMonth() / 3)
+    if (year === endYear && quarter === endQuarter) {
+      return true
+    }
+  }
+
+  return false
+}
+
+/**
+ * Checks if a quarter is within a specified range.
+ * @param date - The date representing the quarter.
+ * @param start - Start date.
+ * @param end - End date.
+ * @returns True if the quarter is within the range, false otherwise.
+ */
+export const isQuarterInRange = (date: Date, start: Date | null, end: Date | null): boolean => {
+  const _start = start ? dateToQuarterNumber(start) : null
+  const _end = end ? dateToQuarterNumber(end) : null
+  const _date = dateToQuarterNumber(date)
+
+  return Boolean(_start && _end && _start <= _date && _date <= _end)
+}
+
 /**
  * Checks if two dates are the same calendar date.
  * @param date - First date.