QReg5 Design System

Date and time fields

It is common for the user to need to enter a specific date or time in the registration. For example when a particular visit took place or times when a particular action began and ended.

Live Demo

calendar_today
Modifier/Option
State
Add-on

Available Components

ComponentDescription
DateDate component with calendar function is used to select or type in a date. A registry can set which date format to use, for Swedish the default is YYYY-MM-DD. Possible to add format help to make it easier to enter date and time. An example (which can be tested in the example above) is to have 11 + tab translate to day 11 of the current month.
TimeThe time component is used to enter the time in hours and minutes in the format HH:MM.

## Usage Scenarios

  • Consider the use case to determine whether the date and time components will help in the input situation. If you e.g. must enter date of birth or other dates that may lie far back in time it does not always benefit the user to have to choose via a calendar (that starts on today's date).

  • Date field with calendar function should be used when the user needs to enter a date, e.g. when a particular visit took place.

The user can choose to enter a date from a calendar or type in the date. The calendar starts on today's date.

  • In cases where the registration is linked to a certain visit, it is often appropriate to let the user enter this among the first data in the form so that the sequence will be logical to the person entering or viewing the registration afterwards.

  • Do not require the user to provide time details that are more precise than the registrant has information about (if for example information is only available about day but not time). In these cases, the components can also be supplemented with the option "Unknown".