Date selector

Components

Date selector

Date selectors help users select and set a specific date or period.

Preview

Figma

Uses

We use selectors to display past, present or future dates or times. The type of date (exact, approximate, memorable) requested by the user will determine which selector is best to use.

When to use

We use the date pickers and hours when we need the user to be able to decree the specific time or date on a form.

When not to use

We use a placeholder or an assistant to show how the entry should be formatted. For example, "6/12/2020" represents different dates for Americans and Europeans.

Both date and time selectors must be accompanied by labels.

The labels must be clear and descriptive.

Range entries must be correctly labeled with a start and end label.

Behaviour

Pattern of the date format

The format of the date can be displayed differently depending on your location. For example, some countries use month/day/year while others use day/month/year.

d - Day of the month, completed with a digit.

dd - Day of the month, completed with two digits.

m - Month, completed with a digit.

mm - Month, completed with two digits.

aa - Year, completed with two digits.

aaaa - Year, completed with four digits.

Status date picker - Input

Default

Focus

Filled

Display of the date selector component in a satisfactory state

Success

Error

Disabled

Types of overlay date

Month

Year

Display of the overflow panel component for days

Date

Responsive

In its mobile version, the Overlay Dates appear as a modal, to improve usability and accessibility in this type of device.

Mobile

Accessibility

This component has been validated to meet the accessibility requirements of UNE-EN 301549:2022, which includes the criteria of WCAG 2.1 (AA), however, changes in content and styles can affect accessibility compliance. We must make sure to review and follow the guidelines in this section when you update or add new content or style to this component.

The date picker uses the input-label property for an accessible control of the component.

The date picker includes a date entry and a toggle button that opens a calendar selector that is built using the modal component. This opening mode contains a calendar that uses the button components that allow the user to choose a specific date.

The calendar grid provides quick access keys to change the year and month, as well as support for normal grid navigation keys.