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 props106.8 KB installedsince 0.5.0

npx @zoblocks/cli add date-picker

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

Design language
Renders the preview in that framework’s own components and tokens. Clinical colours never change.

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.