Enter a date in the numeric order of your locale. DateField keeps partial edits visible and stores a date-only ISO value; DatePicker adds choosing from a calendar.
The same ISO date formats in locale order. Blur or Enter commits a complete available date; partial, impossible and weekend entry blocks submission.
| Example | State | Meaning |
|---|---|---|
|
|
Small | Uses size.interactive.sm and button-sm. |
|
|
Partial / invalid | Draft remains editable; error is associated with the input. |
|
|
Readonly | Native selection and copying remain available. |
|
|
Large / disabled | Value retained; no focus, editing or submission. |
| Verdict | Rule |
|---|---|
| Do | Give date entry a visible associated label; associate optional instructions and visible validation feedback through aria-describedby. DatePicker omits the format helper; never use placeholder as its label. |
| Do | Store only ISO YYYY-MM-DD or null; format and parse numeric Gregorian dates in the supplied locale, including localized digits and a four-digit year. |
| Do | Keep the editable draft distinct from the committed value. Blur or Enter commits only a complete, real, available date; clearing commits null. |
| Do | Keep partial, impossible and unavailable entry visible with associated validation feedback. Block native form submission and suppress stale hidden values until the draft is committed. |
| Do | Required validates the date, not the presence of text. Inclusive min/max and the same availability predicate govern typing and calendar activation. |
| Do | Preserve native text editing, paste, selection and IME composition. Escape restores the formatted committed value; Enter during composition never commits. |
| Do | Keep readonly focusable for selection and copying; disable editing and disclosure while retaining the value. Disabled removes native input and disclosure from focus and submission. |
| Do | Keep the text-entry focus exception: an engaged border plus a transparent forced-colors outline; independent sibling actions receive their own ring. |
| Don’t | Do not guess ambiguous date order, normalize impossible dates or accept two-digit years. The host chooses format guidance and validation wording. |
| Don’t | Do not include a time, range or timezone in a single-date value. |