InputTime
allows users to enter and edit time values using a keyboard, dropdown or even browser native picker. 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. mode
ending with AA
is 12-hour time format with meridiem part. Control value:
{
"hours": 17,
"minutes": 0,
"seconds": 0,
"ms": 0
}
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
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. 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. 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
).
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:
""
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.
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.