InputDateTime KIT
On this page
See also
InputDate, InputDateRange, InputMonth, InputTimeInputDateTime = Textfield + Calendar + ❤️ Basic
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.
[min] / [max] and [disabledItemHandler] properties for <tui-calendar /> ! Calendar automatically inherits these properties from <input tuiInputDateTime /> and <tui-textfield /> . Custom dropdown
You can customize dropdown content and even extend its template
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 types called TuiDay and TuiTime . 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
"2024-08-09T12:17:00.000Z"
Date format
Formatting relies on TUI_DATE_FORMAT which you can override using tuiDateFormatProvider helper
Mobile
You can use several different approaches to optimize UX on mobile devices when tapping the icon.
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
Datalist
Native mobile pickers have limited browser support for native datalist
Taiga UI