Skip to content
search icon
clear
Component Status

Date Picker

A date picker is a component that allows users to select a date, or a range of dates.

Guidelines

Date pickers are tied to input fields, and are accessed through focusing on the input field by clicking, or using the tab key. The date picker opens as an overlaying interactive calendar that allows the user to select a date, or a range of dates. If a date is chosen, this is reflected in the input field.

Examples

Date picker

A complete date picker is made by combining all the following date picker components, including an input field. Here is an example that is based on the guidelines from EDS:

FigmaExternal linkFigma design of date picker

Day

FigmaExternal linkFigma design date picker day

Day today

FigmaExternal linkFigma design date picker day today

Period left

When selecting a range, this should be used as the start date.

FigmaExternal linkFigma design date picker with period on the left

Period centre

When selecting a range, this should be used as the middle date(s).

FigmaExternal linkFigma design date picker with centered period

Period right

When selecting a range, this should be used as the end date.

FigmaExternal linkFigma design date picker with period on the right

Period left today

FigmaExternal linkFigma design date picker with period on the left and date today

Period centre today

FigmaExternal linkFigma design date picker centered period and date today

Period right today

FigmaExternal linkFigma design date picker with period on the right and date today
Edit this page on GitHub