InputMonth KIT

Examples API Setup
Source code
See also
InputDate, InputDateRange, InputMonthRange, InputDateTime, InputTime
InputMonth = Textfield + CalendarMonth + ❤️

Basic

#

Form control value

#

Form control value is TuiMonth 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.

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.

Dropdown customization

#

Selected value customization

#

Use TUI_MONTH_FORMATTER to customize view of selected value inside textfield .

To switch language inside calendar – read documentation page "Internationalization" .

Native picker

#

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

Browser support limitations!
Native picker does not have [disabledItemHandler] feature.
Also, we discourage to use [min] / [max] properties with enabled native picker – it has rather limited browser support.

Range mode

#

Use tuiInputMonthRange to enable possibility to select range of months.

All features described above are applicable for it too. Moreover, it provides two additional features: minLength / maxLength – minimal / maximal length of the selected range.

Form control value is TuiMonthRange or null (for uncompleted range or empty textfield) types.