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 link
🙈Ops! Can't find the image, but you could still try Figma.

Day

FigmaExternal link
🙈Ops! Can't find the image, but you could still try Figma.
Edit this page on GitHub