DateTimeStamp

View Source

NOTE: Introduced feature in v0.4.10.

DateTimeStamp formats an ISO 8601 / RFC 3339 timestamp into a human readable string, using the user preferences provided by the Browser.

<script>
    import {DateTimeStamp} from "@kahi-ui/framework";

    const timestamp = "2021-11-10T13:00:42-05:00";
</script>

<DateTimeStamp {timestamp} />

Imports

<script>
    import {DateTimeStamp} from "@kahi-ui/framework";
</script>

12 Hour

You can have the timestamp render as 12-hour time (1...12 AM/PM) instead of 24-hour time (0...23) via the hour_12 property.

<script>
    import {DateTimeStamp} from "@kahi-ui/framework";

    const timestamp = "2021-11-10T13:00:42-05:00";
</script>

<DateTimeStamp hour="numeric" hour_12 {timestamp} />

Custom Format

NOTE: By using custom format settings, the user's defaults will not be loaded and you will have to opt into each unit of information.

You can customize how each individual component of the timestamp is displayed via the day, month, weekday, year, hour , minute, and second properties respectively.

<script>
    import {DateTimeStamp} from "@kahi-ui/framework";

    const timestamp = "2021-11-10T13:00:42-05:00";
</script>

<DateTimeStamp
    day="2-digit"
    month="long"
    weekday="long"
    year="2-digit"
    hour="2-digit"
    minute="2-digit"
    second="2-digit"
    hour_12
    {timestamp}
/>

Properties

DateTimeStamp

Name Description Types
timestamp Sets the ISO 8601 / RFC 3339 or UNIX Epoch timestamp being formatted for display.
number string
calendar Alters the calendar used for calculations / formatting via Temporal Calendar Codes .
string
locale Alters the locale used for displaying internationalized text via RFC 5646 / BCP 47 language tags.
string
day Alters how a displayed day is formatted.
2-digit numeric
month Alters how a displayed month is formatted.
2-digit long narrow numeric short
weekday Alters how a displayed weekday is formatted.
long narrow short
year Alters how a displayed year is formatted.
2-digit numeric
hour Alters how a displayed hour is formatted.
2-digit numeric
hour_12 Alters to showing hours in 12-hour format.
boolean
minute Alters how a displayed minute is formatted.
2-digit numeric
second Alters how a displayed second is formatted.
2-digit numeric