Skip to content

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

Merged
zernonia merged 5 commits into
unovue:v2from
yan-ad:fixing-date-picker-reset-time
Jun 3, 2026
Merged

fix(DatePicker): reset time after clearing value#2636
zernonia merged 5 commits into
unovue:v2from
yan-ad:fixing-date-picker-reset-time

Conversation

@yan-ad

@yan-ad yan-ad commented May 12, 2026

Copy link
Copy Markdown
Contributor

🔗 Linked issue

Closes #2599

❓ Type of change

  • 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • 👌 Enhancement (improving an existing functionality like performance)
  • ✨ New feature (a non-breaking change that adds functionality)
  • 🧹 Chore (updates to the build process or auxiliary tools and libraries)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

DatePickerRoot could preserve a previously selected time after its model value was cleared. When a user selected a new date through the calendar with time granularity enabled, the calendar emitted a value based on the placeholder that still contained the old time.

This resets the time fields to 00:00:00 when selecting a date while the current model value is empty, and adds a regression test covering the clear-then-select flow.

📸 Screenshots (if appropriate)

N/A

📝 Checklist

  • I have linked an issue or discussion.
  • I have updated the documentation accordingly.

Summary by CodeRabbit

  • Bug Fixes
    • DatePicker now normalizes time to 00:00 when selecting a date after clearing the previous selection; zoned values keep their time zone while time components are reset.
  • Tests
    • Added tests verifying time reset for calendar and zoned values after clearing, and that typing preserves user-entered hour/minute values instead of using stale placeholders.

Review Change Stack

@coderabbitai

coderabbitai Bot commented May 12, 2026

Copy link
Copy Markdown
Contributor

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 385503bb-5cfa-47b3-8afe-faad9f45a836

📥 Commits

Reviewing files that changed from the base of the PR and between 9411156 and bfa1983.

📒 Files selected for processing (2)
  • packages/core/src/DatePicker/DatePicker.test.ts
  • packages/core/src/DatePicker/DatePickerRoot.vue

📝 Walkthrough

Walkthrough

DatePickerRoot zeroes time components when initializing a selected date into an empty modelValue via a new resetTime helper. Tests were added and the test helper typing widened to assert emitted onUpdate:modelValue values have hour/minute/second/millisecond reset; the zoned test verifies timeZone is preserved.

Changes

DatePicker time reset on initial selection

Layer / File(s) Summary
Time reset helper and onDateChange initialization
packages/core/src/DatePicker/DatePickerRoot.vue
Adds resetTime(date) that zeroes hour, minute, second, and millisecond for DateValue instances with hour granularity. watch(modelValue, ...) and onDateChange use the normalized date when initializing an empty modelValue.
Tests: emits typing and time-reset assertions
packages/core/src/DatePicker/DatePicker.test.ts
Widens the setup helper emits typing for onUpdate:modelValue to accept DateValue | undefined. Adds tests that rerender with modelValue: undefined, select a date, and assert the last onUpdate:modelValue emission has time fields reset to 0; the zoned test also asserts the emitted value preserves timeZone. Also adds a typing flow test for persisted typed hour/minute when model is cleared.

Sequence Diagram(s)

sequenceDiagram
  participant DatePickerCalendar
  participant DatePickerRoot
  participant Consumer
  DatePickerCalendar->>DatePickerRoot: select(date)
  DatePickerRoot->>DatePickerRoot: resetTime(date) -> normalizedDate
  DatePickerRoot->>Consumer: emit onUpdate:modelValue(normalizedDate)
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I nudge the calendar, zero the chime,
Minutes and seconds sleep at prime,
A zoned sky keeps its name, not time,
New dates bloom fresh, in orderly line,
Hop — a clean day, no old hours to mime.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'fix(DatePicker): reset time after clearing value' directly describes the main change: resetting time fields when the DatePicker value is cleared.
Linked Issues check ✅ Passed The code changes implement the expected behavior from issue #2599: when modelValue is cleared, placeholder time is reset to 00:00:00, and newly selected dates no longer inherit stale time values.
Out of Scope Changes check ✅ Passed All changes in DatePickerRoot.vue and DatePicker.test.ts are directly scoped to fixing the stale time issue described in #2599 with regression tests.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@pkg-pr-new

pkg-pr-new Bot commented May 12, 2026

Copy link
Copy Markdown

Open in StackBlitz

npm i https://pkg.pr.new/reka-ui@2636

commit: bfa1983

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
packages/core/src/DatePicker/DatePicker.test.ts (1)

255-284: ⚖️ Poor tradeoff

Consider expanding test coverage for time reset behavior.

The test correctly validates the core fix (hour and minute reset to 0), but could be more comprehensive:

  1. The resetTime function also resets second, but the test doesn't verify this field.
  2. If millisecond should be reset (pending verification), that should also be tested.
  3. The test only covers CalendarDateTime; consider adding coverage for ZonedDateTime as well.
💡 Example expansion
  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)

Consider a similar test case with ZonedDateTime and granularity: 'second' to ensure time reset works across all time-enabled DateValue types.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/core/src/DatePicker/DatePicker.test.ts` around lines 255 - 284, Test
only asserts hour and minute reset for CalendarDateTime; expand assertions and
add a complementary test for ZonedDateTime. In the existing test (uses
CalendarDateTime, emittedValues, granularity: 'minute'), also assert that second
(and millisecond if intended) are reset to 0 after selection; then add a new
test case using ZonedDateTime with granularity: 'second' to verify resetTime
behavior resets hour, minute, second (and millisecond if applicable) for
ZonedDateTime as well.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/core/src/DatePicker/DatePickerRoot.vue`:
- Around line 143-151: The resetTime function currently clears hour, minute, and
second but omits milliseconds; update the resetTime(DateValue) helper so that
when 'hour' exists it also sets millisecond to 0 (i.e., include millisecond: 0
in the object passed to date.set) to fully normalize CalendarDateTime and
ZonedDateTime instances from `@internationalized/date`; keep the check on 'hour'
and return date unchanged otherwise, and update any type assumptions if
necessary to satisfy the DateValue.set signature.

---

Nitpick comments:
In `@packages/core/src/DatePicker/DatePicker.test.ts`:
- Around line 255-284: Test only asserts hour and minute reset for
CalendarDateTime; expand assertions and add a complementary test for
ZonedDateTime. In the existing test (uses CalendarDateTime, emittedValues,
granularity: 'minute'), also assert that second (and millisecond if intended)
are reset to 0 after selection; then add a new test case using ZonedDateTime
with granularity: 'second' to verify resetTime behavior resets hour, minute,
second (and millisecond if applicable) for ZonedDateTime as well.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 62eaa00d-e74a-49d0-909b-02951142b47e

📥 Commits

Reviewing files that changed from the base of the PR and between edbeb93 and 80e775c.

📒 Files selected for processing (2)
  • packages/core/src/DatePicker/DatePicker.test.ts
  • packages/core/src/DatePicker/DatePickerRoot.vue

Comment thread packages/core/src/DatePicker/DatePickerRoot.vue
yan-ad and others added 2 commits May 12, 2026 21:38
…tePicker/DatePickerRoot.vue

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
@zernonia

zernonia commented May 22, 2026

Copy link
Copy Markdown
Member

Nice catch on the root cause. Two things to address before merging:

1. Regression risk in DatePickerFieldonDateChange is also called from DatePickerField.vue:35. After this change, clearing modelValue and then typing a date+time into the field will silently zero out the user's typed time. Prefer fixing the stale placeholder directly (e.g. reset its time in the watch(modelValue, …) when value becomes undefined) so the calendar emits clean dates and the field path stays untouched. Please also add a test for the type-into-field-after-clear flow.

2. Redundant .copy()date.set(...) already returns a new instance, so resetTime(date).copy() clones twice. Drop the .copy().

@yan-ad

yan-ad commented May 28, 2026

Copy link
Copy Markdown
Contributor Author

Addressed, thanks! Moved the time reset to the stale placeholder path when modelValue is cleared, so typed field input keeps the user’s time. Also removed the redundant .copy() and added a regression test for typing date+time after clearing.

@coderabbitai

coderabbitai Bot commented May 28, 2026

Copy link
Copy Markdown
Contributor

Actionable comments posted: 0

@zernonia zernonia merged commit 9f53dbb into unovue:v2 Jun 3, 2026
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: <DatePickerRoot> overwrites time with the previously selected value

2 participants