Date Pickers
Date Pickers are user interface elements that allow users to select dates intuitively.
- Overview
- Specs
- Guidelines
Component
Date Pickers are user interface components designed to facilitate the selection of dates in an intuitive manner. It presents users with a visual representation of a calendar, enabling them to navigate through months and years to pinpoint the desired date effortlessly.
Additionally, Date Pickers may include features such as date range selection, localization support for different date formats and languages, and accessibility.
Overall, Date Pickers serve as a valuable tool in applications requiring date input, contributing to a more efficient and user-friendly interaction experience.
A: Day Variation
B: Month Variation
C: Year Variation
1: Field
2: Current Month/Year/Decade Indicator
3: Navigator
4: Element
Used for:
Forms
In invoices where there is a possibility to insert a due date, a Date Picker is the suggested component to use;
Data Grid
When filtering data inside a data grid, a date can be set, and, in that case, the suggested component to use is the Date Picker;
Error reduction
By presenting dates in a structured format and preventing invalid inputs, a Date Picker helps reduce errors associated with manual date entry, enhancing data accuracy;
Efficient date selection
A Date Picker simplifies the process of selecting dates by providing a visual calendar interface, making it faster and easier for users to choose dates accurately.
Don’t use for:
Accessibility considerations
If the Date Picker is not implemented with proper accessibility features, such as keyboard navigation or screen reader support, it may pose challenges for users with disabilities or impairments;
Limited date entry
If the input task requires only a single date or a small range of dates, a Date Picker may be excessive and unnecessary, adding unnecessary complexity to the interface;
Excessive complexity
For simple date entry tasks that don’t require visual navigation through a calendar interface, using a Date Picker may introduce unnecessary complexity and cognitive load for users.
Demo
Access the Figma file and inspect the element using Dev Mode.
What’s New?
- Updated typography;
- Updated element styles;
Variation
Elements – Enabled
Enabled
.enabled {
number: var(--grey-8);
}Hover
.hover {
number: var(--grey-8);
background: var(--theme-10);
}Pressed
.pressed {
number: var(--grey-8);
background: var(--theme-20);
}Focus
.focus {
number: var(--grey-8);
background-stroke: var(--grey-8);
}Disabled
.disabled {
number: var(--grey-6);
}Elements – Today
Enabled
.enabled {
number: var(--grey-8);
background-stroke: var(--theme-20);
}Hover
.hover {
number: var(--grey-8);
background: var(--theme-10);
background-stroke: var(--theme-20);
}Disabled
.disabled {
number: var(--grey-6);
background-stroke: var(--theme-20);
}Elements – Range
Range Start
.rangeStart {
number: var(--grey-1);
background: var(--theme-100);
backgroundRange: var(--theme-20);
}Range
.range {
number: var(--theme-100);
backgroundRange: var(--theme-20);
}Range End
.rangeEnd {
number: var(--grey-1);
background: var(--theme-100);
backgroundRange: var(--theme-20);
}Size
Day
.day {
width: 40px;
height: 32px;
border-radius: var(--rounded):
}Month
.month {
width: 64px;
height: 64px;
border-radius: var(--rounded):
}Year
.year {
width: 64px;
height: 64px;
border-radius: var(--rounded):
}Useful links
Consult our Figma file to access our assets and inspect them in dev mode.
This component is or will be provided by the Polygon framework. See its documentation to learn more.
This element is in line with the guidelines of the CDS (Cegid Design System). Find out more.
Behavior
Date Range
In some specific cases, there is a need to filter some data in a specific range (e.g. in a data grid), therefore, a range variation has been created. This range provides the possibility to choose a range between two dates, having a simplified navigation.
Furthermore, in the same variation there are some shortcuts for quickly accessing predefined values, those being:
- Custom
- Today
- This Week
- This Quarter
- This Year
- This Month
Variations
We also have a variation that includes the Time Picker features but this is rarely used and not recommended;
Dos & Dont’s
The Date Picker should allow you to select past and future dates;
When showing the Date Picker without a defined date, the placeholder text should indicate the date format, e.g. DD/MM/YYYY;
The width of the Date Picker can be adjusted to suit the dimensions of the other inputs on the form;
Include the date format in the Label, so the user doesn’t lose this reference when entering the date manually;
Case Studies
Building a new Seamless User Experience
Discover the exciting features
