Skip to content
All components

Date Picker

Beta

PatientSlotSchedulePractitionerRoleTimingClinical · Forms

One temporal control with sixteen variants: field, calendar, date and time ranges, birth date, session, slots, recurrence and the read-only record.

16 states3 props103.2 KB installedsince 0.5.0

Design language
Renders the preview in that framework’s own components and tokens. Clinical colours never change.
npx @oxygenui-design/cli add date-picker

First install? Run oxygen init once to say where your @/ alias points. The source is copied into your repository, along with anything it depends on.

Preview

Every state, switchable.

Live · real component

Entry5

Calendar2

Session2

The record3

Contact precautions
MMDDYYYY

Why this state exists

Click into the field and type 08262026. Three bounded segments, one tab stop, and a segment that advances itself the moment no further digit could be valid — typing 9 in the month jumps on, typing 1 waits for a possible 12. That rule is what makes eight keystrokes enough, and it is why there is no calendar here at all: DatePicker is the one with a grid. Count what a clinician touches in a day and the calendar is the rare case; the common case is somebody who already knows the answer.

Gallery

16 variants, one contract — live.