nuxt / nuxt/ui

[UInputDate] Unable to distinguish between empty and incomplete date (no partial value emitted)

Open
#6,244 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

triage
Dominant language
TypeScript
Stars
6.9k
Forks
1.1k
Avg merge
1d 7h
Merged PRs (30d)
57

Description

Environment
Operating system Linux 6.6.87.2-microsoft-standard-WSL2
CPU Intel(R) Core(TM) i7-10610U CPU @ 1.80GHz (4 cores)
Node.js version v24.13.0
nuxt/cli version 3.34.0
Package manager npm@10.9.7
Nuxt version 4.4.2
Nitro version 2.13.2
Builder vite@7.3.1
Config app, compatibilityDate, css, devtools, extends, i18n, modules, runtimeConfig, ssr, ui
Modules @nuxt/eslint@1.15.2, @nuxt/ui@4.6.0, @nuxtjs/i18n@10.2.4
Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.x

Version

v4.4.2

Reproduction

https://play.ui.nuxt.com/#eNptUsFu2zAM/RXCh9oBEmfIgB0CO9jWocBuw7befFFsutEgS4JEp6uD/PsoKU1crIYN2yTfe+QTT9kXa8vjiNk2q3zrpCXwSKMFJfRT3WTkm2zXaDlY4whOcC8U6k64b4IQztA7M0D+WWpCpwVJo4WSE3brjvP5DOdQtCSPuAR/EEqZ55/Yv+KbjBtosln1dKWeTMc0jW6N9gRHoUaEesZRaHx+01Sx+bDZLIHvj4vFDenbAw6CoVNp9n+wpeLUaIC9dHQIsC3AFAIAZTt6MkM1J90VBUsvoN6FFuDuDujFounjX13XkCfSPKRyMgGTg9Qhv4SoFK4BvRdPrJVLzRnZ5cuUOnOnUZuc0L43bngjWCbGIn/8fZ+HqWKtlRaLqQxOF4tyEH+jF7FwwaKAzhnHWv1Io8tZIwJZMag1OkwAv2a2jGRHqi6DJb/45K8GUjjx+nqQ1Q/hSApVJYrd7j9DR91hLzV2SbFap/2KnBXhYFVwNoCqxwceGbZJlLcufTQZh4JsiIQ3B1olvA//VrS4ell9iusJ0FAieZCoOtBiCKBrMwxUYo+KY19DLLp0QSbsd83Dx6U+rgbTxdKoWc5J1hdEtb6JpQlSILXCz+mUDLuh4Xy+JF4dfidfra++ZOd/YxY4Ng==

Description

The UInputDate component only emits a value when all three fields (day, month, year) are fully filled in. If only one or two fields are populated, the component emits no value at all — behaving identically to a completely empty input.

Use case

I have an optional date field with the following validation rules:

✅ No error if the field is completely empty (since it's optional)
❌ Show an "invalid" error if the date is incomplete (e.g., only day and month are filled)
❌ Show a "future" error if the date is after today

Problem

When a user partially fills in the date (e.g., enters a day and a month but leaves the year empty), the component emits undefined / no value — exactly the same as if nothing had been entered at all.

This makes it impossible to differentiate between:

The user hasn't entered anything → no error (optional field)
The user has started entering a date but left it incomplete → should show a validation error
Similarly, if a user fills in all three fields and then clears one of them, the value is completely lost, as if the input was never touched.

Expected behavior

It would be helpful if UInputDate could emit some kind of partial/incomplete state (e.g., a partial object, an "incomplete" flag, or an invalid Date) so that consumers can distinguish between "no input" and "incomplete input" for validation purposes.

Question

Is this behavior (only emitting a value when the date is fully complete) intentional by design? If so, is there a recommended workaround to handle the "incomplete date" validation case?

Additional context

No response

Logs

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the UInputDate implementation and the linked Nuxt UI reproduction, comparing emitted values for empty, partially filled, and cleared fields. Done means the component behavior or an agreed workaround lets consumers distinguish a completely empty optional date from an incomplete date.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.