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}
/>