Datetime

The <auro-datetime> element shows a date or time as text, formatted for a language and region you choose and, optionally, a specific time zone. Set type to choose the full date, the time, a numeric date, or a single part, such as the weekday.

Use cases

Use <auro-datetime> to:

• Show a date or time, such as a departure date or arrival time.
• Show a time in a specific time zone, such as a flight's local time at its airport.
• Format a date for a language and region, such as de-DE or ja-JP.

Install

Define dependency in project

Import the component in each project that uses <auro-datetime>.

Use CDN

If your project can't process JS assets, use the pre-processed assets. Legacy browsers, such as IE11, aren't supported.

Basic example

Custom component registration for version management

Every Auro component has two key parts: the class and the custom element definition. The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.

Installing the component as described in the Install section imports the class and registers the component globally for you.

However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), register the class manually under a custom element name to avoid conflicts.

To do this, import only the component class and call the register(name) method with a unique name:

<custom-datetime> then works the same as <auro-datetime>, and both can run on the same page without affecting each other.