fix: properly clamp the date with segments

formwerkjs · Feb 16, 2025 · 356ccae · 356ccae
1 parent cc569ca
commit 356ccae
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 9 deletions.
diff --git a/packages/core/src/useCalendar/useCalendarView.ts b/packages/core/src/useCalendar/useCalendarView.ts
@@ -4,7 +4,7 @@ import { useDateFormatter } from '../i18n';
 import { Reactivify } from '../types';
 import { normalizeProps } from '../utils/common';
 import { YEAR_CELLS_COUNT } from './constants';
-import { now, toCalendar } from '@internationalized/date';
+import { now, toCalendar, toCalendarDate } from '@internationalized/date';
 
 export interface CalendarWeeksView {
   type: 'weeks';
@@ -113,6 +113,10 @@ function useCalendarDaysView(
     const minDate = getMinDate();
     const maxDate = getMaxDate();
 
+    const rightNowDate = toCalendarDate(rightNow);
+    const focusedDate = toCalendarDate(focused);
+    const currentDate = toCalendarDate(current);
+
     return Array.from({ length: gridDays }, (_, i) => {
       const dayOfMonth = firstDay.add({ days: i });
       let disabled = false;
@@ -125,14 +129,16 @@ function useCalendarDaysView(
         disabled = true;
       }
 
+      const domDate = toCalendarDate(dayOfMonth);
+
       return {
         value: dayOfMonth,
         label: String(dayOfMonth.day),
         dayOfMonth: dayOfMonth.day,
-        isToday: dayOfMonth.compare(rightNow) === 0,
-        selected: current.compare(dayOfMonth) === 0,
-        isOutsideMonth: dayOfMonth.month !== focused.month,
-        focused: focused.compare(dayOfMonth) === 0,
+        isToday: rightNowDate.compare(domDate) === 0,
+        selected: currentDate.compare(domDate) === 0,
+        isOutsideMonth: domDate.month !== focusedDate.month,
+        focused: focusedDate.compare(domDate) === 0,
         disabled,
         type: 'day',
       } as CalendarDayCell;

diff --git a/packages/core/src/useDateTimeField/useDateTimeSegmentGroup.ts b/packages/core/src/useDateTimeField/useDateTimeSegmentGroup.ts
@@ -331,11 +331,11 @@ function useDateArithmetic({ currentDate, min, max }: ArithmeticInit) {
     const maxDate = toValue(max);
 
     if (minDate && date.compare(minDate) < 0) {
-      return minDate;
+      return toValue(currentDate);
     }
 
     if (maxDate && date.compare(maxDate) > 0) {
-      return maxDate;
+      return toValue(currentDate);
     }
 
     return date;

diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
@@ -3,8 +3,8 @@ import DateField from '@/components/DateField.vue';
 import Calendar from './components/Calendar.vue';
 // import { createCalendar } from '@internationalized/date';
 
-const minDate = new Date('2025-02-14');
-const maxDate = new Date('2025-02-18');
+const minDate = new Date(2025, 1, 14, 0, 0, 0, 0);
+const maxDate = new Date(2025, 1, 18, 0, 0, 0, 0);
 </script>
 
 <template>