InputTime KIT
On this page
See also
InputDate, InputDateRange, InputMonth, InputDateTimeInputTime 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
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
null when empty If a field is optional, but unfinished field should be marked as invalid, use tuiUnfinishedValidator directive
Options
Textfield customization
Textfield : put any number of Icons and Tooltips inside (and control their order and color), modify the size of the textbox and etc. Explore Input documentation page for more customization options. Strict mode
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
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 ).
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.
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.
IOS devices does not support <datalist /> for time picker.
Taiga UI