Date picker Design system

Helps select dates without confusing the format or time period.

8 checks · 3 content groups

Checklist contents

Review progress

Structure and meaning

Compare information and presentation in context of use.

Specify the date formatDisplays labels, examples, and date writing in the current language.Don't force people who know the exact date to click through many months.Example “Start date — dd/mm/yyyy”, for direct input November 15, 2026.Keep a calendar that's easy to navigateIndicates month, year, day name and labeled month switches.Keep the month and year titles clear, and respond after changing the month; The selected date and today's date must have different signals.Supports direct importAllows you to type the date and report the wrong format without accidentally changing the date.Allows direct input when selecting a very distant date; Format error needs to say day/month/year order and keep the value for the user to correct.Explanation date cannot be selectedDistinguish today, selected date and blocked date with reason if needed.Explain why the date cannot be selected, especially if due to a tight or limited schedule; Don't just reduce the boldness of the number.

Interaction and usability

Try the operation, change the status and continue working.

Clarify the two ends of the date rangeIf appropriateIf you select a range, state the start and end dates and handle when entering backwards.Keep both the first and last days when repairing one side; report an invalid range without silently inverting the two values.Control calendar with keyboardFor mid-day moves, select and close calendars according to the behavior explained.State the time zone when the time is availableIf appropriateIf you set a schedule with a time, display the time zone and keep the date and time selection consistent.Displays the time zone and date change rules if a time past midnight is selected; 12/24 hour format must be consistent with user selection.

Complete the experience

Check for details that are easy to miss when putting the design into use.

Provide a way to return to todayWhen browsing across several months, provide a way to return to the current month or day without repeatedly navigating backward.Distinguish the action that only advances the calendar to today from the action that selects today; If you are not allowed to choose today, still explain the rule.

Progress is saved automatically in this browser.

GUIDANCE

How to review

Specify the date format

Don't force people who know the exact date to click through many months.

EXAMPLES

Usage examples

Specify the date format

“Start date — dd/mm/yyyy”, for direct input November 15, 2026.

Date picker Design system

Structure and meaning

Interaction and usability

Complete the experience

How to review

Specify the date format

Usage examples

Specify the date format

Find a checklist

No checklists found