TimePicker

Time picker is a component with comboboxes for entering/selecting time.

• The component includes two comboboxes inside the input.
• If the user needs to choose the time in a 12-hour format, then add a button for switching AM/PM. It saves an extra click on the seelct opening.

The first combobox is hours selection, the second one is minutes selection.

Upon focus on the combobox, the list with all the possible variants is opened. Upon focus on this group of controls, at first the input is highlighted.

The dropdown with the list is shifted to the left by 9px in order to put the list items accurately under the combobox figures.

The button switches the am/pm value by click.

When user navigates to a button with Tab, the button gets focus.

• Using the comboboxes inside the time picker, the user may both select the time using the mouse and enter it manually.
• After the first field is completed, the cursor moves to the second field.
• The inputs accept only figures with limitation of two symbols in each combobox.

Comboboxes content may be both exact, up to a minute, and with the preset step.

• In the first case the combobox step equals a minute. The user can set, for example, 13:13.
• In the second case the combobox step can range depending on the required time pre-settings. For example, 00, 15, 30, 45 etc. are rather popular for minutes.

Validation in this component is required in several cases:

• when there is the selection of several time slots and they cannot be set equal;
• when you cannot select time in the past or the future (in this case the time selection also depends on the date selection and validation is common for the whole controls group).

• All the fields related to selection of the date and time get the status invalid.
• The tooltip with the description of the error is shown in the first field, upon that the focus is not placed on the field.
• Validation happens by Submit of the whole form.