feat(DateRangePicker): added maximumDays props (#1971)

Tragio · web-flow · commit c91f57c4ce56 · 2025-06-23T18:35:16.000+03:00
* feat: added `maximumDays` to `DateRangePicker`

* fix: run `docs:gen`
diff --git a/docs/content/meta/DateRangePickerRoot.md b/docs/content/meta/DateRangePickerRoot.md
@@ -116,6 +116,12 @@
     'required': false,
     'default': '\'en\''
   },
+  {
+    'name': 'maximumDays',
+    'description': '<p>The maximum number of days that can be selected in a range</p>\n',
+    'type': 'number',
+    'required': false
+  },
   {
     'name': 'maxValue',
     'description': '<p>The maximum date that can be selected</p>\n',
diff --git a/packages/core/src/DateRangePicker/DateRangePickerCalendar.vue b/packages/core/src/DateRangePicker/DateRangePickerCalendar.vue
@@ -29,6 +29,7 @@ const rootContext = injectDateRangePickerRootContext()
       maxValue: rootContext.maxValue.value,
       dir: rootContext.dir.value,
       fixedDate: rootContext.fixedDate.value,
+      maximumDays: rootContext.maximumDays?.value,
     }"
     initial-focus
     :model-value="rootContext.modelValue.value"
diff --git a/packages/core/src/DateRangePicker/DateRangePickerRoot.vue b/packages/core/src/DateRangePicker/DateRangePickerRoot.vue
@@ -44,9 +44,10 @@ type DateRangePickerRootContext = {
   dir: Ref<Direction>
   allowNonContiguousRanges: Ref<boolean>
   fixedDate: Ref<'start' | 'end' | undefined>
+  maximumDays?: Ref<number | undefined>
 }
 
-export type DateRangePickerRootProps = DateRangeFieldRootProps & PopoverRootProps & Pick<RangeCalendarRootProps, 'isDateDisabled' | 'pagedNavigation' | 'weekStartsOn' | 'weekdayFormat' | 'fixedWeeks' | 'numberOfMonths' | 'preventDeselect' | 'isDateUnavailable' | 'isDateHighlightable' | 'allowNonContiguousRanges' | 'fixedDate'>
+export type DateRangePickerRootProps = DateRangeFieldRootProps & PopoverRootProps & Pick<RangeCalendarRootProps, 'isDateDisabled' | 'pagedNavigation' | 'weekStartsOn' | 'weekdayFormat' | 'fixedWeeks' | 'numberOfMonths' | 'preventDeselect' | 'isDateUnavailable' | 'isDateHighlightable' | 'allowNonContiguousRanges' | 'fixedDate' | 'maximumDays'>
 
 export type DateRangePickerRootEmits = {
   /** Event handler called whenever the model value changes */
@@ -88,6 +89,7 @@ const props = withDefaults(defineProps<DateRangePickerRootProps>(), {
   isDateUnavailable: undefined,
   isDateHighlightable: undefined,
   allowNonContiguousRanges: false,
+  maximumDays: undefined,
 })
 const emits = defineEmits<DateRangePickerRootEmits & PopoverRootEmits>()
 const {
@@ -116,6 +118,7 @@ const {
   dir: propsDir,
   allowNonContiguousRanges,
   fixedDate,
+  maximumDays,
 } = toRefs(props)
 
 const dir = useDirection(propsDir)
@@ -180,6 +183,7 @@ provideDateRangePickerRootContext({
   dateFieldRef,
   dir,
   fixedDate,
+  maximumDays,
   onStartValueChange(date: DateValue | undefined) {
     emits('update:startValue', date)
   },
