InputDateRange KIT

Examples API GitHub

On this page

See also

InputDate, InputMonth, InputDateTime, InputTime
InputDateRange = Textfield + CalendarRange + ❤️

Basic

DataList

Currently not implemented on mobile devices

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 TuiDayRange . If you prefer to use anything else, like a string you can provide custom transformer in options to store value in different format in form control

Format

Formatting relies on TUI_DATE_FORMAT which you can override using tuiDateFormatProvider helper

Mobile

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

Limits