fix(DatePicker): reset time after clearing value (#2636)

yan-ad · coderabbitai[bot] · web-flow · commit 9f53dbbc81ee · 2026-06-03T12:21:57.000+08:00
* fix(DatePicker): reset time after clearing value

* docs(DatePicker): document resetTime helper

* fix: add Include millisecond field in time reset packages/core/src/DatePicker/DatePickerRoot.vue

Co-authored-by: coderabbitai[bot] &lt;136622811+coderabbitai[bot]@users.noreply.github.com&gt;

* test(DatePicker): cover ZonedDateTime reset

* fix(DatePicker): reset stale placeholder time

---------

Co-authored-by: coderabbitai[bot] &lt;136622811+coderabbitai[bot]@users.noreply.github.com&gt;
diff --git a/packages/core/src/DatePicker/DatePicker.test.ts b/packages/core/src/DatePicker/DatePicker.test.ts
@@ -26,7 +26,7 @@ function getTimeSegments(getByTestId: (...args: any[]) => HTMLElement) {
   }
 }
 
-function setup(props: { datePickerProps?: DatePickerRootProps, emits?: { 'onUpdate:modelValue'?: (data: DateValue) => void } } = {}) {
+function setup(props: { datePickerProps?: DatePickerRootProps, emits?: { 'onUpdate:modelValue'?: (data: DateValue | undefined) => void } } = {}) {
   const user = userEvent.setup()
   const returned = render(DatePicker, { props })
   const month = returned.getByTestId('month')
@@ -252,6 +252,128 @@ describe('datePicker', async () => {
     expect(calendar.querySelector('[data-selected]')).not.toBeInTheDocument()
   })
 
+  it('resets stale placeholder time when selecting a date after the model value is cleared', async () => {
+    const emittedValues: (DateValue | undefined)[] = []
+    const { user, trigger, getByTestId, rerender } = setup({
+      datePickerProps: {
+        modelValue: calendarDateTime,
+        granularity: 'minute',
+      },
+      emits: {
+        'onUpdate:modelValue': value => emittedValues.push(value),
+      },
+    })
+
+    await rerender({
+      datePickerProps: {
+        modelValue: undefined,
+        granularity: 'minute',
+      },
+      emits: {
+        'onUpdate:modelValue': value => emittedValues.push(value),
+      },
+    })
+
+    await user.click(trigger)
+    await user.click(getByTestId('date-1-1'))
+
+    const selectedValue = emittedValues.at(-1)
+    expect(selectedValue).toBeInstanceOf(CalendarDateTime)
+    expect((selectedValue as CalendarDateTime).hour).toBe(0)
+    expect((selectedValue as CalendarDateTime).minute).toBe(0)
+    expect((selectedValue as CalendarDateTime).second).toBe(0)
+    expect((selectedValue as CalendarDateTime).millisecond).toBe(0)
+  })
+
+  it('resets stale ZonedDateTime placeholder time when selecting a date after the model value is cleared', async () => {
+    const emittedValues: (DateValue | undefined)[] = []
+    const zonedValue = toZoned(new CalendarDateTime(1980, 1, 20, 12, 30, 45, 123), 'America/New_York')
+    const { user, trigger, getByTestId, rerender } = setup({
+      datePickerProps: {
+        modelValue: zonedValue,
+        granularity: 'second',
+      },
+      emits: {
+        'onUpdate:modelValue': value => emittedValues.push(value),
+      },
+    })
+
+    await rerender({
+      datePickerProps: {
+        modelValue: undefined,
+        granularity: 'second',
+      },
+      emits: {
+        'onUpdate:modelValue': value => emittedValues.push(value),
+      },
+    })
+
+    await user.click(trigger)
+    await user.click(getByTestId('date-1-1'))
+
+    const selectedValue = emittedValues.at(-1)
+    expect(selectedValue).toHaveProperty('timeZone', 'America/New_York')
+    expect(selectedValue?.hour).toBe(0)
+    expect(selectedValue?.minute).toBe(0)
+    expect(selectedValue?.second).toBe(0)
+    expect(selectedValue?.millisecond).toBe(0)
+  })
+
+  it('preserves typed time when typing a date after the model value is cleared', async () => {
+    const emittedValues: (DateValue | undefined)[] = []
+    let rerender: ReturnType<typeof setup>['rerender']
+    const handleUpdateModelValue = (value: DateValue | undefined) => {
+      emittedValues.push(value)
+      return rerender({
+        datePickerProps: {
+          modelValue: value,
+          granularity: 'minute',
+        },
+        emits: {
+          'onUpdate:modelValue': handleUpdateModelValue,
+        },
+      })
+    }
+
+    const view = setup({
+      datePickerProps: {
+        modelValue: calendarDateTime,
+        granularity: 'minute',
+      },
+      emits: {
+        'onUpdate:modelValue': handleUpdateModelValue,
+      },
+    })
+    rerender = view.rerender
+
+    await rerender({
+      datePickerProps: {
+        modelValue: undefined,
+        granularity: 'minute',
+      },
+      emits: {
+        'onUpdate:modelValue': handleUpdateModelValue,
+      },
+    })
+
+    await view.user.click(view.month)
+    await view.user.keyboard('{2}')
+    await view.user.click(view.day)
+    await view.user.keyboard('{3}')
+    await view.user.click(view.year)
+    await view.user.keyboard('{2020}')
+    await view.user.click(view.getByTestId('hour'))
+    await view.user.keyboard('{9}')
+    await view.user.click(view.getByTestId('minute'))
+    await view.user.keyboard('{45}')
+
+    expect(view.month).toHaveTextContent('2')
+    expect(view.day).toHaveTextContent('3')
+    expect(view.year).toHaveTextContent('2020')
+    expect(view.getByTestId('hour')).toHaveTextContent('9')
+    expect(view.getByTestId('minute')).toHaveTextContent('45')
+  })
+
   it('should close the picker on select when `closeOnSelect` is true', async () => {
     const { user, trigger, getByTestId } = setup({
       datePickerProps: {
diff --git a/packages/core/src/DatePicker/DatePickerRoot.vue b/packages/core/src/DatePicker/DatePickerRoot.vue
@@ -140,10 +140,23 @@ const open = useVModel(props, 'open', emits, {
 
 const dateFieldRef = ref<InstanceType<typeof DateFieldRoot> | undefined>()
 
+/**
+ * Reset time fields on DateValue instances that support time granularity.
+ */
+function resetTime(date: DateValue) {
+  if (!('hour' in date))
+    return date
+
+  return date.set({ hour: 0, minute: 0, second: 0, millisecond: 0 })
+}
+
 watch(modelValue, (value) => {
   if (value && value.compare(placeholder.value) !== 0) {
     placeholder.value = value.copy()
   }
+  else if (!value && 'hour' in placeholder.value) {
+    placeholder.value = resetTime(placeholder.value)
+  }
   if (closeOnSelect.value) {
     open.value = false
   }
@@ -178,8 +191,11 @@ provideDatePickerRootContext({
   dir,
   step,
   onDateChange(date: DateValue | undefined) {
-    if (!date || !modelValue.value) {
-      modelValue.value = date?.copy() ?? undefined
+    if (!date) {
+      modelValue.value = undefined
+    }
+    else if (!modelValue.value) {
+      modelValue.value = date.copy()
     }
     else if (!preventDeselect.value && date && modelValue.value.compare(date) === 0) {
       modelValue.value = undefined
