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.