[Bug]: Date Picker prevents form submission #2398
Description
Environment
Developement/Production OS: macOS Tahoe 26.0
Node version: 24.11.1
Package manager: [email protected]
Reka UI version: 2.7.0
Vue version: 3.5.26
Nuxt version: 4.2.2
Nuxt mode: universal
Nuxt target: server
CSS framework: [email protected]
Client OS: macOS Tahoe 26.0
Browser: Chromium 143.0.7499.194Link to minimal reproduction
https://stackblitz.com/edit/nuxt-starter-dqb1jwqm?file=app%2Fpages%2Findex.vue
Steps to reproduce
Use the code provided in the documentation to create a <DatePicker />.
Create a <form /> surrounding the input with a <button type="submit" /> inside to trigger form submission.
Set granularity="minute" (other granularities have not been fully tested) on the <DatePicker />.
Observe that no matter what value is filled, the native form prevents submission due to the hidden input type="date" and the input.value set to a full ISO. For type="date" to work, the value must be a date of form yyyy-MM-dd. The form sees the ISO, and considers it invalid input.
When using minValue and maxValue, those also must be in the form yyyy-MM-dd to be used by the native hidden input. Currently, they are also in ISO format.
Describe the bug
The Date Picker component uses a hidden HTML input to track some state of the component. When the component is marked required, setting minValue, maxValue, or granularity, the values set on this hidden element are in the wrong format for the browser to know how to handle the data. Console warnings about the incorrect format are present in the browser. And the value set on the hidden input prevents form completion entirely when granularity is set to minute.
Expected behavior
Setting minValue or maxValue should parse to yyyy-MM-dd format for the hidden input and remove the console warning.
Setting granularity to any value present in the documentation should allow for form submission.
Context & Screenshots (if applicable)
