feat(RangeCalendar): added maximumDays to range (#1930)

Tragio · web-flow · commit aef754318d0d · 2025-05-26T22:17:29.000+03:00
diff --git a/packages/core/src/RangeCalendar/RangeCalendar.test.ts b/packages/core/src/RangeCalendar/RangeCalendar.test.ts
@@ -715,3 +715,76 @@ describe('numberOfMonths > 1', () => {
     expect(getByTestId('date-1-27')).toHaveAttribute('data-selection-end')
   })
 })
+
+describe('handles maximumDays', () => {
+  it('limits the maximum number of days that can be selected', async () => {
+    const { getByTestId, user } = setup({
+      calendarProps: {
+        placeholder: new CalendarDate(1980, 1, 15),
+        maximumDays: 5,
+      },
+    })
+
+    const startDay = getByTestId('date-1-15')
+    const maximumDay = getByTestId('date-1-20') // 5 days ahead
+    const beyondMaximumDay = getByTestId('date-1-21') // 6 days ahead
+
+    await user.click(startDay)
+    expect(startDay).toHaveAttribute('data-selection-start')
+
+    // Attempt to select an end date beyond the maximum days (more than 5 days ahead)
+    await user.click(beyondMaximumDay)
+
+    expect(beyondMaximumDay).toHaveAttribute('data-disabled')
+    expect(beyondMaximumDay).not.toHaveAttribute('data-selected')
+
+    // Should be limited to 5 days
+    expect(getByTestId('date-1-20')).not.toHaveAttribute('data-disabled')
+
+    await user.click(maximumDay)
+
+    // Check that all days within the maximum range are selected
+    for (let day = 15; day <= 20; day++) {
+      expect(getByTestId(`date-1-${day}`)).toHaveAttribute('data-selected')
+    }
+  })
+
+  it('dynamically updates disabled dates based on the selection and clears constraints after completing a range', async () => {
+    const { getByTestId, user, rerender } = setup({
+      calendarProps: {
+        placeholder: new CalendarDate(1980, 1, 10),
+        maximumDays: 3,
+      },
+      emits: { 'onUpdate:modelValue': data => rerender({ calendarProps: { placeholder: new CalendarDate(1980, 1, 10), maximumDays: 3, modelValue: data } }) },
+    })
+
+    // No dates should be disabled due to maximumDays
+    expect(getByTestId('date-1-14')).not.toHaveAttribute('aria-disabled', 'true')
+    expect(getByTestId('date-1-20')).not.toHaveAttribute('aria-disabled', 'true')
+
+    // Select a start date (10th of January)
+    const startDay = getByTestId('date-1-10')
+    await user.click(startDay)
+    expect(startDay).toHaveAttribute('data-selection-start')
+
+    // Days beyond the maximum limit are now disabled
+    expect(getByTestId('date-1-14')).toHaveAttribute('aria-disabled', 'true')
+
+    // Days within the limit should not be disabled
+    expect(getByTestId('date-1-13')).not.toHaveAttribute('aria-disabled', 'true')
+
+    // Complete the range selection with a date within the limit
+    await user.click(getByTestId('date-1-13'))
+
+    // Distant dates should no longer be disabled
+    expect(getByTestId('date-1-20')).not.toHaveAttribute('aria-disabled', 'true')
+
+    // Select a new range
+    await user.click(getByTestId('date-1-15'))
+    expect(getByTestId('date-1-15')).toHaveAttribute('data-selection-start')
+
+    // Days beyond the maximum limit from the new start date should be disabled
+    expect(getByTestId('date-1-19')).toHaveAttribute('aria-disabled', 'true')
+    expect(getByTestId('date-1-18')).not.toHaveAttribute('aria-disabled', 'true')
+  })
+})
diff --git a/packages/core/src/RangeCalendar/RangeCalendarRoot.vue b/packages/core/src/RangeCalendar/RangeCalendarRoot.vue
@@ -1,6 +1,5 @@
 <script lang="ts">
 import type { DateValue } from '@internationalized/date'
-
 import type { Ref } from 'vue'
 import type { Grid, Matcher, WeekDayFormat } from '@/date'
 import type { PrimitiveProps } from '@/Primitive'
@@ -10,7 +9,13 @@ import type { Direction } from '@/shared/types'
 import { isEqualDay } from '@internationalized/date'
 import { useCalendar } from '@/Calendar/useCalendar'
 import { isBefore } from '@/date'
-import { createContext, isNullish, useDirection, useKbd, useLocale } from '@/shared'
+import {
+  createContext,
+  isNullish,
+  useDirection,
+  useKbd,
+  useLocale,
+} from '@/shared'
 import { getDefaultDate, handleCalendarInitialFocus } from '@/shared/date'
 import { useRangeCalendarState } from './useRangeCalendar'
 
@@ -41,7 +46,7 @@ type RangeCalendarRootContext = {
   isDateHighlightable?: Matcher
   isOutsideVisibleView: (date: DateValue) => boolean
   allowNonContiguousRanges: Ref<boolean>
-  highlightedRange: Ref<{ start: DateValue, end: DateValue } | null>
+  highlightedRange: Ref<{ start: DateValue; end: DateValue } | null>
   focusedValue: Ref<DateValue | undefined>
   lastPressedDateValue: Ref<DateValue | undefined>
   isSelected: (date: DateValue) => boolean
@@ -51,12 +56,17 @@ type RangeCalendarRootContext = {
   isHighlightedEnd: (date: DateValue) => boolean
   prevPage: (prevPageFunc?: (date: DateValue) => DateValue) => void
   nextPage: (nextPageFunc?: (date: DateValue) => DateValue) => void
-  isNextButtonDisabled: (nextPageFunc?: (date: DateValue) => DateValue) => boolean
-  isPrevButtonDisabled: (prevPageFunc?: (date: DateValue) => DateValue) => boolean
+  isNextButtonDisabled: (
+    nextPageFunc?: (date: DateValue) => DateValue
+  ) => boolean
+  isPrevButtonDisabled: (
+    prevPageFunc?: (date: DateValue) => DateValue
+  ) => boolean
   formatter: Formatter
   dir: Ref<Direction>
   disableDaysOutsideCurrentView: Ref<boolean>
   fixedDate: Ref<'start' | 'end' | undefined>
+  maximumDays: Ref<number | undefined>
 }
 
 export interface RangeCalendarRootProps extends PrimitiveProps {
@@ -74,6 +84,8 @@ export interface RangeCalendarRootProps extends PrimitiveProps {
   pagedNavigation?: boolean
   /** Whether or not to prevent the user from deselecting a date without selecting another date first */
   preventDeselect?: boolean
+  /** The maximum number of days that can be selected in a range */
+  maximumDays?: number
   /** The day of the week to start the calendar on */
   weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6
   /** The format to use for the weekday strings provided via the weekdays slot prop */
@@ -123,8 +135,8 @@ export type RangeCalendarRootEmits = {
   'update:startValue': [date: DateValue | undefined]
 }
 
-export const [injectRangeCalendarRootContext, provideRangeCalendarRootContext]
-  = createContext<RangeCalendarRootContext>('RangeCalendarRoot')
+export const [injectRangeCalendarRootContext, provideRangeCalendarRootContext] =
+  createContext<RangeCalendarRootContext>('RangeCalendarRoot')
 </script>
 
 <script setup lang="ts">
@@ -149,6 +161,7 @@ const props = withDefaults(defineProps<RangeCalendarRootProps>(), {
   isDateUnavailable: undefined,
   isDateHighlightable: undefined,
   allowNonContiguousRanges: false,
+  maximumDays: undefined,
   disableDaysOutsideCurrentView: false,
 })
 const emits = defineEmits<RangeCalendarRootEmits>()
@@ -195,10 +208,11 @@ const {
   allowNonContiguousRanges,
   disableDaysOutsideCurrentView,
   fixedDate,
+  maximumDays,
 } = toRefs(props)
 
-const { primitiveElement, currentElement: parentElement }
-  = usePrimitiveElement()
+const { primitiveElement, currentElement: parentElement } =
+  usePrimitiveElement()
 const dir = useDirection(propDir)
 const locale = useLocale(propLocale)
 
@@ -211,15 +225,21 @@ const modelValue = useVModel(props, 'modelValue', emits, {
   passive: (props.modelValue === undefined) as false,
 }) as Ref<DateRange>
 
-const currentModelValue = computed(() => isNullish(modelValue.value) ? { start: undefined, end: undefined } : modelValue.value)
+const currentModelValue = computed(() =>
+  isNullish(modelValue.value)
+    ? { start: undefined, end: undefined }
+    : modelValue.value
+)
 
 const defaultDate = getDefaultDate({
   defaultPlaceholder: props.placeholder,
   defaultValue: currentModelValue.value.start,
   locale: props.locale,
 })
 
-const startValue = ref(currentModelValue.value.start) as Ref<DateValue | undefined>
+const startValue = ref(currentModelValue.value.start) as Ref<
+  DateValue | undefined
+>
 const endValue = ref(currentModelValue.value.end) as Ref<DateValue | undefined>
 
 const placeholder = useVModel(props, 'placeholder', emits, {
@@ -271,6 +291,7 @@ const {
   isSelectionEnd,
   isHighlightedStart,
   isHighlightedEnd,
+  isDateDisabled: rangeIsDateDisabled,
 } = useRangeCalendarState({
   start: startValue,
   end: endValue,
@@ -280,21 +301,24 @@ const {
   focusedValue,
   allowNonContiguousRanges,
   fixedDate,
+  maximumDays,
 })
 
 watch(modelValue, (_modelValue, _prevValue) => {
-  if ((!_prevValue?.start && _modelValue?.start)
-    || !_modelValue
-    || !_modelValue.start
-    || (startValue.value && !isEqualDay(_modelValue.start, startValue.value))
+  if (
+    (!_prevValue?.start && _modelValue?.start) ||
+    !_modelValue ||
+    !_modelValue.start ||
+    (startValue.value && !isEqualDay(_modelValue.start, startValue.value))
   ) {
     startValue.value = _modelValue?.start?.copy?.()
   }
 
-  if ((!_prevValue?.end && _modelValue.end)
-    || !_modelValue
-    || !_modelValue.end
-    || (endValue.value && !isEqualDay(_modelValue.end, endValue.value))
+  if (
+    (!_prevValue?.end && _modelValue.end) ||
+    !_modelValue ||
+    !_modelValue.end ||
+    (endValue.value && !isEqualDay(_modelValue.end, endValue.value))
   ) {
     endValue.value = _modelValue?.end?.copy?.()
   }
@@ -310,21 +334,33 @@ watch(startValue, (_startValue) => {
 watch([startValue, endValue], ([_startValue, _endValue]) => {
   const value = currentModelValue.value
 
-  if (value && value.start && value.end && _startValue && _endValue && isEqualDay(value.start, _startValue) && isEqualDay(value.end, _endValue))
+  if (
+    value &&
+    value.start &&
+    value.end &&
+    _startValue &&
+    _endValue &&
+    isEqualDay(value.start, _startValue) &&
+    isEqualDay(value.end, _endValue)
+  )
     return
 
   isEditing.value = true
   if (_startValue && _endValue) {
     isEditing.value = false
-    if (value.start && value.end && isEqualDay(value.start, _startValue) && isEqualDay(value.end, _endValue))
+    if (
+      value.start &&
+      value.end &&
+      isEqualDay(value.start, _startValue) &&
+      isEqualDay(value.end, _endValue)
+    )
       return
     if (isBefore(_endValue, _startValue)) {
       modelValue.value = {
         start: _endValue.copy(),
         end: _startValue.copy(),
       }
-    }
-    else {
+    } else {
       modelValue.value = {
         start: _startValue.copy(),
         end: _endValue.copy(),
@@ -364,7 +400,7 @@ provideRangeCalendarRootContext({
   fullCalendarLabel,
   headingValue,
   isInvalid,
-  isDateDisabled,
+  isDateDisabled: rangeIsDateDisabled,
   allowNonContiguousRanges,
   highlightedRange,
   focusedValue,
@@ -385,11 +421,11 @@ provideRangeCalendarRootContext({
   isHighlightedEnd,
   disableDaysOutsideCurrentView,
   fixedDate,
+  maximumDays,
 })
 
 onMounted(() => {
-  if (initialFocus.value)
-    handleCalendarInitialFocus(parentElement.value)
+  if (initialFocus.value) handleCalendarInitialFocus(parentElement.value)
 })
 </script>
 
@@ -405,11 +441,21 @@ onMounted(() => {
     :data-invalid="isInvalid ? '' : undefined"
     :dir="dir"
   >
-    <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
-      <div
-        role="heading"
-        aria-level="2"
-      >
+    <div
+      style="
+        border: 0px;
+        clip: rect(0px, 0px, 0px, 0px);
+        clip-path: inset(50%);
+        height: 1px;
+        margin: -1px;
+        overflow: hidden;
+        padding: 0px;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+      "
+    >
+      <div role="heading" aria-level="2">
         {{ fullCalendarLabel }}
       </div>
     </div>
diff --git a/packages/core/src/RangeCalendar/useRangeCalendar.ts b/packages/core/src/RangeCalendar/useRangeCalendar.ts
@@ -18,6 +18,7 @@ export type UseRangeCalendarProps = {
   focusedValue: Ref<DateValue | undefined>
   allowNonContiguousRanges: Ref<boolean>
   fixedDate: Ref<'start' | 'end' | undefined>
+  maximumDays?: Ref<number | undefined>
 }
 
 export function useRangeCalendarState(props: UseRangeCalendarProps) {
@@ -70,6 +71,21 @@ export function useRangeCalendarState(props: UseRangeCalendarProps) {
     return false
   }
 
+  // Check if a date exceeds maximum days limit from the start date
+  const rangeIsDateDisabled = (date: DateValue) => {
+    if (props.isDateDisabled(date))
+      return true
+
+    if (!props.maximumDays?.value || !props.start.value || props.end.value || isSameDay(props.start.value, date))
+      return false
+
+    // Check if exceeds maximum days limit
+    if (Math.abs(date.compare(props.start.value)) > props.maximumDays.value)
+      return true
+
+    return false
+  }
+
   const isDateHighlightable = (date: DateValue) => {
     if (props.isDateHighlightable?.(date))
       return true
@@ -93,7 +109,21 @@ export function useRangeCalendarState(props: UseRangeCalendarProps) {
       }
     }
 
-    const isValid = areAllDaysBetweenValid(start, end, props.allowNonContiguousRanges.value ? () => false : props.isDateUnavailable, props.isDateDisabled, props.isDateHighlightable)
+    // If maximum days is set and the range exceeds it, limit the highlight
+    // We only apply this when we're in the middle of a selection (no end date yet)
+    if (props.maximumDays?.value && !props.end.value && Math.abs(end.compare(start)) > props.maximumDays.value) {
+      // Determine the direction of selection and limit to maximum days
+      const cappedEnd = isStartBeforeFocused
+        ? start.add({ days: props.maximumDays.value })
+        : start.subtract({ days: props.maximumDays.value })
+
+      return {
+        start,
+        end: cappedEnd,
+      }
+    }
+
+    const isValid = areAllDaysBetweenValid(start, end, props.allowNonContiguousRanges.value ? () => false : props.isDateUnavailable, rangeIsDateDisabled, props.isDateHighlightable)
     if (isValid) {
       return {
         start,
@@ -124,5 +154,6 @@ export function useRangeCalendarState(props: UseRangeCalendarProps) {
     isSelectionEnd,
     isHighlightedStart,
     isHighlightedEnd,
+    isDateDisabled: rangeIsDateDisabled,
   }
 }
