LocalTime
Renders a DateTimeOffset in the *browser's* local time zone — defeats the server-zone ToLocalTime() no-op trap that bites Blazor Server apps deployed to UTC hosts. Component-isolated JS module rewrites the textContent after render.
Divergence from Blok
Blazor-side addition; no equivalent in the Blok design system. Server-side DateTimeOffset.ToLocalTime() uses the host's TimeZoneInfo.Local, which is typically UTC in containerised hosting — making the server-rendered conversion a no-op. LocalTime renders the UTC ISO string into a <time> tag and a co-located JS module upgrades it to the user's wall-clock time after render. Each component instance imports its own module reference and disposes it cleanly with the circuit; no global observers, no document-wide scans.
Examples
Default (date and time)
Date only
12-hour clock with AM/PM
With timezone offset
Compact (2-digit year + padded 12-hour)
Server-rendered fallback (UTC)
Until the JS module loads — and in JS-disabled clients — the rendered text is the UTC equivalent of the same instant (using the same Format). Inspect the underlying <time datetime="..."> attribute to see the canonical UTC ISO string the server emitted.
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| LocalTime | Renders a DateTimeOffset in the browser's local time zone via a component-isolated JS module that rewrites the underlying <time> element's textContent after render. The server-rendered fallback is the UTC equivalent so JS-disabled clients still see a sensible value. |
LocalTime
Renders a DateTimeOffset in the browser's local time zone via a component-isolated JS module that rewrites the underlying <time> element's textContent after render. The server-rendered fallback is the UTC equivalent so JS-disabled clients still see a sensible value.
| Property | Type | Required | Description |
|---|---|---|---|
| Value | DateTimeOffset | The UTC instant to render. Required. | |
| Format | string | Format string. Defaults to "yyyy-MM-dd HH:mm:ss". Tokens: yyyy / yy (year), MM (month), dd (day), HH (24-hour), hh / h (12-hour padded / unpadded), mm (minute), ss (second), tt (AM/PM), K (zone offset, e.g. +10:00). Anything else passes through unchanged. |