Date picker

Date pickers simplify the task of selecting a date in a visual representation of a calendar.

Guidelines

Date pickers are used when users need to enter a date. The user can enter the date as text, but the date picker also allows the user to select the date in a visual representation of a calendar.

By using a date picker, many errors concerning format and wrong characters can be avoided.

Date picker

Usage

Always use a date picker when the user should enter a complete date. If only a year, a month, a day (or a combination of two options) is needed, use separate input fields. For example a credit card expiry month. Dropdowns could optionally be used if the range of values is limited.

Behaviour

The date picker can be used as Normal or with a few options:

  • Scrollable, where several months are displayed in a vertical view.
  • Extended, with one or two quick options added below the calendar.

Desktop and tablet

On desktop and tablet, the date picker is displayed below the date input field.

Mobile

On mobile, the date picker cover the whole viewport as a takeover. The header part (headline, dropdowns, and day labels) and bottom part (actionable options) are fixed.

Keyboard navigation

The user is able to increase or decrease the date by pressing the up/down arrows on the keyboard:

  • One day at the time when the input field or calendar view is in focus
  • One month at the time when the month dropdown is in focus
  • One year at the time when the year dropdown is in focus

Do's and don'ts

Do

  • Use the same date picker no matter which date format is being used.
  • Format the watermark in the date input field according to the current date format.

Don’t

  • Use three input fields or three dropdowns to enter a date.
  • Use steppers to enter dates, days, months or years.

Specification

Date picker - sizes

States (all view ports)

Date picker - all viewports