Date picker

Single date and date-range selection. Aligned with J&J DS v1.2 (Figma 22336:78973). Type ISO dates (YYYY-MM-DD) directly in the field, or open the calendar.

Sizes

Show source

<DatePicker size="md" defaultValue="2026-04-19" />

With Field — error / warning / disabled

Visit date

ISO format YYYY-MM-DD

Visit date

Date is required

Visit date

Outside enrollment window

Visit date

Show source

<Field label="Visit date" status="error" message="Date is required"><DatePicker /></Field>

Date range

Two-input range with shared calendar. Click to set start, click again to set end.

Date range

End must be after start

Show source

<DateRangePicker defaultValue={{ start: "2026-04-01", end: "2026-04-19" }} />