Format Date

<pc-format-date>

1.0.0-alpha.1

experimental

Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.

Formats a date/time using the specified locale and options.

Localisation is handled by the browser’s Intl.DateTimeFormat API. No language packs are required.

<!-- 🎉 Placer Toolkit release date -->
<pc-format-date date="2025-05-15T15:20:00+02:00"></pc-format-date>

Code

Edit

The date attribute determines the date/time to use when formatting. It must be a string that Date.parse() can interpret or a Date object set via JavaScript. If omitted, the current date/time will be assumed.

When using strings, avoid ambiguous dates such as 03/04/2024, which can be interpreted as 4 March 2024 or 3 April 2024 depending on the user’s browser and locale. Instead, always use a valid ISO 8601 date time string to ensure the date will be parsed properly by all clients.

Demos#

Date and time formatting#

Formatting options are based on those found in the Intl.DateTimeFormat API. When formatting options are provided, the date/time will be formatted according to those values. When no formatting options are provided, a localised, numeric date will be displayed instead.

<!-- Human‐readable date -->
<pc-format-date month="long" day="numeric" year="numeric"></pc-format-date>

<br />

<!-- Time -->
<pc-format-date hour="numeric" minute="numeric"></pc-format-date>

<br />

<!-- Weekday -->
<pc-format-date weekday="long"></pc-format-date>

<br />

<!-- Month -->
<pc-format-date month="long"></pc-format-date>

<br />

<!-- Year -->
<pc-format-date year="numeric"></pc-format-date>

<br />

<!-- No formatting options -->
<pc-format-date></pc-format-date>

Code

Edit

Hour formatting#

By default, the browser will determine whether to use 12‐hour or 24‐hour time. To force one or the other, set the hour-format attribute to 12 or 24.

<pc-format-date hour="numeric" minute="numeric" hour-format="12"></pc-format-date>
<br />
<pc-format-date hour="numeric" minute="numeric" hour-format="24"></pc-format-date>

Code

Edit

Localisation#

Use the lang attribute to set the date/time formatting locale.

English (US): <pc-format-date lang="en-us"></pc-format-date>
<br />
French: <pc-format-date lang="fr"></pc-format-date>
<br />
Russian: <pc-format-date lang="ru"></pc-format-date>

Code

Edit

Eigenschaften#

Name	Beschreibung	Standard
`date`	The date/time to format. If not set, the current date and time will be used. When passing a string, it’s strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format in JavaScript, use `date.toISOString()`. Typ: `Date \| string`	`new Date()`
`weekday`	The format for displaying the weekday. Typ: `"narrow" \| "short" \| "long" \| undefined`	‐
`era`	The format for displaying the era. Typ: `"narrow" \| "short" \| "long" \| undefined`	‐
`year`	The format for displaying the year. Typ: `"numeric" \| "2-digit" \| undefined`	‐
`month`	The format for displaying the month. Typ: `"numeric" \| "2-digit" \| "narrow" \| "short" \| "long" \| undefined`	‐
`day`	The format for displaying the day. Typ: `"numeric" \| "2-digit" \| undefined`	‐
`hour`	The format for displaying the hour. Typ: `"numeric" \| "2-digit" \| undefined`	‐
`minute`	The format for displaying the minute. Typ: `"numeric" \| "2-digit" \| undefined`	‐
`second`	The format for displaying the second. Typ: `"numeric" \| "2-digit" \| undefined`	‐
`timeZoneName` `time-zone-name`	The format for displaying the time. Typ: `"short" \| "long" \| undefined`	‐
`timeZone` `time-zone`	The time zone to express the time in. Typ: `string \| undefined`	‐
`hourFormat` `hour-format`	The format for displaying the hour. Typ: `"auto" \| "12" \| "24"`	`"auto"`
`updateComplete`	Ein schreibgeschütztes Promise, das erfüllt ist, sobald die Komponente fertig aktualisiert wurde.	‐

Erfahre mehr über Attribute und Eigenschaften.

Importieren#

Wenn du den Autoloader oder den Standard‐Loader nutzt, kannst du diesen Abschnitt überspringen. Falls du „Cherry Picking“ betreibst, kannst du die folgenden Snippets verwenden, um diese Komponente zu importieren.

CDN (Skript‐Tag)

CDN (Import)

npm (Import)

Um diese Komponente manuell vom CDN zu importieren, kopiere dieses Code‐Snippet und füge es in dein HTML ein.

  <script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/format-date/format-date.js"></script> 

Um diese Komponente manuell vom CDN zu importieren, kopiere dieses Code‐Snippet und füge es in deine JavaScript‐Datei ein.

  import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/format-date/format-date.js"; 

Um diese Komponente manuell via npm zu importieren, kopiere dieses Code‐Snippet und füge es in deine JavaScript‐Datei ein.

import "placer-toolkit/dist/components/format-date/format-date.js";