Web Interface  |  Inputs

Date & time

This section is about how to properly create date and time inputs and how to use a calendar control.

01Date of birth

One of the principles of a good form is how quickly it can be filled out. If the date of birth field consists of three selects with a choice of day, month, and year, the speed of entry is greatly reduced. The user is forced to scroll through large lists.

It's always faster to type the day and year than choose from lists. For months, there are only 12, it's not a hard list to select. So, for the day and year, text inputs are fine, and for the month you can use select.

Complex input that takes up a lot of the user's time.
The perfect form for entering the date of birth.

A single date field is not the best solution because of formatting issues. The date format may vary from country to country. Unfortunately, a computer can't help either. The date of birth 12.4.1987 cannot be recognized automatically. The number 4 can be both day and month.

The strict format makes input difficult.
The perfect form for entering the date of birth.

02Calendar

The calendar is an awkward control for selecting dates that are not relevant to the current month. Forcing the user to scroll through several months, much less years, in a small calendar is always a bad choice.

Calendar is an inconvenient control, which is difficult to use.
The perfect form for entering the date.

There is a simple rule for the calendar: the date selection should refer to the current month or at most to the previous and next month. For example, when you want to choose a convenient delivery date in the coming week. In that case, the calendar is quite a good solution. Especially if it is immediately visible to the user without additional clicks.

The calendar is hidden, you need to make an extra click on the icon and only then select the date.
The calendar immediately shows the information you need and allows you to make choices.

A calendar is primarily a visualization of data. It is a pattern for showing information in a convenient way: which days are busy or free, which days have tasks, and which have not yet. Use the calendar as a control, especially in forms, with great care.

03Selecting a period

One of the cases where the calendar is suitable as a control is the selection of the date period: from the start to the end date. In such a selection, the visibility of the date display is important and the calendar does the job.

It would be good not to go overboard with redundancy and simplify the period selection form as much as possible.

Calendar icons create noise and don't make sense.
When you click on the date field, a popup calendar is shown immediately. The calendar icon is not needed.

There is another reasonable pattern for period selection: show the dates as a single text plus a calendar icon. In this case, the period looks as a whole and is better readable. When you click, you can show an expanded calendar, for example, with the last three months expanded.

Period as a single line.

It's an interesting solution, but not perfect. The problem is the calendar. It's not easy to choose a start date and end date. Everyone is always confused: have I already selected the end date or am I still selecting the start date?

One field for the start date and one field for the end date is the best solution possible. The interface should be as unambiguous and predictable as possible. Complicated controls that combine a selection of different things are a less efficient solution in advance.

The best solution is a predictable interface.

04Time

You can see a lot of attempts and variations to come up with time controls. This includes choosing the hours and minutes with the select field. These are unusual controls that look like clocks. There are even sliders to select the time.

Too bad. You'll have to go through long lists and miss choices, especially on small screens.
If there is a value, it is hard to change it. It is not always obvious whether hours or minutes have been entered.

The simplest solution is to type the hours and minutes in two different input fields. Just text inputs. This is the fastest and most unambiguous way.

Perfect
Perfect, if am/pm is needed.