Standardized Design of Electronic Procedures
Home
First steps
First steps
What is DINTEL?
Designers
Developers
Resources
Frequently Asked Questions
Foundations
Foundations
Color
Typography
Box shadow
Spacing
Grid
Border
Border radius
Iconography
Illustrations
Animations
Accessibility
Design tokens
Writing guidelines
Data visualization
Interface elements
Interface elements
Modules
Templates
Components
Updates
Contact
Interface elements
Components
Datepicker
Date Picker
Date selectors help users to select and set a specific date or period.
Uses
Selectors are used to display past, present or future dates or times. The type of date (exact, approximate, memorable) you request from the user will determine which selector is best to use.
How to use
We use the date and time selector when we need the user to be able to decree a specific time or date on a form.
How not to use
We use a placeholder or a wizard 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.
Labels should be clear and descriptive.
Range entries must be correctly labelled with a start and end tag.
Behaviour
Date format pattern
The date format may 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 one digit.
dd - Day of the month, completed with two digits.
m - Month, completed with one digit.
mm - Month, completed with two digits.
aa - Year, completed with two digits.
yyyy - Year, completed with four digits.
Status date picker - Input
Default
Focus
Filled
Success
Error
Disabled
Types of overlay date
Responsive
In its mobile version, the Overlay Date appears as a modal, to improve usability and accessibility on mobile devices.
Mobile
Accessibility
This component has been validated to comply with the accessibility requirements of UNE-EN 301549:2022 which encompasses the criteria of WCAG 2.1 (AA), however, changes to content and styles may affect accessibility compliance. Be sure to review and follow the guidelines in this section when updating or adding new content or styling to this component.
The date picker uses the input-label property for accessible control of the component.
The date picker includes a date entry and a toggle button that opens a calendar picker that is built using the modal component. This opening modal contains a calendar using the component buttons that allow the user to choose a specific date.
The calendar grid provides hotkeys for changing the year and month, as well as support for normal grid navigation keys.
This website uses own and third party cookies to provide a better service. If you continue browsing we consider that you accept its use.
