Shipfaster: UI Components

Date Picker

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


Breadcrumbs are used when you have a large amount of content organised in hierarchical structure with defined categories (multiple sections that can be divided into more sub-sections). An excellent example is e-commerce site, in which a large variety of products is grouped into logical categories. They inform visitors of their current location in relation to the entire site hierarchy. Whereas they also improve the find-ability of site pages. The structure of the site is more easily understood because it is laid out in a breadcrumb.

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.

All Products

Outline: Figma’s Ultimate Wireframe Kit

Stay on top of testing ideas and prototypes with a wireframe kit that simplifies your process

Pricing Icon
800+ of Downloads
Review Stars
800+ downloads
Learn More
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.