Date Picker

Represents a date visually and provide appropriate means for its display in forms and selection from a drop-down or dialog.


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 of date picker
  1. Date field: Indicates the date which lies in that month. Additionally accompanies by an event dot.
  2. Range start/end: Optionally start a selection with several dates in a range.
  3. Selection: Visually shows the dates which lies between the start/end range.

Best Practices

  1. Choose good defaults, such as the current date, end of financial year, end of calendar year, or according to some other schedule.
  2. 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.

Shipfaster UI - Figma Design System
Star IconStar IconStar IconStar IconStar Icon
180+ ratings
Figma's most powerful and comprehensive UI kit and design system. Get instant access to over 6,000 components.