Table of Contents
Description
The Timestamp component displays a formatted timestamp using custom format tokens. It extends the
ShadowComponent class for encapsulated styling.
Use the Timestamp component to display a formatted timestamp. The component will automatically
format the timestamp using the default format or a custom format with tokens.
<k-timestamp timestamp="1633024800000"></k-timestamp>
Use the format attribute to specify a custom format using tokens like YYYY (4-digit
year), MM (2-digit month), DD (2-digit day), hh (2-digit hour),
mm (2-digit minute), and ss (2-digit second).
<k-timestamp timestamp="1633024800000" format="MM/DD/YYYY"></k-timestamp>
Display time with custom formatting using hour, minute, and second tokens.
<k-timestamp timestamp="1633024800000" format="hh:mm:ss"></k-timestamp>
The Timestamp component accepts various date/time input formats. The component uses JavaScript's Date.parse() for parsing, which supports multiple standard formats:
| Format Type |
Example |
Notes |
| EPOCH Milliseconds |
1633024800000 |
Number value representing milliseconds since January 1, 1970 |
| ISO 8601 (Full) |
2021-10-01T00:00:00Z |
Includes date, time, and UTC timezone indicator |
| ISO 8601 (Date Only) |
2021-10-01 |
Date portion only; time assumed to be midnight in UTC |
| ISO 8601 (With Timezone) |
2021-10-01T00:00:00+00:00 |
Includes timezone offset; can use +/- with hours and minutes |
| ISO 8601 (No Timezone) |
2021-10-01T00:00:00 |
Interpreted as local time |
| RFC 2822 |
Fri, 01 Oct 2021 00:00:00 GMT |
Email date format with day of week and timezone |
| JavaScript Date String |
Fri Oct 01 2021 00:00:00 GMT+0000 |
Output format from JavaScript's Date.toString() |
| US Date Format |
10/01/2021 |
MM/DD/YYYY format; ambiguous with international formats |
| ISO Date String |
2021-10-01 00:00:00 |
YYYY-MM-DD HH:MM:SS format |
| Named Month Format |
October 1, 2021 |
Month name followed by day and year |
Format Examples
<k-timestamp timestamp="2021-10-01T00:00:00Z"></k-timestamp>
Result:
<k-timestamp timestamp="October 1, 2021"></k-timestamp>
Result:
Important Notes
- Browser Compatibility: Some formats may be parsed differently across browsers. ISO 8601 formats are the most reliable.
- Timezone Handling: Formats without explicit timezone information are interpreted as local time. ISO 8601 with
Z or timezone offset are interpreted as absolute times.
- Format String Ambiguity: Ambiguous formats like
10/01/2021 may be interpreted differently depending on browser locale settings.
Extends ShadowComponent
timestamp: string | number
The timestamp to be formatted and displayed. Accepts EPOCH milliseconds (number), ISO 8601 formats, RFC 2822 formats, or other JavaScript-parseable date strings. See Supported Input Formats for details. Syncs to timestamp attribute.
format: string
The format to be used for formatting the timestamp using tokens like YYYY, MM, DD, hh, mm, ss. If not provided,
uses the default format. Syncs to format attribute.
locale: string
The locale to be used for formatting the timestamp. Syncs to locale attribute.
The Timestamp class does not introduce any new methods beyond those provided by the ShadowComponent
class.
Kempo UI