feat(RangeCalendar): fixed start/end dates behaviour (#1819)

epr3 · zernonia · web-flow · commit c15898eb2213 · 2025-05-06T17:38:01.000+08:00
* feat(RangeCalendar): implement fixed start/end date

* chore(RangeCalendar): add test

* chore(RangeCalendar): update docs

---------

Co-authored-by: zernonia &lt;zernonia@gmail.com&gt;
diff --git a/docs/content/meta/DateRangePickerRoot.md b/docs/content/meta/DateRangePickerRoot.md
@@ -54,6 +54,12 @@
     'required': false,
     'default': 'false'
   },
+  {
+    'name': 'fixedDate',
+    'description': '<p>Which part of the range should be fixed</p>\n',
+    'type': '\'start\' | \'end\'',
+    'required': false
+  },
   {
     'name': 'fixedWeeks',
     'description': '<p>Whether or not to always display 6 weeks in the calendar</p>\n',
diff --git a/docs/content/meta/RangeCalendarRoot.md b/docs/content/meta/RangeCalendarRoot.md
@@ -53,6 +53,12 @@
     'required': false,
     'default': 'false'
   },
+  {
+    'name': 'fixedDate',
+    'description': '<p>Which part of the range should be fixed</p>\n',
+    'type': '\'start\' | \'end\'',
+    'required': false
+  },
   {
     'name': 'fixedWeeks',
     'description': '<p>Whether or not to always display 6 weeks in the calendar</p>\n',
diff --git a/packages/core/src/DateRangePicker/DateRangePickerCalendar.vue b/packages/core/src/DateRangePicker/DateRangePickerCalendar.vue
@@ -28,6 +28,7 @@ const rootContext = injectDateRangePickerRootContext()
       minValue: rootContext.minValue.value,
       maxValue: rootContext.maxValue.value,
       dir: rootContext.dir.value,
+      fixedDate: rootContext.fixedDate.value,
     }"
     initial-focus
     :model-value="rootContext.modelValue.value"
diff --git a/packages/core/src/DateRangePicker/DateRangePickerRoot.vue b/packages/core/src/DateRangePicker/DateRangePickerRoot.vue
@@ -43,9 +43,10 @@ type DateRangePickerRootContext = {
   onStartValueChange: (date: DateValue | undefined) => void
   dir: Ref<Direction>
   allowNonContiguousRanges: Ref<boolean>
+  fixedDate: Ref<'start' | 'end' | undefined>
 }
 
-export type DateRangePickerRootProps = DateRangeFieldRootProps & PopoverRootProps & Pick<RangeCalendarRootProps, 'isDateDisabled' | 'pagedNavigation' | 'weekStartsOn' | 'weekdayFormat' | 'fixedWeeks' | 'numberOfMonths' | 'preventDeselect' | 'isDateUnavailable' | 'isDateHighlightable' | 'allowNonContiguousRanges'>
+export type DateRangePickerRootProps = DateRangeFieldRootProps & PopoverRootProps & Pick<RangeCalendarRootProps, 'isDateDisabled' | 'pagedNavigation' | 'weekStartsOn' | 'weekdayFormat' | 'fixedWeeks' | 'numberOfMonths' | 'preventDeselect' | 'isDateUnavailable' | 'isDateHighlightable' | 'allowNonContiguousRanges' | 'fixedDate'>
 
 export type DateRangePickerRootEmits = {
   /** Event handler called whenever the model value changes */
@@ -114,6 +115,7 @@ const {
   hourCycle,
   dir: propsDir,
   allowNonContiguousRanges,
+  fixedDate,
 } = toRefs(props)
 
 const dir = useDirection(propsDir)
@@ -177,6 +179,7 @@ provideDateRangePickerRootContext({
   hourCycle,
   dateFieldRef,
   dir,
+  fixedDate,
   onStartValueChange(date: DateValue | undefined) {
     emits('update:startValue', date)
   },
diff --git a/packages/core/src/RangeCalendar/RangeCalendar.test.ts b/packages/core/src/RangeCalendar/RangeCalendar.test.ts
@@ -426,7 +426,7 @@ describe('rangeCalendar', () => {
     const { getByTestId, user } = setup({
       calendarProps: {
         placeholder: calendarDateRange.start,
-        isDateUnavailable: (date) => {
+        isDateUnavailable: (date: DateValue) => {
           return date.day === 3
         },
       },
@@ -445,7 +445,7 @@ describe('rangeCalendar', () => {
       calendarProps: {
         placeholder: calendarDateRange.start,
         allowNonContiguousRanges: true,
-        isDateUnavailable: (date) => {
+        isDateUnavailable: (date: DateValue) => {
           return date.day === 3
         },
       },
@@ -668,4 +668,50 @@ describe('numberOfMonths > 1', () => {
     await user.keyboard(kbd.ARROW_RIGHT)
     expect(getByTestId('date-1-1-1')).toHaveFocus()
   })
+
+  it('handles fixedDate with start correctly', async () => {
+    const { getByTestId, user } = setup({
+      calendarProps: {
+        defaultValue: calendarDateRange,
+        fixedDate: 'start',
+      },
+    })
+
+    const heading = getByTestId('heading')
+    expect(heading).toHaveTextContent('January 1980')
+
+    const nextDay = getByTestId('date-1-27')
+    await user.click(nextDay)
+
+    expect(getByTestId('date-1-26')).toHaveAttribute('data-selected')
+    expect(getByTestId('date-1-20')).toHaveAttribute('data-selection-start')
+    expect(getByTestId('date-1-27')).toHaveAttribute('data-selection-end')
+
+    await user.click(getByTestId('date-1-26'))
+    expect(getByTestId('date-1-20')).toHaveAttribute('data-selection-start')
+    expect(getByTestId('date-1-26')).toHaveAttribute('data-selection-end')
+  })
+
+  it('handles fixedDate with end correctly', async () => {
+    const { getByTestId, user } = setup({
+      calendarProps: {
+        defaultValue: calendarDateRange,
+        fixedDate: 'end',
+      },
+    })
+
+    const heading = getByTestId('heading')
+    expect(heading).toHaveTextContent('January 1980')
+
+    const nextDay = getByTestId('date-1-27')
+    await user.click(nextDay)
+
+    expect(getByTestId('date-1-26')).toHaveAttribute('data-selected')
+    expect(getByTestId('date-1-20')).toHaveAttribute('data-selection-start')
+    expect(getByTestId('date-1-27')).toHaveAttribute('data-selection-end')
+
+    await user.click(getByTestId('date-1-26'))
+    expect(getByTestId('date-1-26')).toHaveAttribute('data-selection-start')
+    expect(getByTestId('date-1-27')).toHaveAttribute('data-selection-end')
+  })
 })
diff --git a/packages/core/src/RangeCalendar/RangeCalendarCellTrigger.vue b/packages/core/src/RangeCalendar/RangeCalendarCellTrigger.vue
@@ -132,8 +132,26 @@ function changeDate(e: MouseEvent | KeyboardEvent, date: DateValue) {
     rootContext.endValue.value = date.copy()
   }
   else if (rootContext.endValue.value && rootContext.startValue.value) {
-    rootContext.endValue.value = undefined
-    rootContext.startValue.value = date.copy()
+    if (!rootContext.fixedDate.value) {
+      rootContext.endValue.value = undefined
+      rootContext.startValue.value = date.copy()
+    }
+    else if (rootContext.fixedDate.value === 'start') {
+      if (date.compare(rootContext.startValue.value) < 0) {
+        rootContext.startValue.value = date.copy()
+      }
+      else {
+        rootContext.endValue.value = date.copy()
+      }
+    }
+    else if (rootContext.fixedDate.value === 'end') {
+      if (date.compare(rootContext.endValue.value) > 0) {
+        rootContext.endValue.value = date.copy()
+      }
+      else {
+        rootContext.startValue.value = date.copy()
+      }
+    }
   }
 }
 
diff --git a/packages/core/src/RangeCalendar/RangeCalendarRoot.vue b/packages/core/src/RangeCalendar/RangeCalendarRoot.vue
@@ -54,6 +54,7 @@ type RangeCalendarRootContext = {
   isPrevButtonDisabled: (prevPageFunc?: (date: DateValue) => DateValue) => boolean
   formatter: Formatter
   dir: Ref<Direction>
+  fixedDate: Ref<'start' | 'end' | undefined>
 }
 
 export interface RangeCalendarRootProps extends PrimitiveProps {
@@ -105,6 +106,8 @@ export interface RangeCalendarRootProps extends PrimitiveProps {
   nextPage?: (placeholder: DateValue) => DateValue
   /** A function that returns the previous page of the calendar. It receives the current placeholder as an argument inside the component. */
   prevPage?: (placeholder: DateValue) => DateValue
+  /** Which part of the range should be fixed */
+  fixedDate?: 'start' | 'end'
 }
 
 export type RangeCalendarRootEmits = {
@@ -185,6 +188,7 @@ const {
   nextPage: propsNextPage,
   prevPage: propsPrevPage,
   allowNonContiguousRanges,
+  fixedDate,
 } = toRefs(props)
 
 const { primitiveElement, currentElement: parentElement }
@@ -269,6 +273,7 @@ const {
   isDateHighlightable: propsIsDateHighlightable.value,
   focusedValue,
   allowNonContiguousRanges,
+  fixedDate,
 })
 
 watch(modelValue, (_modelValue, _prevValue) => {
@@ -371,6 +376,7 @@ provideRangeCalendarRootContext({
   dir,
   isHighlightedStart,
   isHighlightedEnd,
+  fixedDate,
 })
 
 onMounted(() => {
diff --git a/packages/core/src/RangeCalendar/useRangeCalendar.ts b/packages/core/src/RangeCalendar/useRangeCalendar.ts
@@ -17,6 +17,7 @@ export type UseRangeCalendarProps = {
   isDateHighlightable?: Matcher
   focusedValue: Ref<DateValue | undefined>
   allowNonContiguousRanges: Ref<boolean>
+  fixedDate: Ref<'start' | 'end' | undefined>
 }
 
 export function useRangeCalendarState(props: UseRangeCalendarProps) {
@@ -76,7 +77,7 @@ export function useRangeCalendarState(props: UseRangeCalendarProps) {
   }
 
   const highlightedRange = computed(() => {
-    if (props.start.value && props.end.value)
+    if (props.start.value && props.end.value && !props.fixedDate.value)
       return null
     if (!props.start.value || !props.focusedValue.value)
       return null

Original file line number	Diff line number	Diff line change
`@@ -17,6 +17,7 @@ export type UseRangeCalendarProps = {`
`17`	`17`	`isDateHighlightable?: Matcher`
`18`	`18`	`focusedValue: Ref<DateValue \| undefined>`
`19`	`19`	`allowNonContiguousRanges: Ref<boolean>`
	`20`	`+ fixedDate: Ref<'start' \| 'end' \| undefined>`
`20`	`21`	`}`
`21`	`22`
`22`	`23`	`export function useRangeCalendarState(props: UseRangeCalendarProps) {`
`@@ -76,7 +77,7 @@ export function useRangeCalendarState(props: UseRangeCalendarProps) {`
`76`	`77`	`}`
`77`	`78`
`78`	`79`	`const highlightedRange = computed(() => {`
`79`		`- if (props.start.value && props.end.value)`
	`80`	`+ if (props.start.value && props.end.value && !props.fixedDate.value)`
`80`	`81`	`return null`
`81`	`82`	`if (!props.start.value \|\| !props.focusedValue.value)`
`82`	`83`	`return null`