Date and time inputs

Date and time overview

There are a variety of components designed to support any of the date and time inputs your application may need. Date Time inputs are intended for use when a user needs to enter a specific date or time. Date pickers provide a calendar to the user that they can navigate through to find the date they are looking for. All of these components are designed to be flexible within whatever locale they are used in.


Variations

  • Date input - The Date Input component is great for allowing a user to enter a specific date via the text field that is protected by a mask to ensure the date format is correct. This component is also capable of opening a calendar for the user to select a date without typing it inDate input example
  • Time input - The Time input provides a text field where users may enter the time following the format specified. By default, the user is expected to enter hours and minutes, but may be required to enter seconds as well. The en-US locale also provides the user with a dropdown to select AM or PMTime input example
  • Date Time input - Date and time merged into a single field. Not recommended as it overloads to many concepts into a very small space. For legacy support onlyDate time input example
  • Month input - The Month input provides dropdowns to allow a user to select a month and year. This component supports locale to control the language of the month displayed, but the locale does not affect the format of the input

Last updated: Oct 2020