@coreui/react-pro 5.23.4 → 5.24.0

package/src/components/calendar/CCalendar.tsx

@@ -69,7 +69,7 @@ export interface CCalendarProps {
   className?: string
 
   /**
-   * Sets the format for day names. Accepts either a built-in format ('numeric' or '2-digit') or a custom function to return any desired string or number for the day.
+   * Sets the format for days. Accepts either a built-in format ('numeric' or '2-digit') or a custom function to return any desired string or number for the day.
    *
    * @default 'numeric'
    * @since 4.3.0
@@ -117,6 +117,14 @@ export interface CCalendarProps {
    */
   minDate?: Date | string | null
 
+  /**
+   * Sets the format for month names. Accepts built-in formats ('long', 'narrow', 'short', 'numeric', '2-digit').
+   *
+   * @since 5.24.0
+   * @default 'short'
+   */
+  monthFormat?: 'long' | 'narrow' | 'short' | 'numeric' | '2-digit'
+
   /**
    * Toggles display of arrow-based navigation (previous/next controls) in the React Calendar component. If set to `false`, you can build custom navigation or handle the navigation programmatically.
    */
@@ -155,6 +163,64 @@ export interface CCalendarProps {
    */
   range?: boolean
 
+  /**
+   * A function that allows you to customize the rendering of individual day cells within the calendar. This function receives the date and metadata (like selection and disabled status) as arguments, enabling you to apply custom styles, add tooltips, or include additional content in each day cell.
+   *
+   * @since 5.24.0
+   */
+  renderDayCell?: (
+    date: Date,
+    meta: {
+      isDisabled: boolean
+      isInCurrentMonth: boolean
+      isInRange: boolean
+      isSelected: boolean
+      isToday: boolean
+    }
+  ) => ReactNode
+
+  /**
+   * A function that allows you to customize the rendering of individual month cells within the calendar. This function receives the date and metadata (like selection and disabled status) as arguments, enabling you to apply custom styles or include additional content in each month cell.
+   *
+   * @since 5.24.0
+   */
+  renderMonthCell?: (
+    date: Date,
+    meta: {
+      isDisabled: boolean
+      isInRange: boolean
+      isSelected: boolean
+    }
+  ) => ReactNode
+
+  /**
+   * A function that allows you to customize the rendering of individual quarter cells within the calendar. This function receives the date and metadata (like selection and disabled status) as arguments, enabling you to apply custom styles or include additional content in each quarter cell.
+   *
+   * @since 5.24.0
+   */
+  renderQuarterCell?: (
+    date: Date,
+    meta: {
+      isDisabled: boolean
+      isInRange: boolean
+      isSelected: boolean
+    }
+  ) => ReactNode
+
+  /**
+   * A function that allows you to customize the rendering of individual year cells within the calendar. This function receives the date and metadata (like selection and disabled status) as arguments, enabling you to apply custom styles or include additional content in each year cell.
+   *
+   * @since 5.24.0
+   */
+  renderYearCell?: (
+    date: Date,
+    meta: {
+      isDisabled: boolean
+      isInRange: boolean
+      isSelected: boolean
+    }
+  ) => ReactNode
+
   /**
    * Sets whether days from adjacent months (shown at the start/end of the current view) are selectable. This only applies if `showAdjacementDays` is set to `true`.
    *
@@ -215,10 +281,21 @@ export interface CCalendarProps {
    */
   weekNumbersLabel?: string
 
+  /**
+   * Sets the format for years. Accepts built-in formats ('numeric' or '2-digit').
+   *
+   * @default 'numeric'
+   * @since 5.24.0
+   */
+  yearFormat?: 'numeric' | '2-digit'
+
   /**
    * Callback fired when the calendar's reference date (i.e., the date indicating which month/year is currently displayed) changes. Receives the new `Date | string` as an argument for further handling.
    */
-  onCalendarDateChange?: (date: Date | string) => void
+  onCalendarDateChange?: (
+    date: Date | string,
+    view: 'days' | 'months' | 'quarters' | 'years'
+  ) => void
 
   /**
    * Callback fired when the user hovers over a calendar cell. The argument is the date of the cell that the user is currently hovering.
@@ -264,6 +341,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       locale = 'default',
       maxDate,
       minDate,
+      monthFormat = 'short',
       navigation = true,
       navNextIcon,
       navNextDoubleIcon,
@@ -271,6 +349,10 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       navPrevDoubleIcon,
       navYearFirst,
       range,
+      renderDayCell,
+      renderMonthCell,
+      renderQuarterCell,
+      renderYearCell,
       selectAdjacementDays = false,
       selectEndDate,
       selectionType = 'day',
@@ -278,6 +360,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       showWeekNumber = false,
       weekdayFormat = 2,
       weekNumbersLabel,
+      yearFormat = 'numeric',
       onCalendarDateChange,
       onDateHover,
       onEndDateChange,
@@ -296,6 +379,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
         day: 'days',
         week: 'days',
         month: 'months',
+        quarter: 'quarters',
         year: 'years',
       }
 
@@ -392,7 +476,8 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       }
 
       setCalendarDate(d)
-      onCalendarDateChange?.(d)
+      onCalendarDateChange?.(d, view)
+      console.log('View changed to:', view)
     }
 
     const handleStartDateChange = (date: Date | null) => {
@@ -435,12 +520,20 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       if (view === 'months' && selectionType !== 'month') {
         setCalendarDate(index ? new Date(_date.setMonth(_date.getMonth() - index)) : _date)
         handleViewChange('days')
+        onCalendarDateChange?.(_date, 'days')
         return
       }
 
       if (view === 'years' && selectionType !== 'year') {
         setCalendarDate(index ? new Date(_date.setFullYear(_date.getFullYear() - index)) : _date)
-        handleViewChange('months')
+        if (selectionType === 'quarter') {
+          handleViewChange('quarters')
+          onCalendarDateChange?.(_date, 'quarters')
+        } else {
+          handleViewChange('months')
+          onCalendarDateChange?.(_date, 'months')
+        }
+
         return
       }
 
@@ -564,7 +657,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
             setCalendarPage(0, event.key === 'ArrowRight' || event.key === 'ArrowDown' ? 1 : -1)
           }
 
-          if (view === 'months') {
+          if (view === 'months' || view === 'quarters') {
             setCalendarPage(event.key === 'ArrowRight' || event.key === 'ArrowDown' ? 1 : -1)
           }
 
@@ -709,11 +802,16 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
                   locale={locale}
                   maxDate={_maxDate}
                   minDate={_minDate}
+                  monthFormat={monthFormat}
                   onCalendarClick={(date) => handleCalendarClick(date, index)}
                   onCalendarKeyDown={(event, date) => handleCalendarKeyDown(event, date, index)}
                   onCalendarMouseEnter={handleCalendarMouseEnter}
                   onCalendarMouseLeave={handleCalendarMouseLeave}
                   order={index}
+                  renderDayCell={renderDayCell}
+                  renderMonthCell={renderMonthCell}
+                  renderQuarterCell={renderQuarterCell}
+                  renderYearCell={renderYearCell}
                   selectAdjacementDays={selectAdjacementDays}
                   selectEndDate={_selectEndDate}
                   selectionType={selectionType}
@@ -723,6 +821,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
                   view={view}
                   weekdayFormat={weekdayFormat}
                   weekNumbersLabel={weekNumbersLabel}
+                  yearFormat={yearFormat}
                 />
               </div>
             )
@@ -759,7 +858,7 @@ CCalendar.propTypes = {
   range: PropTypes.bool,
   selectAdjacementDays: PropTypes.bool,
   selectEndDate: PropTypes.bool,
-  selectionType: PropTypes.oneOf(['day', 'week', 'month', 'year']),
+  selectionType: PropTypes.oneOf(['day', 'week', 'month', 'quarter', 'year']),
   showAdjacementDays: PropTypes.bool,
   showWeekNumber: PropTypes.bool,
   startDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),

package/src/components/calendar/CCalendarPanel.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, KeyboardEvent, useEffect, useState } from 'react'
+import React, { forwardRef, KeyboardEvent, ReactNode, useEffect, useState } from 'react'
 import classNames from 'classnames'
 
 import {
@@ -12,6 +12,9 @@ import {
   isMonthDisabled,
   isMonthInRange,
   isMonthSelected,
+  isQuarterDisabled,
+  isQuarterInRange,
+  isQuarterSelected,
   isToday,
   isYearDisabled,
   isYearInRange,
@@ -29,11 +32,46 @@ export interface CCalendarPanelProps {
   locale: string
   maxDate: Date | null
   minDate: Date | null
+  monthFormat?: 'long' | 'narrow' | 'short' | 'numeric' | '2-digit'
   onCalendarClick: (date: Date) => void
   onCalendarKeyDown: (event: KeyboardEvent<HTMLDivElement>, date: Date) => void
   onCalendarMouseEnter: (date: Date) => void
   onCalendarMouseLeave: () => void
   order: number
+  renderDayCell?: (
+    date: Date,
+    meta: {
+      isDisabled: boolean
+      isInCurrentMonth: boolean
+      isInRange: boolean
+      isSelected: boolean
+      isToday: boolean
+    }
+  ) => ReactNode
+  renderMonthCell?: (
+    date: Date,
+    meta: {
+      isDisabled: boolean
+      isInRange: boolean
+      isSelected: boolean
+    }
+  ) => ReactNode
+  renderQuarterCell?: (
+    date: Date,
+    meta: {
+      isDisabled: boolean
+      isInRange: boolean
+      isSelected: boolean
+    }
+  ) => ReactNode
+  renderYearCell?: (
+    date: Date,
+    meta: {
+      isDisabled: boolean
+      isInRange: boolean
+      isSelected: boolean
+    }
+  ) => ReactNode
   selectAdjacementDays: boolean
   selectEndDate: boolean | undefined
   selectionType: SelectionTypes
@@ -43,6 +81,7 @@ export interface CCalendarPanelProps {
   view: ViewTypes
   weekdayFormat: number | 'long' | 'narrow' | 'short' | ((date: Date) => string | number)
   weekNumbersLabel: string | undefined
+  yearFormat?: 'numeric' | '2-digit'
 }
 
 export const CCalendarPanel = forwardRef<HTMLTableElement, CCalendarPanelProps>(
@@ -57,10 +96,15 @@ export const CCalendarPanel = forwardRef<HTMLTableElement, CCalendarPanelProps>(
       locale,
       maxDate,
       minDate,
+      monthFormat,
       onCalendarClick,
       onCalendarKeyDown,
       onCalendarMouseEnter,
       onCalendarMouseLeave,
+      renderDayCell,
+      renderMonthCell,
+      renderQuarterCell,
+      renderYearCell,
       selectAdjacementDays,
       selectEndDate,
       selectionType,
@@ -70,13 +114,14 @@ export const CCalendarPanel = forwardRef<HTMLTableElement, CCalendarPanelProps>(
       view,
       weekdayFormat,
       weekNumbersLabel,
+      yearFormat,
     },
     ref
   ) => {
     const [listOfMonths, setListOfMonths] = useState<string[][]>([])
 
     useEffect(() => {
-      setListOfMonths(createGroupsInArray(getMonthsNames(locale), 4))
+      setListOfMonths(createGroupsInArray(getMonthsNames(locale, monthFormat), 4))
     }, [])
 
     const monthDetails = getMonthDetails(
@@ -138,7 +183,6 @@ export const CCalendarPanel = forwardRef<HTMLTableElement, CCalendarPanelProps>(
                     }
                   )}
                   key={index}
-                  // tabIndex={selectionType === 'week' && !isDisabled ? 0 : -1}
                   {...(selectionType === 'week' && isSelected && { 'aria-selected': true })}
                   {...(selectionType === 'week' &&
                     !isDisabled && {
@@ -196,9 +240,17 @@ export const CCalendarPanel = forwardRef<HTMLTableElement, CCalendarPanelProps>(
                           })}
                       >
                         <div className="calendar-cell-inner">
-                          {typeof dayFormat === 'function'
-                            ? dayFormat(date)
-                            : date.toLocaleDateString(locale, { day: dayFormat })}
+                          {renderDayCell
+                            ? renderDayCell(date, {
+                                isDisabled,
+                                isInCurrentMonth: month === 'current',
+                                isInRange: isDateInRange(date, startDate, endDate),
+                                isSelected,
+                                isToday: isToday(date),
+                              })
+                            : typeof dayFormat === 'function'
+                              ? dayFormat(date)
+                              : date.toLocaleDateString(locale, { day: dayFormat })}
                         </div>
                       </td>
                     ) : (
@@ -241,13 +293,66 @@ export const CCalendarPanel = forwardRef<HTMLTableElement, CCalendarPanelProps>(
                           onMouseLeave: () => onCalendarMouseLeave(),
                         })}
                       >
-                        <div className="calendar-cell-inner">{month}</div>
+                        <div className="calendar-cell-inner">
+                          {renderMonthCell
+                            ? renderMonthCell(date, {
+                                isDisabled,
+                                isInRange: isMonthInRange(date, startDate, endDate),
+                                isSelected,
+                              })
+                            : month}
+                        </div>
                       </td>
                     )
                   })}
                 </tr>
               )
             })}
+          {view === 'quarters' && (
+            <tr>
+              {Array.from({ length: 4 }, (_, index) => {
+                const date = new Date(calendarDate.getFullYear(), index * 3, 1)
+                const isDisabled = isQuarterDisabled(date, minDate, maxDate, disabledDates)
+                const isSelected = isQuarterSelected(date, startDate, endDate)
+                return (
+                  <td
+                    className={classNames('calendar-cell quarters', {
+                      disabled: isDisabled,
+                      selected: isSelected,
+                      'range-hover':
+                        selectionType === 'quarter' &&
+                        (hoverDate && selectEndDate
+                          ? isQuarterInRange(date, startDate, hoverDate)
+                          : isQuarterInRange(date, hoverDate, endDate)),
+                      range: isQuarterInRange(date, startDate, endDate),
+                    })}
+                    key={index}
+                    tabIndex={isDisabled ? -1 : 0}
+                    {...(isSelected && { 'aria-selected': true })}
+                    {...(!isDisabled && {
+                      onBlur: () => onCalendarMouseLeave(),
+                      onClick: () => onCalendarClick(date),
+                      onFocus: () => onCalendarMouseEnter(date),
+                      onKeyDown: (event) => onCalendarKeyDown(event, date),
+                      onMouseEnter: () => onCalendarMouseEnter(date),
+                      onMouseLeave: () => onCalendarMouseLeave(),
+                    })}
+                  >
+                    <div className="calendar-cell-inner">
+                      {renderQuarterCell
+                        ? renderQuarterCell(date, {
+                            isDisabled,
+                            isInRange: isQuarterInRange(date, startDate, endDate),
+                            isSelected,
+                          })
+                        : `Q${index + 1}`}
+                    </div>
+                  </td>
+                )
+              })}
+            </tr>
+          )}
+
           {view === 'years' &&
             listOfYears.map((row, index) => {
               return (
@@ -281,7 +386,13 @@ export const CCalendarPanel = forwardRef<HTMLTableElement, CCalendarPanelProps>(
                         })}
                       >
                         <div className="calendar-cell-inner">
-                          {new Date(year, 0, 1).toLocaleDateString(locale, { year: 'numeric' })}
+                          {renderYearCell
+                            ? renderYearCell(date, {
+                                isDisabled,
+                                isInRange: isYearInRange(date, startDate, endDate),
+                                isSelected,
+                              })
+                            : date.toLocaleDateString(locale, { year: yearFormat })}
                         </div>
                       </td>
                     )

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,36 @@ 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})$/, // 2023-Q1, 2023-Q4
+    /^(\d{4})Q(\d{1})$/, // 2023Q1, 2023Q4
+    /^(\d{4})\s+Q(\d{1})$/, // 2023 Q1, 2023 Q4
+  ]
+
+  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)
+
+      // Validate quarter (1-4)
+      if (parsedQuarter >= 1 && parsedQuarter <= 4) {
+        // Calculate the first month of the quarter (Q1=0, Q2=3, Q3=6, Q4=9)
+        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.
@@ -508,6 +547,9 @@ export const convertToDateObject = (
     case 'month': {
       return parseMonthString(dateString)
     }
+    case 'quarter': {
+      return parseQuarterString(dateString)
+    }
     case 'year': {
       return parseYearString(dateString)
     }
@@ -523,7 +565,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 +607,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 +622,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 +643,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 +697,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 +1081,102 @@ 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
+  }
+
+  // Get the start and end of the quarter
+  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) // Last day of the quarter
+
+  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.