DateFormat

Helper component for formatting date values based on the current language and locale-specific conventions.

With <DateFormat> helper, you can easily ensure consistent and accurate display of date and time values taking into account factors such as date formats, time formats, time zones, and locale-specific conventions. It provides a way to format and localize dates and times based on the user's preferred language and region.

<DateFormat> component are built on top of the Intl.DateTimeFormat APIs which provide a comprehensive support for formatting dates based on locale-specific conventions.

However, there are a few components that should not be used together with this component.

Import

import { DateFormat } from '@marigold/system';

Appearance

PropertyTypeDescription
variant-The available variants of this component.
size-The available sizes of this component.

Props

calendar?
string;
dateStyle?
"long" | "short" | "full" | "medium";
day?
"numeric" | "2-digit";
dayPeriod?
"long" | "short" | "narrow";
era?
"long" | "short" | "narrow";
formatMatcher?
"best fit" | "basic";
fractionalSecondDigits?
1 | 2 | 3;
hour?
"numeric" | "2-digit";
hour12?
boolean;
hourCycle?
"h11" | "h12" | "h23" | "h24";
localeMatcher?
"best fit" | "lookup";
minute?
"numeric" | "2-digit";
month?
"long" | "short" | "narrow" | "numeric" | "2-digit";
numberingSystem?
string;
second?
"numeric" | "2-digit";
tabular?
boolean;
Specifies that the digits should take the full width.
Defaults to: 
"true"
timeStyle?
"long" | "short" | "full" | "medium";
timeZone?
string;
timeZoneName?
"long" | "short" | "shortOffset" | "longOffset" | "shortGeneric" | "longGeneric";
value
Date;
Value to be formatted.
weekday?
"long" | "short" | "narrow";
year?
"numeric" | "2-digit";

Examples

Short Date Format

In this example the date is formatted using the "short" date style.

Current Date:08.07.25

Long Date Format

In this example the date is formatted using the "full" date style.

Dienstag, 8. Juli 2025
Last update: October 25, 2024