DateLabeledField

Labeled field that formats a date, relative time, or a custom pattern.

Usage

svelte

<script lang="ts">
  import { DateLabeledField } from "@milandekruijf/ui/svelte";

  const date = new Date("2026-02-10T12:00:00Z");
</script>

<DateLabeledField name="Published" {date} locale="en-US" />
<DateLabeledField name="Relative" {date} format="from-now" />

Examples

Absolute and relative

Published

February 10, 2026

Relative

8 months ago

<script lang="ts">
  import { DateLabeledField } from "@milandekruijf/ui/svelte";
  import { routeLocale } from "#lib/i18n/sveltekit.js";
  import { stack } from "./styles.js";

  const date = new Date("2026-02-10T12:00:00Z");
</script>

<div class={stack}>
  <DateLabeledField name="Published" {date} locale={routeLocale()} />
  <DateLabeledField
    name="Relative"
    {date}
    format="from-now"
    locale={routeLocale()}
  />
</div>

Props

Prop	Type	Default	Description
date	`string \| Date`	—	Date to format.
name?	`string`	"Date"	Field label.
format?	`string \| "from-now" \| "to-now"`	"MMMM DD, YYYY"	A date pattern (e.g. `DD.MM.YYYY`), or `from-now` / `to-now` for relative labels.
locale?	`string`	"en"	BCP-47 locale used for formatting.
wide?	`boolean`	—	Spans both grid columns when inside a grid.
class?	`string`	—	Extra classes forwarded to `LabeledField`.