InputDateTime KIT
See also
InputDate, InputDateRange, InputMonth, InputMonthRange, 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. Don't set [min] / [max] and [disabledItemHandler] properties for <tui-calendar /> ! Calendar automatically inherits these properties from <input tuiInputDateTime /> and <tui-textfield /> .
[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
# Open this on a mobile device or enable emulation in DevTools and refresh the page to explore this example!
You can use several different approaches to optimize UX on mobile devices when tapping the icon.
IOS devices supports only
HH:MM mode for native picker. Native picker supports only 24-hour format.
Taiga UI