Date Input

The user needs to pick a date on a form or page.

Problem

The user needs to pick a date on a form or page.

Solution

Picking dates is one of the most common tasks that a user can come across.

Depending on the context, you have a couple of options for letting the user pick a date. You can use a date scroller for almost any date selection.

If the day of week or month is relevant to the user using a calendar can help the user visualize it better. Using the calendar helps mark days that are important to the user.

Use a numpad for picking the date if typing makes more sense. Validate the value that is being entered and only allow the correct format by disabling keys that do not fit the date format.

Always keep localization in mind. The data format should be easily recognizable.

Showing 4 live examples
Scroller
Scroller
Calendar
Note: In this demo the calendar scrolling is horizontal!
Calendar
Numpad
Numpad
Slider
Slider

Problem

The user needs to pick a date on a form or page.

Solution

Picking dates is one of the most common tasks that a user can come across.

Depending on the context, you have a couple of options for letting the user pick a date. You can use a date scroller for almost any date selection.

If the day of week or month is relevant to the user using a calendar can help the user visualize it better. Using the calendar helps mark days that are important to the user.

Use a numpad for picking the date if typing makes more sense. Validate the value that is being entered and only allow the correct format by disabling keys that do not fit the date format.

Always keep localization in mind. The data format should be easily recognizable.

Share in SMS
  • SMS
  • Email