fix(DateField): allow the maximun day to be 31 when no month (#1940)

kricsleo · web-flow · commit aab69375a19b · 2025-05-26T12:34:48.000+08:00
* fix(UseDateField): allow the maximun day to be `31` when no month

* chore(tests): update tests
diff --git a/packages/core/src/DateField/DateField.test.ts b/packages/core/src/DateField/DateField.test.ts
@@ -220,6 +220,24 @@ describe('dateField', async () => {
     expect(second).toHaveTextContent(cycle('second'))
   })
 
+  it('allow the maximum day to be 31 when no month field', async () => {
+    const { user, day } = setup({
+      dateFieldProps: {
+        /**
+         * Explicitly set the placeholder to avoid using current local time as placeholder.
+         * And use a month (here is April, 30 days) with less than 31 days to ensure the day can be 31
+         * when user input day segment first.
+         */
+        placeholder: new CalendarDate(2025, 4, 30),
+      },
+    })
+
+    await user.click(day)
+    await user.keyboard(kbd.ARROW_UP)
+    await user.keyboard(kbd.ARROW_UP)
+    expect(day).toHaveTextContent('31')
+  })
+
   it('navigates segments using the arrow keys', async () => {
     const { getByTestId, user, day, month, year } = setup({
       dateFieldProps: {
diff --git a/packages/core/src/shared/date/parser.ts b/packages/core/src/shared/date/parser.ts
@@ -103,13 +103,20 @@ function createContentObj(props: CreateContentObjProps) {
     if ('hour' in segmentValues) {
       const value = segmentValues[part]
       if (value !== null) {
-        /**
-         * Edge case for when the month field is filled and the day field snaps to the maximum value of the value of the placeholder month
-         */
-        if (part === 'day' && segmentValues.month !== null) {
-          return formatter.part(props.dateRef.set({ [part as keyof DateFields]: value, month: segmentValues.month }), part, {
-            hourCycle: props.hourCycle === 24 ? 'h23' : undefined,
-          })
+        if (part === 'day') {
+          return formatter.part(props.dateRef.set({
+            [part as keyof DateFields]: value,
+            /**
+             * Edge case for the day field:
+             *
+             * 1. If the month is filled,
+             *   we need to ensure that the day snaps to the maximum value of that month.
+             * 2. If the month is not filled,
+             *   we default to the month with the maximum number of days (here just using January, 31 days),
+             *   so that user can input any possible day.
+             */
+            month: segmentValues.month ?? 1,
+          }), part, { hourCycle: props.hourCycle === 24 ? 'h23' : undefined })
         }
         return formatter.part(props.dateRef.set({ [part]: value }), part, {
           hourCycle: props.hourCycle === 24 ? 'h23' : undefined,
@@ -123,11 +130,13 @@ function createContentObj(props: CreateContentObjProps) {
       if (isDateSegmentPart(part)) {
         const value = segmentValues[part]
         if (value !== null) {
-          if (part === 'day' && segmentValues.month !== null)
-          /**
-           * As described above, same function
-           */
-            return formatter.part(props.dateRef.set({ [part]: value, month: segmentValues.month }), part)
+          if (part === 'day') {
+            return formatter.part(props.dateRef.set({
+              [part]: value,
+              // Same logic as above for the day field
+              month: segmentValues.month ?? 1,
+            }), part)
+          }
 
           return formatter.part(props.dateRef.set({ [part]: value }), part)
         }
diff --git a/packages/core/src/shared/date/useDateField.ts b/packages/core/src/shared/date/useDateField.ts
@@ -322,8 +322,21 @@ export function useDateField(props: UseDateFieldProps) {
     }
 
     const cycleArgs: [keyof DateFields, number] = [part as keyof DateFields, sign]
-    if (part === 'day' && props.segmentValues.value.month !== null)
-      return dateRef.set({ [part as keyof DateValue]: prevValue, month: props.segmentValues.value.month }).cycle(...cycleArgs)[part as keyof Omit<DateFields, 'era'>]
+    if (part === 'day') {
+      return dateRef.set({
+        [part as keyof DateValue]: prevValue,
+        /**
+         * Edge case for the day field:
+         *
+         * 1. If the month is filled,
+         *   we need to ensure that the day snaps to the maximum value of that month.
+         * 2. If the month is not filled,
+         *   we default to the month with the maximum number of days (here just using January, 31 days),
+         *   so that user can input any possible day.
+         */
+        month: props.segmentValues.value.month ?? 1,
+      }).cycle(...cycleArgs)[part as keyof Omit<DateFields, 'era'>]
+    }
 
     return dateRef.set({ [part as keyof DateValue]: prevValue }).cycle(...cycleArgs)[part as keyof Omit<DateFields, 'era'>]
   }
@@ -618,7 +631,9 @@ export function useDateField(props: UseDateFieldProps) {
 
       const daysInMonth = segmentMonthValue
         ? getDaysInMonth(props.placeholder.value.set({ month: segmentMonthValue }))
-        : getDaysInMonth(props.placeholder.value)
+        // if the month is not set, we default to the maximum number of days in a month
+        // so that user can input any possible day
+        : 31
 
       const { value, moveToNext } = updateDayOrMonth(daysInMonth, num, prevValue)
 
