InputDate KIT

On this page

See also

InputDateRange, InputMonth, InputDateTime, InputTime

InputDate = Textfield + Calendar + ❤️

Basic

Choose a date

Calendar customization

Feel free to configure Calendar specific properties: disable adjacent months days, adds circled colored markers to some days, control initial opened month and etc. Explore Calendar documentation page for more customization options.

Don't set [min] / [max] and [disabledItemHandler] properties for <tui-calendar /> !

Calendar automatically inherits these properties from <input tuiInputDate /> and <tui-textfield /> .

Choose a date

Validation

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

Value transformer

By default component works with our internal type called TuiDay . If you prefer to use anything else, like a string or native Date you can provide custom transformer in options to store value in different format in form control

Choose a date

null

Format

Formatting relies on TUI_DATE_FORMAT which you can override using tuiDateFormatProvider helper

Choose a date

Mobile

You can use several different approaches to optimize UX on mobile devices when tapping the icon. Open this on a mobile device or enable emulation in DevTools and refresh the page

Limits

Individual disabled dates still can be typed in manually or picked on mobile in native picker but control will be automatically marked as invalid

Choose a date

Datalist

Native mobile pickers have limited browser support for native datalist

Select date

GitHub StackBlitz