fix(MonthPicker, YearPicker): preserve day/month when selecting (#2594)

* fix(MonthPicker, YearPicker): preserve day/month when selecting month or year

MonthPicker was resetting the day to 1 and YearPicker was resetting both
month and day to 1 when a new value was selected, because grid cells are
constructed with startOfMonth/startOfYear. Now the selected month/year is
applied to the existing modelValue or placeholder, preserving other segments.

Closes #2587, closes #2588

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix: preserve era when paging across BC/AD boundaries

Use the selected value as the base (preserving its era) and copy
month/day from the reference, instead of the other way around.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: zernonia

packages/core/src/MonthPicker/MonthPickerRoot.vue

@@ -205,23 +205,29 @@ watch(modelValue, (_modelValue) => {
   }
 })
 
+function resolveMonthValue(value: DateValue, reference?: DateValue) {
+  if (!reference)
+    return value.copy()
+  return value.copy().set({ day: reference.day })
+}
+
 function onMonthChange(value: DateValue) {
   if (!multiple.value) {
     if (!modelValue.value) {
-      modelValue.value = value.copy()
+      modelValue.value = resolveMonthValue(value, placeholder.value)
       return
     }
 
     if (!preventDeselect.value && isSameYearMonth(modelValue.value as DateValue, value)) {
-      placeholder.value = value.copy()
+      placeholder.value = resolveMonthValue(value, modelValue.value as DateValue)
       modelValue.value = undefined
     }
     else {
-      modelValue.value = value.copy()
+      modelValue.value = resolveMonthValue(value, modelValue.value as DateValue)
     }
   }
   else if (!modelValue.value) {
-    modelValue.value = [value.copy()]
+    modelValue.value = [resolveMonthValue(value, placeholder.value)]
   }
   else {
     const modelValueArray = Array.isArray(modelValue.value)
@@ -230,12 +236,12 @@ function onMonthChange(value: DateValue) {
 
     const index = modelValueArray.findIndex(date => isSameYearMonth(date, value))
     if (index === -1) {
-      modelValue.value = [...modelValueArray, value.copy()]
+      modelValue.value = [...modelValueArray, resolveMonthValue(value, placeholder.value)]
     }
     else if (!preventDeselect.value) {
       const next = modelValueArray.filter(date => !isSameYearMonth(date, value))
       if (!next.length) {
-        placeholder.value = value.copy()
+        placeholder.value = resolveMonthValue(value, modelValueArray[index])
         modelValue.value = undefined
         return
       }

packages/core/src/MonthPicker/useMonthPicker.ts

@@ -134,13 +134,13 @@ export function useMonthPicker(props: UseMonthPickerProps) {
     if (nextPageFunc || props.nextPage.value) {
       const newDate = (nextPageFunc || props.nextPage.value)!(currentDate)
       grid.value = createMonthGrid({ dateObj: newDate })
-      props.placeholder.value = newDate.set({ day: 1 })
+      props.placeholder.value = newDate.set({ month: props.placeholder.value.month, day: props.placeholder.value.day })
       return
     }
 
     const newDate = currentDate.add({ years: 1 })
     grid.value = createMonthGrid({ dateObj: newDate })
-    props.placeholder.value = newDate.set({ day: 1 })
+    props.placeholder.value = newDate.set({ month: props.placeholder.value.month, day: props.placeholder.value.day })
   }
 
   const prevPage = (prevPageFunc?: (date: DateValue) => DateValue) => {
@@ -149,13 +149,13 @@ export function useMonthPicker(props: UseMonthPickerProps) {
     if (prevPageFunc || props.prevPage.value) {
       const newDate = (prevPageFunc || props.prevPage.value)!(currentDate)
       grid.value = createMonthGrid({ dateObj: newDate })
-      props.placeholder.value = newDate.set({ day: 1 })
+      props.placeholder.value = newDate.set({ month: props.placeholder.value.month, day: props.placeholder.value.day })
       return
     }
 
     const newDate = currentDate.subtract({ years: 1 })
     grid.value = createMonthGrid({ dateObj: newDate })
-    props.placeholder.value = newDate.set({ day: 1 })
+    props.placeholder.value = newDate.set({ month: props.placeholder.value.month, day: props.placeholder.value.day })
   }
 
   watch(props.placeholder, (value) => {

packages/core/src/YearPicker/YearPickerRoot.vue

@@ -211,33 +211,39 @@ watch(modelValue, (_modelValue) => {
   }
 })
 
+function resolveYearValue(value: DateValue, reference?: DateValue) {
+  if (!reference)
+    return value.copy()
+  return value.copy().set({ month: reference.month, day: reference.day })
+}
+
 function onYearChange(value: DateValue) {
   if (!multiple.value) {
     if (!modelValue.value) {
-      modelValue.value = value.copy()
+      modelValue.value = resolveYearValue(value, placeholder.value)
       return
     }
 
     if (!preventDeselect.value && isSameYear(modelValue.value as DateValue, value)) {
-      placeholder.value = value.copy()
+      placeholder.value = resolveYearValue(value, modelValue.value as DateValue)
       modelValue.value = undefined
     }
     else {
-      modelValue.value = value.copy()
+      modelValue.value = resolveYearValue(value, modelValue.value as DateValue)
     }
   }
   else if (!modelValue.value) {
-    modelValue.value = [value.copy()]
+    modelValue.value = [resolveYearValue(value, placeholder.value)]
   }
   else if (Array.isArray(modelValue.value)) {
     const index = modelValue.value.findIndex(date => isSameYear(date, value))
     if (index === -1) {
-      modelValue.value = [...modelValue.value, value.copy()]
+      modelValue.value = [...modelValue.value, resolveYearValue(value, placeholder.value)]
     }
     else if (!preventDeselect.value) {
       const next = modelValue.value.filter(date => !isSameYear(date, value))
       if (!next.length) {
-        placeholder.value = value.copy()
+        placeholder.value = resolveYearValue(value, modelValue.value[index])
         modelValue.value = undefined
         return
       }

packages/core/src/YearPicker/useYearPicker.ts

@@ -138,13 +138,13 @@ export function useYearPicker(props: UseYearPickerProps) {
     if (nextPageFunc || props.nextPage.value) {
       const newDate = (nextPageFunc || props.nextPage.value)!(firstYearInGrid)
       grid.value = createYearGrid({ dateObj: newDate, yearsPerPage: props.yearsPerPage.value, decadeAligned: false })
-      props.placeholder.value = newDate.set({ month: 1, day: 1 })
+      props.placeholder.value = newDate.set({ month: props.placeholder.value.month, day: props.placeholder.value.day })
       return
     }
 
     const newDate = firstYearInGrid.add({ years: props.yearsPerPage.value })
     grid.value = createYearGrid({ dateObj: newDate, yearsPerPage: props.yearsPerPage.value, decadeAligned: false })
-    props.placeholder.value = newDate.set({ month: 1, day: 1 })
+    props.placeholder.value = newDate.set({ month: props.placeholder.value.month, day: props.placeholder.value.day })
   }
 
   const prevPage = (prevPageFunc?: (date: DateValue) => DateValue) => {
@@ -153,13 +153,13 @@ export function useYearPicker(props: UseYearPickerProps) {
     if (prevPageFunc || props.prevPage.value) {
       const newDate = (prevPageFunc || props.prevPage.value)!(firstYearInGrid)
       grid.value = createYearGrid({ dateObj: newDate, yearsPerPage: props.yearsPerPage.value, decadeAligned: false })
-      props.placeholder.value = newDate.set({ month: 1, day: 1 })
+      props.placeholder.value = newDate.set({ month: props.placeholder.value.month, day: props.placeholder.value.day })
       return
     }
 
     const newDate = firstYearInGrid.subtract({ years: props.yearsPerPage.value })
     grid.value = createYearGrid({ dateObj: newDate, yearsPerPage: props.yearsPerPage.value, decadeAligned: false })
-    props.placeholder.value = newDate.set({ month: 1, day: 1 })
+    props.placeholder.value = newDate.set({ month: props.placeholder.value.month, day: props.placeholder.value.day })
   }
 
   watch(props.placeholder, (value) => {