Calendar
The calendar component provides a way to render dates for selection or presentation purposes.
We use as a base JQuery UI changing its style with the characteristics of our design system.
<div class="date-inline"></div>
General guidelines
- Ensure that locale is appropriately set so that users see dates and times in a familiar format.
- If helper text is necessary, place helper text above the input (below the area label).
- Use a concise label to indicate what the date and time selections refer to.
1
Month and Year: Indicates the menu where a date may be selected.
2
Controls: Allows the user to navigate through past and future time frames.
3
Days: Shows the available days to select.
4
Selected Option: Indicates the user the option selected.
DO
- Use date and time pickers when you are asking the user for a time or date, or for scheduling tasks.
- Use hover states to preview a user’s selection.
DON'T
- Do not use a complex date picker every time you ask for any date.
- Don't use a calendar picker to prompt for dates in the distant past or future, such as a date of birth.
- Don't use the same style for hover and selected states.