InputTime KIT

Examples API Setup
Source code
See also
InputDate, InputDateRange, InputMonth, InputMonthRange, InputDateTime
InputTime allows users to enter and edit time values using a keyboard, dropdown or even browser native picker.

Mode

#

InputTime supports all possible time segments: hours, minutes, seconds, and even milliseconds. Property mode allows to choose specific combination of the segments. Explore MaskitoTimeMode type to see all available modes.

12-hour format with AM/PM

#

Any mode ending with AA is 12-hour time format with meridiem part.

Control value:

{
  "hours": 17,
  "minutes": 0,
  "seconds": 0,
  "ms": 0
}

Form control validation

#

Form control value is TuiTime or null (for empty textfield only) types.

Use Validators.required (built-in validator provided by Angular team) with our FieldError pipe to notify your users about required field.

If a field is optional, but unfinished field should be marked as invalid, use tuiUnfinishedValidator directive

Options

#

Textfield customization

#

Use all powers of Textfield : put any number of Icons and Tooltips inside (and control their order and color), modify the size of the textbox and etc. Explore Textfield documentation page for more customization options.

Strict mode

#

Property accept allows to limit the set of allowed values. It is useful when you want to restrict user input to a specific set of time periods, for example, to allow only working hours with equally distant time intervals.

Dropdown with DataList

#

Use tuiItemsHandlersProvider to override the default behavior of all InputTime -s below the current DI scope.

To customize a specific InputTime , use the input properties [identityMatcher] / [stringify] / disabledItemHandler (inherited from Textfield ).

Explore Dropdown and DataList documentation pages for more customization options.

Transformer

#

TuiValueTransformer is a great opportunity to override default form control's value format without breaking component's internal logic.

This example demonstrates how to use string -type instead of default TuiTime .

Control value:

""

Native picker

#

Add type="time" for <input /> to enable built-in browser picker for mobile devices .

Touch clock icon to show the picker. Touch other parts of the textfield to show mobile device keyboard.

Browser support limitations!

IOS devices supports only HH:MM mode.

Native picker supports only 24-hour format.

Native picker with suggestions

#

Link your <input type="time" /> to a <datalist /> by list attribute to show a list of suggestions inside native picker.

The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.

Browser support limitations!

IOS devices does not support <datalist /> for time picker.