i

Date picker

Entering · researched

A field with a calendar popover for choosing a single date or a date range.

molecule · also called Date input · contains text-input, calendar

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

DatePicker native: partly antd 6.6.5
Variants
outlined, filled, borderless, underlined
Sizes
large, medium, small
States documented
default, disabled, error
Accessibility guidance
no

Picker types date, week, month, quarter, year, plus RangePicker. Docs list status error and warning.

3 corrected on re-read
  • builds_on_native: "unread" → "partly" rc-picker renders <input> (aria-invalid) in a div; calendar panel is divs
  • states_documented: ["default","error"] → ["default","disabled","error"] disabled prop and status error
  • a11y_documented: "unread" → "no" Page read in full; no accessibility section or aria guidance

docs ↗ · code ↗

Carbon

Date picker native: partly @carbon/react 1.117.0
Variants
Simple date input, Calendar picker (single or range), Time picker
Sizes
small (32px), medium (40px), large (48px)
States documented
default, hover, focus, error, disabled
Accessibility guidance
yes

Source wraps text inputs with Flatpickr, not input type=date; the source marks some props deprecated in favour of a preview__DatePicker without Flatpickr.

1 corrected on re-read
  • builds_on_native: "no" → "partly" DatePickerInput renders native <input> with type default 'text' (not type=date); calendar popup is flatpickr

docs ↗ · code ↗

GOV.UK

Date input contested native: partly govuk-frontend 6.5.1
Variants
—
Sizes
—
States documented
default, error
Accessibility guidance
no

Three separate text inputs (day, month, year), built from the input component; no calendar popup. Placed here as the system's only date entry component.

docs ↗ · code ↗

Material Web

absentMaterial Web does not ship this component. Nothing is drawn in its place.

Not in repo root directories (github.com/material-components/material-web), docs/components/ (button, checkbox, chip, dialog, divider, elevation, fab, focus-ring, icon-button, icon, list, menu, progress, radio, ripple, select, slider, switch, tabs, text-field) or labs/. Roadmap lists Date picker and Time picker as unbuilt.

Primer

absentPrimer does not ship this component. Nothing is drawn in its place.

Listed in the docs only under internal-components and marked as intended solely for use within GitHub, not available externally. Not in the public component index or in packages/react/src listing.

Spectrum

Date picker native: partly
shipped, not drawn hereSpectrum documents this component, but it could not be drawn from the package used for the frames. The note below says why.
Variants
—
Sizes
S, M, L, XL
States documented
default, hover, active, focus, disabled, error
Accessibility guidance
no

Documented on spectrum.adobe.com with a React Spectrum data file; no date-picker package exists in the SWC 1st-gen packages directory, and the spectrum-css datepicker component is styles only. Native element use not checked.

1 corrected on re-read
  • builds_on_native: "unread" → "partly" spectrum-css reference markup: div[aria-haspopup=dialog] wrapping TextField inputs plus a PickerButton <button>; styles only, no SWC code

docs ↗ · code ↗

USWDS

Date picker native: partly @uswds/uswds 3.14.0
Variants
—
Sizes
—
States documented
default, disabled
Accessibility guidance
yes

Wraps a text input with a calendar; Date range picker is a separate listed component.

docs ↗ · code ↗

Platform facts

Native elementinput type=dateinput type=date: value is a valid date string yyyy-mm-dd; min, max and step apply (MDN; step is in days, default 1); the spec only says 'if the user agent provides a user interface for selecting a date' it must set a valid value, so the picker is not specified. MDN: the appearance of the picker varies by browser and OS. Constraint validation covers bad input, and out-of-range/step/required-empty. BCD: Chrome 20, Edge 12, Firefox 57, Safari 14.1.
Baseline—
APG patterndialog-modal
ARIA role—
Shipped by5 of 7 systems

Anatomy

  1. Date input — Example's text input, labelled Date; for native use input type=date.
  2. Choose Date button optional — Example's calendar-icon button, aria-label 'Choose Date'; opens the dialog.
  3. dialog optional — The calendar popup; the example is under the Dialog (Modal) pattern.
  4. Previous Year / Previous Month / Next Month / Next Year buttons optional — Example's four icon buttons (aria-labels 'previous year', 'previous month', 'next month', 'next year'); they change the displayed month and year.
  5. date grid optional — The calendar grid of days; APG Grid Pattern.
  6. Cancel and OK buttons optional — Example's footer buttons.

The seven states

default Empty or holding a date; popup closed.
hover Pointer-only CSS state.
focus Input, button and grid cells are each focusable.
active Calendar popup open, or selected date cell.
disabled disabled attribute on the input. Whether a browser picker prevents choosing dates outside min/max is not stated in the spec or MDN pages read (they say out-of-range values fail constraint validation).
error Constraint validation: bad input (UI text not convertible to a date), outside min/max, step mismatch, or required and empty.
loading n/a — Not defined by APG or HTML.

Every cell was read twice, the second time from raw sources by a separate pass. 5 of 35 fields changed on the second read — open any “corrected” note to see what it said before.