Short description

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.

When and how to use it

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.

Variations

The date picker can be equipped with a variety of features, on top of the base component:

Non-selectable dates

Sometimes there is a need to show days which are not selectable, for example a bank holiday which can not be chosen when initiating a cross border payment. The dates which are not selectable should then have a light grey background with a grey number. If the user tries to select a not selectable date, there will be a tooltip telling the user the date is not available.

The last days/first days of the previous month/next month should be light grey boxes with no text. If the user click on one of those days, the datepicker will change to that month.

Quick actions

Quick actions to select dates may be added at the bottom of the picker. These may be used to simplify common choices, such as today, earliest possible date, or payday.

Date range

If a user has to enter a time period, instead of two separate date pickers, use the date range picker. 

Preset range choice

This feature lets users quickly and easily select a set range of dates. It should be used when it is necessary for users to quickly select commonly used range of dates.

When using the range-picker users also get a visual representation of ALL the selected dates, not just the start and end.

Range preset for desktop

Range preset for mobile

Year picker

Note: Not yet available in the Green design system.

On rare occasions we only ask for year. This too can be easier to fill in using a picker.

Month picker

Note: Not yet available in the Green design system.

If we are only looking for a month you may use the month picker.

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.

The dates in the calendar can be presented with a few different styles:

• Normal is used for the regular pickable days.
• Disabled is used for days that may not be picked.
• Selected is used to highlight the selected day.
• Today is used to highlight the current day.
• No date is used for days outside the selected month.

Devices

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

Size variants

Some components are available in two sizes to support different layout needs and use cases:

• Large (default): This is the default size for input fields.
• Small: This size is intended for confined spaces, such as tables, or in situations where optimising screen space is important for professional users.

Note.The small variant is fully supported only in the interim design, which visually aligns more closely with DV23.

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

• Don't use three input fields or three dropdowns to enter a date.
• Avoid using steppers to enter dates, days, months or years.

Review

Result from the latest accessibility review of the component (Angular+React): 2024-07-26

• Contrast: ok
• Colour-blindness: ok
• Code + aria: ok
• Touch + keyboard: ok
• Dark-mode: n/a?
• Reader: ok

• Details: Specification in Figma
• Instruction: How to access Figma