use-date-format

Format a date with a token pattern or Intl.DateTimeFormat options.

Usage

import { formatDate, useDateFormat } from "@vizejs/composable/use-date-format";

Runtime contract

API

formatDate

Format a date with a token pattern or Intl.DateTimeFormat options. Pure and deterministic: locale and time zone default to fixed values ("en", "UTC") rather than host settings, so the same input renders identically on server and client. Calendar fields are computed in the requested time zone through Intl, so no host-zone arithmetic leaks in.

function formatDate( input: DateFormatInput, format: string | Intl.DateTimeFormatOptions = "HH:mm:ss", options: FormatDateOptions = {}, ): string

formatDate(0, "YYYY-MM-DD HH:mm:ss"); // "1970-01-01 00:00:00"
formatDate(0, "dddd, MMMM D [at] h:mm A", { locale: "en", timeZone: "Asia/Tokyo" });
formatDate(0, { dateStyle: "long" }, { locale: "ja" }); // "1970年1月1日"

useDateFormat

Reactive formatted date. Wraps formatDate in a computed ref; the date, the format, the locale, and the time zone are all reactive. Deterministic defaults ("en", "UTC") keep server and client output identical. No timers, no globals, nothing to dispose.

function useDateFormat( input: MaybeRefOrGetter<DateFormatInput>, format: MaybeRefOrGetter<string | Intl.DateTimeFormatOptions> = "HH:mm:ss", options: UseDateFormatOptions = {}, ): ComputedRef<string>

const label = useDateFormat(() => event.value.startsAt, "ddd, MMM D HH:mm", {
  locale: () => locale.value,
  timeZone: "Europe/Paris",
});

Types

FormatDateOptions

Options for formatDate.

UseDateFormatOptions

Options for useDateFormat.