InputDateTimeLegacy 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 InputDateTime instead!

InputDateTime allows to input date and time

Date formatting can be customized with TUI_DATE_FORMAT token.

See example with the usage of these tokens.

DI-tokens for input-configurations:

TUI_DATE_TIME_VALUE_TRANSFORMER
custom format of control output ( [TuiDay, TuiTime | null] | null is default).

See example with string as control's output.

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

Form value:

{
  "testValue": [
    "2017-03-15",
    null
  ]
}

Modes

#

Default:

With seconds:

With SS and MS:

Form value:

{
  "testValue": [
    "2017-03-15",
    null
  ]
}

Date localization

#

With control's output as string

#

Stringified control value:

19.01.2022, 12:33

Native input datetime

#
Please note that native input datetime only supports HH:MM time mode

AM / PM

#

Any timeMode ending with AA is 12-hour time format with meridiem part

Control value:

[
  "2020-09-20",
  {
    "hours": 15,
    "minutes": 30,
    "seconds": 0,
    "ms": 0
  }
]

With validator

#

Form value:

[
  "2017-03-15",
  null
]

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

Form value:

[
  "2017-03-15",
  null
]