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";
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.
Preview
Code
Current Date:08.07.25
Long Date Format
In this example the date is formatted using the "full" date style.
Preview
Code
Dienstag, 8. Juli 2025
Last update: October 25, 2024