Datetime

Description

The datetime component is a field that shows the date and the time using the mask format specified. This is generally used in navbars, but it can be used in other elements like statusbar, panel headers, etc.

Configuration

This component has a own attribute called data-format. The table bellow shows the tokens that can be used in the format:

Token	Description	Example
M	The month in the year	01 - 12
d	The day in the month	01 - 31
e	The week day	01 - 07
y	The full year	1997, 2000, 2019
H	The hour	00 - 23
h	The hour	00 - 12
m	The minute	00 - 59
s	The second	00 - 59
a	The hour marker	AM or PM

Code Examples

These are some examples for component:

<!-- Navbar -->
<nav class="tui-nav">
    <span class="tui-datetime" data-format="h:m:s a"></span>
    ...
</nav>

The bellow examples show the result using different format types:

<span class="tui-datetime" data-format="h:m:s a"></span>       <!-- HH:MM:SS AM/PM -->
<span class="tui-datetime" data-format="M/d/y h:m:s a"></span> <!-- MM/DD/YYYY HH:MM:SS AM/PM -->
<span class="tui-datetime" data-format="d/M/y H:m:s"></span>   <!-- DD/MM/YYYY HH:MM:SS -->
<span class="tui-datetime" data-format="y/M/d H:m:s"></span>   <!-- UTC -->
<span class="tui-datetime" data-format="y/M/dTH:m:s"></span>   <!-- W3C format -->

Component Classes

This is the table with available classes for this component.

Class	Description
.tui-datetime	Creates a datetime field in the right side of the base element