Date and Time pickers let users select a date and time for a form.
Note: These components are meant to cover desktop browser needs. The OS native component must be used on mobile devices.
This page describes the date and time patterns separately and then describes a pattern that combines the two functionalities:
The default state displays the day's number, indicating that the user can select it.
When the user hovers an enabled day, a light grey circle is displayed behind it.
A selected day is highlighted by a blue circle.
A disabled day is greyed out, indicating that the user can not select it.
Date picker layout and dimensions:
Lexicon provides a recommended area for extension points that is placed right at the end of the calendar panel. If, however, you would like to provide a double calendar, we recommend that you place the calendars side by side, rather than stack them vertically.
The time picker lets a user select a time from a range of hours and minutes.
You can specify the time zone in the text label on the right side of the time picker.
The time picker is a common extension point when building a date picker, as it combines two related functionalities in the same component.