Date & Time Picker

Allows the user to select a single date, a date range, or time.


Use the Date & Time Picker to select a date or a date range from the calendar view or by typing in the date and/or time as indicated by the placeholder text.

Date Picker Example


Use when

  • User needs to choose a single date in a calendar.
  • User needs to choose a date range in a calendar.
  • Asking the user to input a specific time.

Don’t use when

  • User needs to pick multiple date ranges.
  • There are multiple date pickers on the page.
  • It’s easier or more convenient for the user to enter a date.
What's changed
10/11/20221.4.0Added new component.D. Zambrano, E. Gunther