StellarUI

<stellar-date>

Localized date and time formatter built on Intl.DateTimeFormat semantics.

Properties

Preview

Use style shortcuts for the common cases. Advanced format options such as weekday, month, or time-zone-name are available directly on the component.

Markup

Copy

<stellar-date
  date-style="full"
  time-style="short"
  date="2024-01-01T12:00:00.000Z"
>
</stellar-date>

API

Complete props, events, slots, and implementation notes for the shipped date formatter.

Props

Prop	Type	Default
`date`	`string`	`''`
`date-style`	`'' \| full \| long \| medium \| short`	`''`
`time-style`	`'' \| full \| long \| medium \| short`	`''`
`hour-format`	`auto \| 12 \| 24`	`auto`
`hour-cycle`	`'' \| h11 \| h12 \| h23 \| h24`	`''`
`time-zone`	`string`	`''`
`weekday`	`'' \| long \| short \| narrow`	`''`
`era`	`'' \| long \| short \| narrow`	`''`
`year`	`'' \| numeric \| 2-digit`	`''`
`month`	`'' \| numeric \| 2-digit \| long \| short \| narrow`	`''`
`day`	`'' \| numeric \| 2-digit`	`''`
`day-period`	`'' \| long \| short \| narrow`	`''`
`hour`	`'' \| numeric \| 2-digit`	`''`
`minute`	`'' \| numeric \| 2-digit`	`''`
`second`	`'' \| numeric \| 2-digit`	`''`
`fractional-second-digits`	`number`	`0`
`time-zone-name`	`'' \| long \| short \| shortOffset \| longOffset \| shortGeneric \| longGeneric`	`''`
`format-matcher`	`'' \| basic \| best-fit`	`''`

Events

Event	Source	Notes
native time semantics	rendered `<time>`	The component is display-only and does not emit interaction events.
custom events	none	`stellar-date` does not emit custom events.

Slots

Slot	Notes
none	This component has no slots. It renders one semantic `<time>` node.

Notes

The public tag is `stellar-date`, and it is a display-only formatter rather than a date-picker or input control.
The runtime formatting path uses the platform `Intl.DateTimeFormat` API and renders a semantic `<time>` node.
`date` accepts ISO 8601 strings in markup; the host `.date` property also accepts a `Date` object and is normalized back to ISO for rendering.
`lang` on the host changes the formatter locale; otherwise the component falls back to the document language and then the browser locale.
`date-style` and `time-style` cover the common shortcut cases, while the remaining props map directly to `Intl.DateTimeFormat` options.