Date Picker Design Component from Outline: Figma Wireframe Kit

Shipfaster: UI Components

Outline Wireframe: UI Components

Date Picker

Overview

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

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.