Overview
Date Picker
Represents a date visually and provide appropriate means for its display in forms and selection from a drop-down or dialog.
Overview
A Date Picker lets users select a date or range of dates. It uses a text field and a visual calendar in a popover. They might include a single date or a date range.
When to use
- Used when you have to ask the user for a time or date, or for scheduling tasks.
- When the date to be selected will be within a year of the default date.
Anatomy
- Date field: Indicates the date which lies in that month. Additionally accompanies by an event dot.
- Range start/end:Â Optionally start a selection with several dates in a range.
- Selection: Visually shows the dates which lies between the start/end range.
Best Practices
- Choose good defaults, such as the current date, end of financial year, end of calendar year, or according to some other schedule.
- Clearly show the month and year on the top header added with a way to navigate between months and dates.
Recommended resources
Get instant access to over 6,000 Figma Components with Shipfaster UI. A Figma UI Kit & Design system used by over 2,000 designers.
180+ ratings
Figma's most powerful and comprehensive UI kit and design system. Get instant access to over 6,000 components.
Learn more