Skip to main content
Version: Canary 🚧

Change log

Components

Date picker

Overview

TDS provides only the HTML and CSS for a date picker.

When to use

  • Allow users to choose recent or near future dates.
  • Limit date options to a specific range of dates.
  • When it is important for the user to know the day of the week, or the relationship between days. For example: scheduling appointments.

When not to use

When a user needs to input a far distant (e.g. birth date) or a far future (e.g. expiry date of an id card etc), use the date input component instead.

Principles​

Datepicker component combines a text field with a calendar dropdown.

The user can either type a date into the text field or choose a day from the calendar dropdown which will populate the text field with the chosen date.

Date input field​

Default field example​

This example uses the Vanilla JS Datepicker library and custom JS to configure it. You may use any library, but will have to configure and style it yourself.

Help texts​

The input field can use either a placeholder text or a hint text to inform a user about the required date format. We recommend to use hint text for public services and placeholder text for internal services.

Recommended date format for public services is DD.MM.YYYY. For internal services various formats can be used, if needed (for example, YYYY-MM-DD).

Required field indicator and error state​

Calendar Dropdown​

Anatomy​

Default calendar example​

Clicking on the calendar button inside the text field opens the calendar dropdown below the text field. When a user clicks on a date in the calendar, the dropdown disappears and selected date is displayed in the text field.

If the calendar dropdown is opened after selecting a date, the selected date is highlighted in the dropdown.

Disabled dates​

Specific dates or date ranges can be disabled. For example, weekend days, all dates before or after certain days, etc.

Month and year selectors​

Clicking on the month or year in the header of the dropdown opens a month or year selector respectively and currently selected month/year is highlighted. Navigation buttons can be configured to go through months/years or disabled.

When a user clicks on a month or a year, the dropdown returns to calendar view and the selected month/year is displayed.

Date ranges​

Date range input can be accomplished with two datepickers.