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.

Usage

Import

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

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

Appearance

Sorry! There are currently no variants and sizes available.

Props

PropertyTypeDefaultDescription
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.

Examples

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