Logo of UI Challenges
Sign in
Wireframe example for Date Picker
An example interpretation of the prompt
Icon of target

Date Picker

Icon of book open

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.

Icon of book open

Incorporate a 'Today' button for quicker navigation to the current date, adding a small convenience that users will appreciate.

Better at UI design with every challenge

Select complexity and generate challenge.

Pick a platform.

You can always choose to receive scheduled challenges. A unique design prompt will be sent to your email daily for the duration you select.

Get design challenge updates in your inbox

New prompts and challenge updates. It’s free.