InputDate KIT

Examples API Setup

See also

InputDateRange, InputMonth, InputMonthRange, InputDateTime, InputTime

InputDate = Textfield + Calendar + ❤️

Basic

Choose a date

Custom dropdown

You can customize dropdown content and change how particular dates display

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