Formatters
<NumericFormat> and <DateFormat> components are built on top of the Intl.NumerFormat and Intl.DateTimeFormat APIs which provide a comprhensive support for formatting numbers and date based on locale-specific conventions.
1. NumericFormat
With <NumericFormat> helper, you can easily ensure that numeric values are displayed consistently and accurtely, taking into account factors such as decimal separators, curreny symbols, and grouping separators specific to each language.
Usage
Import
To import the component you just have to use this code below.
import { NumericFormat } from '@marigold/system';Appearance
Sorry! There are currently no variants and sizes available.
Props
| Property | Type | Default | Description |
|---|---|---|---|
value | number | bigint | none | Value to be formatted. |
tabular | boolean | true | Specifies that the digits should take the full width. |
minimumFractionDigits | number | none | Minimum number of fraction digits to display. |
maximumFractionDigits | number | none | Maximum number of fraction digits to display. |
useGrouping | boolean | true | Specifies whether to use grouping separators (e.g., thousands separator). |
compactDisplay | long | short | none | How to display the number in a compact form. Possible values are "short", "long", and "narrow" |
currency | string | none | Specifies the currency code to use when the style is set to currency |
currencyDisplay | string | standard | Specifies whether to display the currency symbol or sign. Possible values are "standard" (default), "accounting", and "code" |
currencySign | string | none | Specifies whether to display the currency symbol or sign. Possible values are "standard" (default), "accounting", and "code" |
style | string | none | Specifies the formatting style for the number. Possible values are "decimal", "currency", "percent", "unit", and "compact" |
Examples
Formatted Currency Value
In this example the value passed is formatted based on the currency chosen 'USD' .
Formatted Percentage Value
In this example the decimal value is formatted into two fraction digits percentage value .
Formatted Numeric Value
Formats the number with a max of 2 significant digits, only the most significant digits are displayed.
2. 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 formas, 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.
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
| 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.02.24
Long Date Format
In this example the date is formatted using the "full" date style.