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.



To import the component you just have to use this code below.

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


Sorry! There are currently no variants and sizes available.


valueDatenoneValue to be formatted.
tabularbooleantrueSpecifies that the digits should take the full width.
localestringHost environment's current localeSpecifies the locale or language tag to use.
dateStylestringnoneSpecifies the date formatting style.
timeStylestringnoneSpecifies the time formatting style.
weekdaystringnoneSpecifies how to display the day of the week.
yearstringnoneSpecifies how to display the year.
monthstringnoneSpecifies how to display the month.
daystringnoneSpecifies how to display the day of the month.
hourstringnoneSpecifies how to display the hour.
minutestringnoneSpecifies how to display the minute.
secondstringnoneSpecifies how to display the second.
timeZonestringnoneSpecifies the time zone to use for formatting.


Short Date Format

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

Current Date:12.04.24

Long Date Format

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

Freitag, 12. April 2024