Gallery

Design a date picker that feels precise, fast, and hard to misread. The core view should show a month grid with weekday labels, a clear current-month header, and controls for moving backward and forward through time. Make today, the selected date, and unavailable dates visually distinct without depending on color alone.

Include the interaction states that matter: hover, focus, pressed, disabled, invalid, and cleared. If the component supports keyboard input or manual typing, show how the typed value is validated and how errors are surfaced without wiping the user’s entry. If the date picker opens as a popover, keep the trigger and calendar connected; if it lives inside a form, make the affordance obvious and the layout stable.

Show the component in at least one realistic use case, such as booking, scheduling, or birthdate entry. The design should make it easy to pick a nearby date, jump across months when needed, and confirm the choice with one clear primary action. If there is a cancel or clear action, it should be easy to find and should not compete with selection.