Date Picker
A 368px panel with one month for a single date, or a 936px range picker with two months, a preset rail and the chosen range spelled out in the footer. Both end in Reset, Cancel and Save.
Add an Orvain Date Picker showing one month, weeks starting Monday: • today ringed, a day three days on selected • three days marked with an event dot • a footer with “Reset”, “Cancel” and “Save”
When to use#
- For dates near today, where seeing the week and weekday helps: bookings, deadlines, schedules.
- For a date range, with both ends picked across two months or from a preset such as Last 30 days.
When not to use
- Use three Inputs for dates far from today, such as a date of birth.
Anatomy#
The month and year in Inter 14/20, between 32px previous and next buttons.
MON to SUN in #cbcbcb, Monday first.
40px squares, radius 8 (round when Pill), seven to a row on a 48px pitch.
Range only: 168×36 presets, 8px apart, down a 200px column.
Reset (tertiary, 40px), Cancel and Save (44px); the range picker adds Range: with both dates.
States#
A plain day, a day with a 3px blue event dot, and today with a 1px blue ring.
The chosen day, or each end of a range, filled #005cf8 with white text.
The days between: blue text on a 10% blue band that runs under the gaps.
The text darkens; the cell turns white.
Days outside the month or the allowed dates, in #cbcbcb.
Round cells and buttons; Shadow swaps the buttons for their skeuomorphic versions.
Source#
Preview – final code pending
The Date Picker is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.
Get notified when the source is publishedGet notified when the source is published
Used in these blocks