DateFormat
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
Sorry! There are currently no variants and sizes available.
Props
| Property | Type | Default | Description |
|---|---|---|---|
value | Date | none | Value to be formatted. |
tabular | boolean | true | Specifies that the digits should take the full width. |
locale | string | Host environment's current locale | Specifies the locale or language tag to use. |
dateStyle | string | none | Specifies the date formatting style. |
timeStyle | string | none | Specifies the time formatting style. |
weekday | string | none | Specifies how to display the day of the week. |
year | string | none | Specifies how to display the year. |
month | string | none | Specifies how to display the month. |
day | string | none | Specifies how to display the day of the month. |
hour | string | none | Specifies how to display the hour. |
minute | string | none | Specifies how to display the minute. |
second | string | none | Specifies how to display the second. |
timeZone | string | none | Specifies the time zone to use for formatting. |
Examples
Short Date Format
In this example the date is formatted using the "short" date style.
Current Date:08.05.24
Long Date Format
In this example the date is formatted using the "full" date style.