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
| Property | Type | Description |
|---|---|---|
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";
valueDate;
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.
Preview
Code
Current Date:05.08.25
Long Date Format
In this example the date is formatted using the "full" date style.
Preview
Code
Dienstag, 5. August 2025
Last update: October 25, 2024