A read-only text field with a calendar icon that opens the
calendar panel beneath it. One implementation ships, used for
Appt. Date and the two Expiration Date fields on an agency record. The value is always
MM/DD/YYYY.
Closed and open
The field inherits whatever input style surrounds it — on an agency record that
is the 8px-radius form field. Only the icon and the readonly behaviour belong to the picker.
Su
Mo
Tu
We
Th
Fr
Sa
Invalid
A required date that fails validation takes the same treatment as any other form field, with the message below rather than inside the control.
Expiration Date is required.
Specs
| Part | Value |
|---|---|
| Label | 13px / 600 · display:block · margin-bottom 6px |
| Field | padding 9px 12px · radius 8px · 1px #D1D5DB · 13px · outline:none · width 100% |
| Behaviour | readonly with cursor:pointer — the field cannot be typed into |
| Icon | 16×16 lucide calendar · #6B7280 · right 12px, vertically centred · clickable |
| Panel | 280px, opens 8px below at left 0 — see Calendar |
| Value | MM/DD/YYYY, zero-padded |
| Invalid | border-color #DC2626 + box-shadow 0 0 0 1px rgba(220,38,38,.15) |
| Error text | 11px #DC2626 · margin-top 4px · gap 6px with a 12px icon |
| Date Picker and Calendar are one component, not two. This page documents the trigger; the Calendar page documents the panel and its three views. Neither ships without the other. |
| Clicking outside closes the panel and resets it to the day view, so it never reopens on the month or year grid. |
| There is no clear button, no “today” shortcut and no keyboard entry. A date is changed only by opening the panel and picking one. |
Fields elsewhere in the product use a 10px radius; the record editor this control lives in uses 8px. The picker follows its surroundings rather than carrying its own. |