InputDateRangeLegacy deprecated LEGACY

Examples API Setup
Source code
This version of the component is deprecated and will be removed in the next major version. Use new version of InputDateRange instead!

InputDate is a field to input a range of dates.

Date formatting can be customized with TUI_DATE_FORMAT token.

See an example with the usage of these tokens.

DI-tokens for input-configurations:

TUI_DATE_RANGE_VALUE_TRANSFORMER
custom format of control output ( TuiDayRange is default).

See an example of how to provide transformers for InputDate and InputDateRange to work with native Date objects.

Basic

#
If you need to set some attributes or listen to events on native input , you can put it inside with Textfield directive as shown below

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

10.03.2018 – 20.04.2018

Big size

#
10.03.2018 – 20.04.2018

Date localization

#
2018/03/10 – 2018/04/20

With native Date output

#
10.03.2018 – 20.04.2018

Stringified control value:

Sat Mar 10 2018 00:00:00 GMT+0000 (Coordinated Universal Time),Fri Apr 20 2018 00:00:00 GMT+0000 (Coordinated Universal Time)

Custom period

#
Today (27.10.2025)