fix: don't constrain day

Author: boutahlilsoufiane

packages/@internationalized/date/src/CalendarDate.ts

@@ -102,8 +102,8 @@ export class CalendarDate {
    * Returns a new `CalendarDate` with the given field adjusted by a specified amount.
    * When the resulting value reaches the limits of the field, it wraps around.
    */
-  cycle(field: DateField, amount: number, options?: CycleOptions): CalendarDate {
-    return cycleDate(this, field, amount, options);
+  cycle(field: DateField, amount: number, options?: CycleOptions, ignoreDay?: boolean): CalendarDate {
+    return cycleDate(this, field, amount, options, ignoreDay);
   }
 
   /** Converts the date to a native JavaScript Date object, with the time set to midnight in the given time zone. */
@@ -216,10 +216,10 @@ export class CalendarDateTime {
   /** The millisecond in the second. */
   public readonly millisecond: number;
 
-  constructor(year: number, month: number, day: number, hour?: number, minute?: number, second?: number, millisecond?: number);
-  constructor(era: string, year: number, month: number, day: number, hour?: number, minute?: number, second?: number, millisecond?: number);
-  constructor(calendar: Calendar, year: number, month: number, day: number, hour?: number, minute?: number, second?: number, millisecond?: number);
-  constructor(calendar: Calendar, era: string, year: number, month: number, day: number, hour?: number, minute?: number, second?: number, millisecond?: number);
+  constructor(year: number, month: number, day: number, hour?: number, minute?: number, second?: number, millisecond?: number, ignoreDay?: boolean);
+  constructor(era: string, year: number, month: number, day: number, hour?: number, minute?: number, second?: number, millisecond?: number, ignoreDay?: boolean);
+  constructor(calendar: Calendar, year: number, month: number, day: number, hour?: number, minute?: number, second?: number, millisecond?: number, ignoreDay?: boolean);
+  constructor(calendar: Calendar, era: string, year: number, month: number, day: number, hour?: number, minute?: number, second?: number, millisecond?: number, ignoreDay?: boolean);
   constructor(...args: any[]) {
     let [calendar, era, year, month, day] = shiftArgs(args);
     this.calendar = calendar;
@@ -231,16 +231,17 @@ export class CalendarDateTime {
     this.minute = args.shift() || 0;
     this.second = args.shift() || 0;
     this.millisecond = args.shift() || 0;
+    const ignoreDay = args.shift() || 0;
 
-    constrain(this);
+    constrain(this, ignoreDay);
   }
 
   /** Returns a copy of this date. */
-  copy(): CalendarDateTime {
+  copy(ignoreDay?: boolean): CalendarDateTime {
     if (this.era) {
-      return new CalendarDateTime(this.calendar, this.era, this.year, this.month, this.day, this.hour, this.minute, this.second, this.millisecond);
+      return new CalendarDateTime(this.calendar, this.era, this.year, this.month, this.day, this.hour, this.minute, this.second, this.millisecond, ignoreDay);
     } else {
-      return new CalendarDateTime(this.calendar, this.year, this.month, this.day, this.hour, this.minute, this.second, this.millisecond);
+      return new CalendarDateTime(this.calendar, this.year, this.month, this.day, this.hour, this.minute, this.second, this.millisecond, ignoreDay);
     }
   }
 
@@ -255,8 +256,8 @@ export class CalendarDateTime {
   }
 
   /** Returns a new `CalendarDateTime` with the given fields set to the provided values. Other fields will be constrained accordingly. */
-  set(fields: DateFields & TimeFields): CalendarDateTime {
-    return set(setTime(this, fields), fields);
+  set(fields: DateFields & TimeFields, ignoreDay?: boolean): CalendarDateTime {
+    return set(setTime(this, fields), fields, ignoreDay);
   }
 
   /**

packages/@internationalized/date/src/manipulation.ts

@@ -113,18 +113,22 @@ function balanceDay(date: Mutable<AnyCalendarDate>) {
   }
 }
 
-function constrainMonthDay(date: Mutable<AnyCalendarDate>) {
+function constrainMonthDay(date: Mutable<AnyCalendarDate>, ignoreDay?: boolean) {
   date.month = Math.max(1, Math.min(date.calendar.getMonthsInYear(date), date.month));
-  date.day = Math.max(1, Math.min(date.calendar.getMaxDays(), date.day));
+  if(ignoreDay) {
+    date.day = Math.max(1, Math.min(date.calendar.getMaxDays(), date.day));
+  }else {
+    date.day = Math.max(1, Math.min(date.calendar.getDaysInMonth(date), date.day));
+  }
 }
 
-export function constrain(date: Mutable<AnyCalendarDate>): void {
+export function constrain(date: Mutable<AnyCalendarDate>, ignoreDay?: boolean): void {
   if (date.calendar.constrainDate) {
-    date.calendar.constrainDate(date);
+    date.calendar.constrainDate(date); 
   }
 
   date.year = Math.max(1, Math.min(date.calendar.getYearsInEra(date), date.year));
-  constrainMonthDay(date);
+  constrainMonthDay(date, ignoreDay);
 }
 
 export function invertDuration(duration: DateTimeDuration): DateTimeDuration {
@@ -144,10 +148,10 @@ export function subtract(date: CalendarDate | CalendarDateTime, duration: DateTi
   return add(date, invertDuration(duration));
 }
 
-export function set(date: CalendarDateTime, fields: DateFields): CalendarDateTime;
-export function set(date: CalendarDate, fields: DateFields): CalendarDate;
-export function set(date: CalendarDate | CalendarDateTime, fields: DateFields): Mutable<AnyCalendarDate> {
-  let mutableDate: Mutable<AnyCalendarDate> = date.copy();
+export function set(date: CalendarDateTime, fields: DateFields, ignoreDay?: boolean): CalendarDateTime;
+export function set(date: CalendarDate, fields: DateFields, ignoreDay?: boolean): CalendarDate;
+export function set(date: CalendarDate | CalendarDateTime, fields: DateFields, ignoreDay?: boolean): Mutable<AnyCalendarDate> {
+  let mutableDate: Mutable<AnyCalendarDate> = date.copy(ignoreDay);
 
   if (fields.era != null) {
     mutableDate.era = fields.era;
@@ -165,7 +169,7 @@ export function set(date: CalendarDate | CalendarDateTime, fields: DateFields):
     mutableDate.day = fields.day;
   }
 
-  constrain(mutableDate);
+  constrain(mutableDate, ignoreDay);
   return mutableDate;
 }
 
@@ -243,9 +247,9 @@ export function subtractTime(time: Time, duration: TimeDuration): Time {
   return addTime(time, invertDuration(duration));
 }
 
-export function cycleDate(value: CalendarDateTime, field: DateField, amount: number, options?: CycleOptions): CalendarDateTime;
-export function cycleDate(value: CalendarDate, field: DateField, amount: number, options?: CycleOptions): CalendarDate;
-export function cycleDate(value: CalendarDate | CalendarDateTime, field: DateField, amount: number, options?: CycleOptions): Mutable<CalendarDate | CalendarDateTime> {
+export function cycleDate(value: CalendarDateTime, field: DateField, amount: number, options?: CycleOptions, ignoreDay?: boolean): CalendarDateTime;
+export function cycleDate(value: CalendarDate, field: DateField, amount: number, options?: CycleOptions, ignoreDay?: boolean): CalendarDate;
+export function cycleDate(value: CalendarDate | CalendarDateTime, field: DateField, amount: number, options?: CycleOptions, ignoreDay?: boolean): Mutable<CalendarDate | CalendarDateTime> {
   let mutable: Mutable<CalendarDate | CalendarDateTime> = value.copy();
 
   switch (field) {
@@ -259,7 +263,7 @@ export function cycleDate(value: CalendarDate | CalendarDateTime, field: DateFie
       mutable.era = eras[eraIndex];
 
       // Constrain the year and other fields within the era, so the era doesn't change when we balance below.
-      constrain(mutable);
+      constrain(mutable, ignoreDay);
       break;
     }
     case 'year': {
@@ -284,7 +288,11 @@ export function cycleDate(value: CalendarDate | CalendarDateTime, field: DateFie
       mutable.month = cycleValue(value.month, amount, 1, value.calendar.getMonthsInYear(value), options?.round);
       break;
     case 'day':
-      mutable.day = cycleValue(value.day, amount, 1, value.calendar.getMaxDays(), options?.round);
+      if(ignoreDay) {
+         mutable.day = cycleValue(value.day, amount, 1, value.calendar.getMaxDays(), options?.round);
+      }else {
+        mutable.day = cycleValue(value.day, amount, 1, value.calendar.getDaysInMonth(value), options?.round);
+      }
       break;
     default:
       throw new Error('Unsupported field ' + field);
@@ -294,7 +302,7 @@ export function cycleDate(value: CalendarDate | CalendarDateTime, field: DateFie
     value.calendar.balanceDate(mutable);
   }
 
-  constrain(mutable);
+  constrain(mutable, ignoreDay);
   return mutable;
 }
 

packages/@react-stately/datepicker/src/useDateFieldState.ts

@@ -455,14 +455,14 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
         let isPM = displayValue.hour >= 12;
         let shouldBePM = placeholder.hour >= 12;
         if (isPM && !shouldBePM) {
-          value = displayValue.set({hour: displayValue.hour - 12});
+          value = displayValue.set({hour: displayValue.hour - 12}, true);
         } else if (!isPM && shouldBePM) {
-          value = displayValue.set({hour: displayValue.hour + 12});
+          value = displayValue.set({hour: displayValue.hour + 12}, true);
         }
       } else if (part === 'hour' && 'hour' in displayValue && displayValue.hour >= 12 && validSegments.dayPeriod) {
-        value = displayValue.set({hour: placeholder['hour'] + 12});
+        value = displayValue.set({hour: placeholder['hour'] + 12}, true);
       } else if (part in displayValue) {
-        value = displayValue.set({[part]: placeholder[part]});
+        value = displayValue.set({[part]: placeholder[part]}, true);
       }
       updatePlaceholder(value);
     },
@@ -644,23 +644,23 @@ function addSegment(value: DateValue, part: string, amount: number, options: Int
     case 'year':
     case 'month':
     case 'day':
-      return value.cycle(part, amount, {round: part === 'year'});
+      return value.cycle(part, amount, {round: part === 'year'}, true);
   }
 
   if ('hour' in value) {
     switch (part) {
       case 'dayPeriod': {
         let hours = value.hour;
         let isPM = hours >= 12;
-        return value.set({hour: isPM ? hours - 12 : hours + 12});
+        return value.set({hour: isPM ? hours - 12 : hours + 12}, true);
       }
       case 'hour':
       case 'minute':
       case 'second':
         return value.cycle(part, amount, {
           round: part !== 'hour',
           hourCycle: options.hour12 ? 12 : 24
-        });
+        }, true);
     }
   }
 
@@ -673,7 +673,7 @@ function setSegment(value: DateValue, part: string, segmentValue: number | strin
     case 'month':
     case 'year':
     case 'era':
-      return value.set({[part]: segmentValue});
+      return value.set({[part]: segmentValue}, true);
   }
 
   if ('hour' in value && typeof segmentValue === 'number') {
@@ -685,7 +685,7 @@ function setSegment(value: DateValue, part: string, segmentValue: number | strin
         if (isPM === wasPM) {
           return value;
         }
-        return value.set({hour: wasPM ? hours - 12 : hours + 12});
+        return value.set({hour: wasPM ? hours - 12 : hours + 12}, true);
       }
       case 'hour':
         // In 12 hour time, ensure that AM/PM does not change
@@ -702,7 +702,7 @@ function setSegment(value: DateValue, part: string, segmentValue: number | strin
         // fallthrough
       case 'minute':
       case 'second':
-        return value.set({[part]: segmentValue});
+        return value.set({[part]: segmentValue}, true);
     }
   }