HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Format DateView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA timestamp, formatted for the user's locale.StableSince 0.1.0TypographyUsageimport'@fusion.dev/helix/format-date'import'@fusion.dev/helix-headless/format-date'Preview
API ReferenceRoothelix-format-dateA timestamp, formatted for the user's locale.
PropTypeDescriptioncalendar"buddhist"|"gregory"|"iso8601"|"japanese"|"roc"|"chinese"|"coptic"|"dangi"|"ethioaa"|"ethiopic"|"hebrew"|"indian"|"islamic"|"islamic-civil"|"islamic-rgsa"|"islamic-tbla"|"islamic-umalqura"|"persian"The calendar a date is written in: gregory, buddhist, japanese,
roc, or iso8601, or a calendar with months of its own, such as
persian, hebrew, islamic-umalqura, ethiopic, or chinese: every
calendar Date Picker and Date Input draw.dateDate|number|stringDefault""The timestamp: a Date, milliseconds since the epoch, or a string in any
format Date can parse. The attribute is the string.dateStyle"full"|"long"|"medium"|"short"The locale's own pattern for the date: full, long, medium, or
short. Set, it stands in for weekday, day, month, year and era.day"numeric"|"2-digit"How the day of the month is written, where a date is shown.dayPeriod"long"|"narrow"|"short"Writes the part of the day in words, such as "in the morning" or "at
night", in its long, short, or narrow form, where hour is on a
twelve-hour clock.elapsedbooleanDefaultfalseShows how long ago the timestamp was, in a compact form such as "3h", in
place of the date.era"long"|"narrow"|"short"How the era is written, such as AD, where a date is shown.fieldsbooleanDraws each field of a date in a part of its own: weekday, day,
month, year, era, hour, minute, second, day-period and
time-zone-name, so ::part(year) can set the year apart.fractionalSecondDigits1|2|3How many digits of a fraction of a second to write after second: 1, 2,
or 3, as in 09:41:07.250.frozenbooleanDefaultfalseDraws an elapsed or relative reading once and leaves it, where it
would otherwise move on as it goes stale.hour"numeric"|"2-digit"How the hour is written, where a time of day is shown.hourCycle"h11"|"h12"|"h23"|"h24"The clock a time of day is written on: h12 or h11 for twelve hours,
h23 or h24 for twenty-four.localestringDefault""The locale to format the timestamp in.minute"numeric"|"2-digit"How the minute is written, where a time of day is shown.month"numeric"|"2-digit"|"long"|"short"|"narrow"How the month is written, where a date is shown.numeric"always"|"auto"Whether a relative reading may use a word for a number: auto says
"yesterday" and "now", and always says "1 day ago" and "in 0 seconds".relative"long"|"narrow"|"short"Shows how long ago the timestamp was, or how long until it, in words, in
place of the date: long ("3 hours ago"), short ("3 hr. ago") or
narrow ("3h ago").second"numeric"|"2-digit"How the second is written, where a time of day is shown.timeStyle"full"|"long"|"medium"|"short"The locale's own pattern for the time of day: full, long, medium, or
short. Set, it stands in for hour, minute, second and
time-zone-name.timeZonestringThe time zone to read the timestamp in.timeZoneName"long"|"longGeneric"|"longOffset"|"short"|"shortGeneric"|"shortOffset"Shows the name of the time zone: long or short, as Pacific Daylight
Time or PDT, longOffset or shortOffset, as GMT-07:00 or GMT-7, or
longGeneric or shortGeneric, as Pacific Time or PT.weekday"long"|"short"|"narrow"How the weekday is written, where one is shown.year"numeric"|"2-digit"How the year is written, where a date is shown.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
PartDescriptiondayThe day of the month, with fields.day-periodAM or PM, or the locale's word for the part of the day, with fields.eraThe era, such as AD, with fields and era.fractional-secondThe fraction of a second, with fields and fractional-second-digits.hourThe hour, with fields.minuteThe minute, with fields.monthThe month, with fields.secondThe second, with fields.timeThe <time> element that holds the formatted text.time-zone-nameThe time zone's name, with fields, where time-zone-name or a long or fulltime-style shows it.weekdayThe day of the week, with fields.yearThe year, with fields.
Custom stateDescriptionfutureAn elapsed or relative reading of a moment still to come, such as "in 3 hours".pastAn elapsed or relative reading of a moment gone, such as "3 hours ago".settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-format-dateA timestamp, formatted for the user's locale.
PropTypeDescriptioncalendar"buddhist"|"gregory"|"iso8601"|"japanese"|"roc"|"chinese"|"coptic"|"dangi"|"ethioaa"|"ethiopic"|"hebrew"|"indian"|"islamic"|"islamic-civil"|"islamic-rgsa"|"islamic-tbla"|"islamic-umalqura"|"persian"The calendar a date is written in: gregory, buddhist, japanese,
roc, or iso8601, or a calendar with months of its own, such as
persian, hebrew, islamic-umalqura, ethiopic, or chinese: every
calendar Date Picker and Date Input draw.dateDate|number|stringDefault""The timestamp: a Date, milliseconds since the epoch, or a string in any
format Date can parse. The attribute is the string.dateStyle"full"|"long"|"medium"|"short"The locale's own pattern for the date: full, long, medium, or
short. Set, it stands in for weekday, day, month, year and era.day"numeric"|"2-digit"How the day of the month is written, where a date is shown.dayPeriod"long"|"narrow"|"short"Writes the part of the day in words, such as "in the morning" or "at
night", in its long, short, or narrow form, where hour is on a
twelve-hour clock.elapsedbooleanDefaultfalseShows how long ago the timestamp was, in a compact form such as "3h", in
place of the date.era"long"|"narrow"|"short"How the era is written, such as AD, where a date is shown.fieldsbooleanDraws each field of a date in a part of its own: weekday, day,
month, year, era, hour, minute, second, day-period and
time-zone-name, so ::part(year) can set the year apart.fractionalSecondDigits1|2|3How many digits of a fraction of a second to write after second: 1, 2,
or 3, as in 09:41:07.250.frozenbooleanDefaultfalseDraws an elapsed or relative reading once and leaves it, where it
would otherwise move on as it goes stale.hour"numeric"|"2-digit"How the hour is written, where a time of day is shown.hourCycle"h11"|"h12"|"h23"|"h24"The clock a time of day is written on: h12 or h11 for twelve hours,
h23 or h24 for twenty-four.localestringDefault""The locale to format the timestamp in.minute"numeric"|"2-digit"How the minute is written, where a time of day is shown.month"numeric"|"2-digit"|"long"|"short"|"narrow"How the month is written, where a date is shown.numeric"always"|"auto"Whether a relative reading may use a word for a number: auto says
"yesterday" and "now", and always says "1 day ago" and "in 0 seconds".relative"long"|"narrow"|"short"Shows how long ago the timestamp was, or how long until it, in words, in
place of the date: long ("3 hours ago"), short ("3 hr. ago") or
narrow ("3h ago").second"numeric"|"2-digit"How the second is written, where a time of day is shown.timeStyle"full"|"long"|"medium"|"short"The locale's own pattern for the time of day: full, long, medium, or
short. Set, it stands in for hour, minute, second and
time-zone-name.timeZonestringThe time zone to read the timestamp in.timeZoneName"long"|"longGeneric"|"longOffset"|"short"|"shortGeneric"|"shortOffset"Shows the name of the time zone: long or short, as Pacific Daylight
Time or PDT, longOffset or shortOffset, as GMT-07:00 or GMT-7, or
longGeneric or shortGeneric, as Pacific Time or PT.weekday"long"|"short"|"narrow"How the weekday is written, where one is shown.year"numeric"|"2-digit"How the year is written, where a date is shown.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
PartDescriptiondayThe day of the month, with fields.day-periodAM or PM, or the locale's word for the part of the day, with fields.eraThe era, such as AD, with fields and era.fractional-secondThe fraction of a second, with fields and fractional-second-digits.hourThe hour, with fields.minuteThe minute, with fields.monthThe month, with fields.secondThe second, with fields.timeThe <time> element that holds the formatted text.time-zone-nameThe time zone's name, with fields, where time-zone-name or a long or fulltime-style shows it.weekdayThe day of the week, with fields.yearThe year, with fields.
Custom stateDescriptionfutureAn elapsed or relative reading of a moment still to come, such as "in 3 hours".pastAn elapsed or relative reading of a moment gone, such as "3 hours ago".settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionPreviewHow long ago a timestamp was, and one date in three formats.PreviewHow long ago a timestamp was, and one date in three formats.