Skip to content

fix(DateField): fixed direct incorrect passing of date values to input element#2549

Merged
zernonia merged 1 commit into
unovue:v2from
rastuhacode:fix/invalid-input-date
Apr 6, 2026
Merged

fix(DateField): fixed direct incorrect passing of date values to input element#2549
zernonia merged 1 commit into
unovue:v2from
rastuhacode:fix/invalid-input-date

Conversation

@rastuhacode

@rastuhacode rastuhacode commented Mar 26, 2026 •
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Contributor

🔗 Linked issue

#2398

❓ 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

Resolves #2398

Problem:

The hidden <input> inside DateFieldRoot (used by both DateField and DatePicker) had three issues that caused browser console warnings and blocked form submission:

  1. type="date" was hardcoded — When granularity is set to hour, minute, or second, the underlying DateValue includes time components. A type="date" input only accepts yyyy-MM-dd, so the browser rejected the value and emitted console warnings. With required, this prevented form submission entirely.
  2. value used raw DateValue.toString() — For CalendarDateTime this produces 2024-01-15T10:30:00, and for ZonedDateTime it includes the timezone (2024-01-15T10:30:00[America/New_York]), neither of which is valid for type="date".
  3. min/max passed DateValue objects directly — HTML attributes expect properly formatted strings.

Changes:

  • Added normalizeInputValue(date, granularity) utility that formats a DateValue into the correct string for the resolved input type:
    • yyyy-MM-dd for type="date"
    • yyyy-MM-ddTHH:mm for type="datetime-local" (hour/minute)
    • yyyy-MM-ddTHH:mm:ss for type="datetime-local" (second)
  • Updated the hidden input in DateFieldRoot.vue to use dynamic :type, and formatted strings for :value, :min, and :max.

📝 Checklist

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

Summary by CodeRabbit

  • Bug Fixes
    • Enhanced date field component to properly handle different date/time input types based on granularity settings.
    • Improved value normalization for date inputs, ensuring correct formatting for different precision levels (day vs datetime).
    • Fixed min/max value bindings to work correctly with normalized input values.

@coderabbitai

coderabbitai Bot commented Mar 26, 2026 •
edited
Loading

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: b27066f8-8489-45d5-9fc1-6e17e79b91ae

📥 Commits

Reviewing files that changed from the base of the PR and between 49d1d32 and 9913f64.

📒 Files selected for processing (3)
  • packages/core/src/DateField/DateFieldRoot.vue
  • packages/core/src/shared/date/types.ts
  • packages/core/src/shared/date/utils.ts
📝 Walkthrough

Walkthrough

The changes add dynamic HTML input type and value normalization to the DateField component based on inferred date-time granularity. A new DateInputType type is defined, utility functions map granularity to input types and normalize date values to appropriate formats, and the component now binds these computed values instead of static attributes.

Changes

Cohort / File(s) Summary
Type Definition
packages/core/src/shared/date/types.ts		 Adds new exported type DateInputType as a union of 'date' and 'datetime-local' for input type specifications.
Utility Functions
packages/core/src/shared/date/utils.ts		 Adds two exported functions: getInputType() maps granularity to appropriate HTML input type, and normalizeInputValue() formats date values as zero-padded strings (YYYY-MM-DD for date inputs, YYYY-MM-DDTHH:MM[[:SS]] for datetime-local inputs).
Component Binding
packages/core/src/DateField/DateFieldRoot.vue		 Replaces static input attributes with dynamic computed bindings: input :type now derives from granularity via inputType, :value uses normalized inputValue, and :min/:max use normalized inputMinValue/inputMaxValue when provided.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 A date picker's form submission woe,
Now fixed with granular, proper flow.
Date types and values, normalized tight,
HTML validation gets it right!
Minutes to seconds, validation's delight. ✨

🚥 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 accurately describes the primary fix: correcting how date values are passed to the input element, matching the core issue of value/type mismatch.
Linked Issues check ✅ Passed The changes fully address issue #2398 by implementing proper value formatting and dynamic input type selection based on granularity.
Out of Scope Changes check ✅ Passed All changes are directly scoped to fixing the date input formatting issue; no unrelated modifications detected.

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

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

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 Mar 26, 2026

Copy link
Copy Markdown

Open in StackBlitz

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

commit: 9913f64

@kadengriffith

kadengriffith commented Mar 26, 2026

Copy link
Copy Markdown

@rastuhacode This should fix the issue I was describing! Support for the datetime-local type looks right to me. Weird mind meld, I was just about to make a PR for this. Thanks for taking this on!

@kadengriffith

kadengriffith commented Mar 26, 2026

Copy link
Copy Markdown

@rastuhacode I've verified your changes do indeed fix the issue. 🚀

@rastuhacode

rastuhacode commented Mar 26, 2026

Copy link
Copy Markdown
Contributor Author

@kadengriffith thank you for verifying and glad I could help!

@zernonia

zernonia commented Apr 6, 2026

Copy link
Copy Markdown
Member

Thanks for the PR @rastuhacode . LGTM!

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

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Bug]: Date Picker prevents form submission

3 participants

@rastuhacode @kadengriffith @zernonia