Date input

This component is used for entering a date (year, month, and day, with no time). The control opens a date picker or numeric wheels for year, month, day when active in supporting browsers.

The date input component contains both a calendar picker and a basic input field with placeholder suggestion on date format (YYYY/MM/DD) to prompt and restrict users to enter the correct date format.


Component data

Component resources:
SCSS files

Functional grouping: Forms

Demo

Configure: select the dropdowns below to display the variety of options that a date input field supports.


Code


				
			

Responsive preview

Usage best practices

Formatting date entry field is small but fundamental. It requires careful considerations around error handling, cultural context and mobile device behavior in order to enable users to provide accurate information with minal cognitive load.

Consider using date input when:

  • users need to pick a recent date or date range 
  • date is essential information inside a form and requires input accuracy 
  • the users are from diverse cultural background

Usage examples:

  • date of birth
  • transaction date
  • date range for a roundtrip flight 

Related components:

Do

Ensure date input control is large enough for mouse clicking and finger pressing.

Allow users to type the date in numerical form even if other input methods, such as calendar picker and scrolling date picker, are implemented. This is especially important when the date is likely far from the present day, such as ones date of birth. This also ensures the date input is accessible to assistive technology users.

Ensure labels and instructions are clear and easy to understand so that users from different cultural backgrounds can distinguish.

In situations where both date and time input are required, decide the order of the two component based on users' goals and behaviours. For example, when booking an appointment, study shows that a good number of users already have a certain time slot in mind. Therefore it may be better to prioritize time input and use that input as a filter for the next available appointments. For booking a flight, however, it makes more sense to ask for date input first.

Don't

Do not split date inputs with drop-downs for month, day, and year. This adds unnecessary steps and increases interaction cost by adding additional clicks and scrolling.