Helsinki Design System
Helsinki Design System
Getting started
Tutorials
Guidelines
Visual assets
Design tokens
Components
OverviewAccordionButtonCardCheckboxDate inputPrinciplesAccessibilityUsage & variationsDemos & APIDialogDropdownFieldsetFooterIconKorosLoading spinnerLogoNavigationNotificationNumber inputPassword inputPhone inputRadio buttonSearch inputSelection groupStatus labelTabsTagText fieldsTime inputToggle buttonTooltip
Patterns
About
Contributing
Resources

Date input

DraftAccessible

Date input allows the user to easily input a specific date or a date range. By default, HDS date input is supplied with a date picker functionality.

Principles

  • Only use a date input when you can expect the user to input a specific date. If it can be difficult for the user to determine which date they should choose or if the selected date can be vague, let the user choose, for example, a week, month or a date range.
    • When selecting weeks or months, it is usually better to use the dropdown select component.
  • Pay close attention to the date input label. It should clearly describe the date the user is expected to input. A good label describes the input, such as "Arrival date".
  • The date input should be provided with an assistive text which tells the user the expected date format. Avoid relying on a placeholder text alone because it will disappear when the user starts typing. The recommended way to show the expected format is to use the assistive text below the input.
    • As specified in the data format guidelines, Helsinki services will always use D.M.YYYY format. Do not use the English date format even if the user is using English locale.
  • When asking for date ranges, you should use two separate date inputs instead of using one input or picker for both dates.
  • HDS Date picker acts as a modal. This means that clicking outside of the date picker closes it. Closing the picker this way also cancels the selection made in the date picker.

When to use the date picker?

  • Use the date picker (calendar) when it is useful for the user to see how the selected date is related to other dates and/or which weekday it is.
  • Do not use the date picker if the date is easily remembered or is obvious for the user or if the date is further into the past or the future. Date of birth is an example of a situation where the date picker should not be used.

Accessibility

  • HDS date input allows the user to input the date manually without using the date picker. Whenever you require the user to input dates, you should also allow manual input.

Usage & variations

Date input with a picker

Out of the box, HDS date input will include an openable date picker which allows the user to select the date via a calendar view. The date can be also inputted manually, which is the recommended setup for most use cases.

Use format D.M.YYYY

React code example:

<DateInput
helperText="Use format D.M.YYYY"
id="date"
initialMonth={new Date()}
label="Choose a date"
language="en"
onChange={function noRefCheck(){}}
required
/>

Date input without a confirmation

Note! Since this variant closes the date picker immediately after selection, it violates WCAG 3.2.2 On Input guideline. Therefore, this variant should only be used in administration and intranet type of services.

The default HDS date picker requires a confirmation after the date has been selected from the calendar. If your service is mostly desktop or meant for administration, the confirmation can be disabled with disableConfirmation prop to allow more fluid ser experience when selecting multiple dates in a row.

In all other types of services, it is recommended to not disable the confirmation step.

Use format D.M.YYYY

React code example:

<DateInput
disableConfirmation
helperText="Use format D.M.YYYY"
id="date"
initialMonth={new Date()}
label="Choose a date"
language="en"
onChange={function noRefCheck(){}}
required
/>

Date input without a picker

It is possible to disable the date picker functionality by supplying a disableDatePicker prop to the input. To learn when the date picker should be hidden, see when to use date picker above.

Use format D.M.YYYY

React code example:

<DateInput
confirmDate
disableDatePicker
helperText="Use format D.M.YYYY"
id="date"
initialMonth={new Date()}
label="Choose a date"
language="en"
onChange={function noRefCheck(){}}
required
/>

Localised date inputs

To make things easier, HDS provides Finnish, Swedish and English translations for the date picker. Translations include all elements in the picker as well as aria labels for accessibility. You can change the translation by altering language prop.

Use format D.M.YYYY
Käytä muotoa P.K.VVVV
Använd ett format D.M.ÅÅÅÅ

React code example:

<DateInput
helperText="Use format D.M.YYYY"
id="date"
initialMonth={new Date()}
label="Choose a date"
language="en"
onChange={function noRefCheck(){}}
required
/>
<DateInput
helperText="Käytä muotoa P.K.VVVV"
id="date"
initialMonth={new Date()}
label="Valitse päivämäärä"
language="fi"
onChange={function noRefCheck(){}}
required
/>
<DateInput
helperText="Använd ett format D.M.ÅÅÅÅ"
id="date"
initialMonth={new Date()}
label="Välj ett datum"
language="sv"
onChange={function noRefCheck(){}}
required
/>

Demos & API

Core

Not included in hds-core!

React

Date input in hds-react

Date input API