Date pickers
A date picker lets people choose a date, a time, or both. The graphical style shows a month calendar; the compact style is a text field with a stepper.
Preview
The calendar is generated by datepickers.js. Click a day to select it, and use the arrows or the dot (today) to navigate.
Anatomy: calendar
The card matches the native fitting size: 138.5px wide and 148px tall, with a 1px hairline ring at 9.8% black on a white background. The header holds the month title, 15px bold at a 2.5px inset, with previous, today, and next controls in secondary gray. The weekday row runs Monday first, 11px at weight 590 secondary, closed by a 1px separator. Day cells sit on an 18px row pitch with 16px pills and 11px numbers; days outside the month drop to tertiary.
Today (when unselected) shows a #DCDCDC rounded cell with the number in the accent color, matching the unfocused-control look of the real picker. The selected day fills with rgb(0, 100, 225) and turns its number white.
| Class | Role |
|---|---|
.p-calendar | The card. datepickers.js builds header, weekdays, and grid. |
data-p-date | Initial selected date (2026-01-09). Defaults to today’s month, nothing selected. |
.p-calendar-day | Generated day button. .p-today, .p-selected, .p-outside states. |
Selection dispatches a bubbling p-change event with detail.date.
Compact style
The field-and-stepper picker is a composition of existing components, matching the system size ladder (28px regular with 13px text, 22px small with 11px, 18px mini with 9px):
<span style="display: inline-flex; gap: 4px; align-items: center;">
<input class="p-field" style="width: 132px;" value="1/9/2026, 9:41 AM" aria-label="Date and time" />
<!-- .p-stepper from forms -->
</span>Dark mode
All colors come from the system’s resolved dynamic colors: the card becomes #1E1E1E, labels rgba(255, 255, 255, 0.847), the hairline 9.8% white, today’s cell 14% white, and the selection deepens to rgb(0, 89, 209). Both .p-dark-mode and .p-auto-dark-mode are supported.
Accessibility
Day cells are real buttons in a role="grid" container and take the standard focus ring. The selected day carries aria-pressed="true".