@rio-cloud/uikit-mcp 1.1.10 → 1.1.12

package/dist/docs/start/guidelines/formatting.md

@@ -3,7 +3,7 @@
 *Category:* Getting started
 *Section:* Guidelines
 *Source:* https://uikit.developers.rio.cloud/#/start/guidelines/formatting
-*Captured:* 2026-04-20T12:53:32.590Z
+*Captured:* 2026-05-06T12:13:09.245Z
 
 Having a common date formatting guide is crucial to ensure consistency, clarity, and accuracy in documentation, making it easier to understand and interpret dates correctly across different contexts.
 
@@ -34,10 +34,41 @@ Having a common date formatting guide is crucial to ensure consistency, clarity,
 
 ## Date formats overview
 
+Date formats overview
+
 This is a list of all supported langues and their respective date format showcasing also similar locales sharing the same format.
 
+| Locale | Country | Date Format | Example |
+| --- | --- | --- | --- |
+| bg-BG | Bulgarian | DD.MM.YYYY | 20.05.2024 |
+| cs-CZ | Czech | DD.MM.YYYY | 20.05.2024 |
+| da-DK | Danish | DD-MM-YYYY | 20-05-2024 |
+| de-DE | German | DD.MM.YYYY | 20.05.2024 |
+| el-GR | Greek | DD/MM/YYYY | 20/05/2024 |
+| en-GB | English UK | DD/MM/YYYY | 20/05/2024 |
+| es-ES | Spanish | DD/MM/YYYY | 20/05/2024 |
+| et-EE | Estonian | DD.MM.YYYY | 20.05.2024 |
+| fi-FI | Finnish | DD.MM.YYYY | 20.05.2024 |
+| fr-FR | French | DD/MM/YYYY | 20/05/2024 |
+| hr-HR | Croatian | DD.MM.YYYY | 20.05.2024 |
+| hu-HU | Hungarian | YYYY. MM. DD. | 2024. 05. 20. |
+| it-IT | Italian | DD/MM/YYYY | 20/05/2024 |
+| lt-LT | Lithuanian | DD-MM-YYYY | 20-05-2024 |
+| lv-LV | Latvian | DD.MM.YYYY | 20.05.2024 |
+| nb-NO | Norwegian Bokmål | DD.MM.YYYY | 20.05.2024 |
+| nl-NL | Dutch | DD-MM-YYYY | 20-05-2024 |
+| pl-PL | Polish | DD.MM.YYYY | 20.05.2024 |
+| pt-BR | Brazilian Portuguese | DD/MM/YYYY | 20/05/2024 |
+| pt-PT | Portuguese | DD/MM/YYYY | 20/05/2024 |
+| ro-RO | Romanian | DD.MM.YYYY | 20.05.2024 |
+| sk-SK | Slovak | DD.MM.YYYY | 20.05.2024 |
+| sl-SI | Slovenian | DD.MM.YYYY | 20.05.2024 |
+| sv-SE | Swedish | YYYY-MM-DD | 2024-05-20 |
+
 ## If nothing else is specified use the default date format: YYYY-MM-DD
 
+If nothing else is specified use the default date format: YYYY-MM-DD
+
 This format is defined in the ISO 8601 standard, which is maintained by the International Organization for Standardization (ISO). It's widely used for data exchange and communication because it:
 
 - Sorts chronologically: Dates appear in order when sorted alphabetically (e.g., 2023-12-31 comes before 2024-01-01).
@@ -55,6 +86,8 @@ If nothing else is specified use the default date format otherwise use the date
 
 ## Avoid the American date format: MM/DD/YYYY
 
+Avoid the American date format: MM/DD/YYYY
+
 While there's nothing inherently wrong with the American date format (MM/DD/YYYY), it's recommended to avoid it as the default for the following reasons:
 
 - Non-standard: It's not the international standard format defined by ISO 8601 (YYYY-MM-DD). This can lead to confusion and potential errors when exchanging data or collaborating with international teams.
@@ -68,6 +101,8 @@ Be aware that some date picker components might default to the American format (
 
 ## Use the Intl.DateTimeFormat to format dates for all locales
 
+Use the Intl.DateTimeFormat to format dates for all locales
+
 When formatting dates in React applications, you have two choices:
 
 - Vanilla Intl.DateTimeFormat: Use the standard function.
@@ -77,10 +112,14 @@ Regardless of the chosen method (direct function or ReactIntl), you'll have acce
 
 The default date and time format for the default locale "en-GB" looks like this: 27/05/2024
 
+27/05/2024
+
 ```jsx
 <FormattedDate value={new Date()} year='numeric' month='2-digit' day='2-digit' />
 ```
 
+<FormattedDate value={new Date()} year='numeric' month='2-digit' day='2-digit' />
+
 ```javascript
 const formatDate = (date, locale) => {
 const options = {
@@ -107,339 +146,1791 @@ console.log(`Locale: ${locale}, Formatted date: ${formattedDate}`);
 });
 ```
 
-**Formatting a date range**
+const
 
-For formatting a time range use the ReactIntl FormattedDateTimeRange component. Note that for dates in headlines or in sections, there is a dedicated format rule listed below.
+formatDate
 
-```jsx
-() => {
-const yesterday = new Date();
-yesterday.setDate(new Date().getDate() - 1);
+=
 
-return <FormattedDateTimeRange from={yesterday} to={new Date()} />;
-})
-```
+(
 
-## Date and time format
+date, locale
 
-None of the mentioned locales use a 12-hour format by default according to common usage. Here's a breakdown:
+)
 
-- All the listed locales (including en-GB) typically use the 24-hour format for displaying time.
-- While some countries might use a 12-hour format in informal contexts, the 24-hour format is generally preferred for official communication and technical applications.
+=>
 
-The default date and time format looks like this: 27/05/2024, 11:17
+{
 
-```jsx
-<FormattedDate value={new Date()} year='numeric' month='2-digit' day='2-digit' hour='2-digit' minute='2-digit' />
-```
+const
 
-```javascript
-const formatDateTime = (date, locale) => {
-const options = {
-year: 'numeric',
-month: '2-digit',
-day: '2-digit',
-hour: '2-digit',
-minute: '2-digit'
-};
+=
 
-const dateTimeFormatter = new Intl.DateTimeFormat(locale, options);
-return dateTimeFormatter.format(date);
-}
+{
 
-const locales = [
-'bg-BG', 'cs-CZ', 'da-DK', 'el-GR', 'es-ES', 'et-EE', 'fi-FI', 'fr-FR',
-'hr-HR', 'hu-HU', 'it-IT', 'lt-LT', 'lv-LV', 'nb-NO', 'nl-NL', 'pl-PL',
-'pt-PT', 'ro-RO', 'sk-SK', 'sl-SI', 'sv-SE', 'de-DE', 'pt-BR', 'en-GB'
-];
+year
 
-const today = new Date();
+:
 
-locales.forEach(locale => {
-const formattedDateTime = formatDateTime(today, locale);
-console.log(`Locale: ${locale}, Formatted date time: ${formattedDateTime}`);
-});
-```
+'numeric'
 
-## Formatting dates for headlines and sections
+,
 
-When formatting a date or a date range for a headline or a section, use the following format including the weekday if it's not today. If the date is today, add the word "today" instead of the weekday.
+month
 
-- Today, 24 May 2024
-- Thursday, 23 May 2024
-- 12 Feb - 16 Feb 2024
+:
 
-```jsx
-() => {
-const yesterday = new Date();
-yesterday.setDate(new Date().getDate() - 1);
+'2-digit'
 
-return (
-<>
-{'Today, '}
-<FormattedDate value={new Date()} year='numeric' month='short' day='numeric' />
-<br />
-<FormattedDate value={yesterday} year='numeric' month='short' day='numeric' weekday='long' />
-</>
-);
-})
-```
+,
 
-```javascript
-function formatDateWithWeekday(date) {
-const today = new Date();
-const isToday =
-today.getDate() === date.getDate() &&
-today.getMonth() === date.getMonth() &&
-today.getFullYear() === date.getFullYear();
+day
 
-const options = {
-day: 'numeric',
-month: 'short',
-year: 'numeric',
-weekday: isToday ? undefined : 'long',
-};
+:
+
+'2-digit'
 
-const dateTimeFormatter = new Intl.DateTimeFormat('en-GB', options);
-return isToday ? `Today, ${dateTimeFormatter.format(date)}` : dateTimeFormatter.format(date);
 }
 
-// Example for today
-const today = new Date();
-const formattedDate = formatDateWithWeekday(today);
-console.log(formattedDate);
+;
 
-// Example for yesterday
-const yesterday = new Date();
-yesterday.setDate(today.getDate() - 1); // Subtract 1 day from today
-const formattedDateYesterday = formatDateWithWeekday(yesterday);
-console.log(formattedDateYesterday);
-```
+const
 
-**Formatting a date range for headlines**
+=
 
-When the date rage has the same year for both dates, omit the year for the first date so it looks like this: 27 May - 28 May 2024
+new
 
-```jsx
-() => {
-const yesterday = new Date();
-yesterday.setDate(new Date().getDate() - 1);
+Intl.DateTimeFormat
 
-return (
-<>
-<FormattedDate value={yesterday} month='short' day='numeric' />
-{' - '}
-<FormattedDate value={new Date()} year='numeric' month='short' day='numeric' />
-</>
-);
-})
-```
+(
 
-```javascript
-function formatDateRange(startDate, endDate) {
-if (!(startDate instanceof Date) || !(endDate instanceof Date)) {
-throw new Error("Invalid input. Please provide valid Date objects.");
-}
+,
 
-const startDateFormatter = new Intl.DateTimeFormat('en-GB', {
-day: 'numeric',
-month: 'short'
-});
+)
 
-const endDateFormatter = new Intl.DateTimeFormat('en-GB', {
-day: 'numeric',
-month: 'short',
-year: 'numeric'
-});
+;
 
-const formattedStartDate = startDateFormatter.format(startDate);
-const formattedEndDate = endDateFormatter.format(endDate);
+return
+
+.
+
+format
+
+(
+
+)
+
+;
 
-return `${formattedStartDate} - ${formattedEndDate}`;
 }
 
-// Example usage
-const startDate = new Date(2024, 1, 12); // Feb 12, 2024
-const endDate = new Date(2024, 1, 16); // Feb 16, 2024
+const
 
-const formattedRange = formatDateRange(startDate, endDate);
-console.log("Formatted Date Range:", formattedRange);
-```
+=
 
-## Format durations
+[
 
-Use relative date and time formatting to help the understand quickly when an event happened or when a message has been sent:
+'bg-BG'
 
-- 3 days
-- 2h 32min
-- 45min
+,
 
-Best for: Short durations where hours and minutes are the most relevant unit.
+'cs-CZ'
 
-- 3d
-- 3m 20s
-- 10s
+,
 
-Best for: When space is limited, and clarity is still maintained. Example: In a compact playlist view displaying track lengths.
+'da-DK'
 
-```jsx
-<FormattedNumber value={2} />h <FormattedNumber value={45} />min
-```
+,
 
-## Relative date and time
+'el-GR'
 
-- "5 minutes ago"
-- "1 month ago"
-- "7 days ago"
-- "In 2 hours"
-- "Now" or "Just now" (for events within the last minute)
+,
 
-- Displaying when a notification arrived or a message was sent
-- Counting down to an upcoming event
-- Indicating how recently an item was updated
-- Benefits
-- Clear and concise for recent events Easy for users to understand the time difference
+'es-ES'
 
-- Clear and concise for recent events
-- Easy for users to understand the time difference
+,
 
-Using a relative time is simple by using the ReactIntl FormattedRelativeTime component.
+'et-EE'
 
-Example: now
+,
 
-```jsx
-<FormattedRelativeTime value={0} numeric='auto' updateIntervalInSeconds={1} />
-```
+'fi-FI'
 
-- "Yesterday"
-- "Yesterday, 10:39"
-- "Today, 12:17"
-- "Tomorrow"
-- "Last week"
-- "Next Friday"
-- "In 3 days"
+,
 
-- Displaying upcoming or past calendar events
-- Highlighting recent activity within a timeframe (e.g., "Top posts from the past week")
-- Providing deadlines or due dates in a user-friendly way
-- Benefits
-- Intuitive understanding for users familiar with common timeframes Reduces mental calculations for interpreting absolute dates
+'fr-FR'
 
-- Intuitive understanding for users familiar with common timeframes
-- Reduces mental calculations for interpreting absolute dates
+,
 
-The choice between relative and absolute formats depends on the context and desired level of precision:
+'hr-HR'
 
-- Use relative formats: When the time difference or date proximity is more important than the exact timestamp. Example: "Your flight departs in 2 hours" is more relevant than "Your flight departs at 14:30".
-- Use absolute formats: When precise timestamps are crucial, or for long time spans where relative terms become ambiguous.
+,
 
-Example for an upcoming event using ReactIntl: In 3 Days
+'hu-HU'
 
-```jsx
-<FormattedRelativeTime value={0} numeric='auto' updateIntervalInSeconds={1} />
-```
+,
 
-- Locale and cultural context: Relative terms like "yesterday" or "next week" might vary across languages and cultures. Consider user locale when implementing these formats.
-- Level of detail: You might need to adjust the granularity of relative formats. For example, "3 weeks ago" might be more appropriate than "21 days ago" depending on the context.
+'it-IT'
 
-## Time format including timezones
+,
 
-**Understanding time zones can be challenging**
+'lt-LT'
 
-While time zones are essential for global coordination, navigating them can be complex. Most users naturally think and schedule their activities in their local time zone. Concepts like Coordinated Universal Time (UTC) and daylight saving time (DST) can add layers of complexity.
+,
 
-This table lists the main timezones used across Europe, including their standard times and any daylight saving times. Note that some regions do not observe daylight saving time.
+'lv-LV'
 
-Studies show that users think in their local time - users often don’t think about UTC at all. Nor do they understand time zones, or the difference between UTC and GMT, or when and where daylight saving times are. But GMT is a more familiar time standard than UTC (even though UTC is the correct time standard). Since the UTC and GMT have the same offset and is widely more common in user interfaces, it is recommended to show GTM to the user instead of UTC.
+,
 
-For optimal clarity and consistency, it's best to display time zone offsets like GMT+1:00 without a blank space before the "+" symbol.
+'nb-NO'
 
-**Prioritize the user's local time**
+,
 
-To simplify the user's experience, we prioritize displaying times in your local time zone. This eliminates the need for manual conversions or deciphering time zone differences.
+'nl-NL'
 
-**Time zone transparency**
+,
 
-While we present times in the user's local time zone by default, we understand the importance of transparency. If needed, you can display information regarding the corresponding GMT time.
+'pl-PL'
 
-- Primary display: Show times in the user's local timezone for ease of use
-- Secondary display: Include the GMT offset in smaller text or tooltips to provide additional context
+,
 
-**Total duration matters**
+'pt-PT'
 
-For situations with multiple locations and time zones, providing a clear "total travel time" or "duration" alongside the individual departure and arrival times is incredibly helpful. This provides a comprehensive picture of the overall journey, just like the best travel itineraries do.
+,
 
-**Event-Based timezones**
+'ro-RO'
 
-For events, show both the local time and the event's original timezone. For example, "Meeting scheduled for 15:00 (CEST) / 16:00 (EEST)
+,
 
-**Localizing time displays for various European countries**
+'sk-SK'
 
-When localizing time displays for German-speaking users, remember to append the term "Uhr" (with a blank separator) after the hour when displaying times in a 24-hour format to ensure accurate and culturally appropriate representation.
+,
 
-This table provides a comprehensive overview of how to handle time display formats across various European countries, ensuring localized and accurate time representations.
+'sl-SI'
 
-- Constitution Day 23/05/2024, 3 days ago
-- Assumption Day 15/08/2024, in 64 days
+,
 
-## Number formats
+'sv-SE'
 
-## Number formats overview
+,
 
-This is a list of all supported langues and their respective country, decimal separator, thousand separator, and an example of a formatted number.
+'de-DE'
 
-**Best practices for number formatting**
+,
 
-- Locale awareness Always format numbers based on the user’s locale settings to ensure familiarity and reduce errors
-- Consistent use of delimiters Ensure the consistent use of decimal and thousand separators as per the locale’s conventions
-- Handling edge cases Be aware of edge cases like negative numbers, very large numbers, and numbers with many decimal places
-- Use libraries Utilize libraries like ReactIntl to handle number formatting, which provides built-in support for multiple locales and ensures correctness
+'pt-BR'
 
-```jsx
-const NumberFormattingExample = () => {
-const number = 1234567.89;
+,
 
-return (
-<IntlProvider locale="de-DE">
-<FormattedNumber value={number} />
-</IntlProvider>
-);
-};
-```
+'en-GB'
 
-In this example, the number 1234567.89 will be formatted as 1.234.567,89 in the German locale.
+]
 
-## Omit unused or meaningless decimals
+;
 
-When displaying numbers with units, it's often more readable and professional to omit unnecessary trailing zeros in decimal places. For instance, displaying "123 km" instead of "123.0 km" when the value is a whole number.
+const
 
-Additionally, decimals should be omitted in cases where they do not add meaningful information, such as in a fuel level "74,87 %".
+=
 
-```jsx
-<FormattedNumber
-value={123.0}
-minimumFractionDigits={0}
-maximumFractionDigits={2}
-style='unit'
-unit='kilometer'
-/>
-```
+new
 
-> 123 km 1,234 km Fuel level: 75%
+Date
 
-> 123.0 km 1234.0 km Fuel level: 74,87 %
+(
 
-## Formatting numbers with units
+)
 
-ReactIntl also supports formatting units like currency, percentages, and other measurements. Here are some examples on how to format numbers with units.
+;
 
-* Note: kilowatt-hour and megawatt-hour are not yet supported byIntl.NumberFormat(). Please append the unit manually. For more details, see here
+.
 
-```jsx
-const NumberExample = () => {
-const value = 1234.56;
-return (
-<table className='table table-condensed'>
+forEach
+
+(
+
+locale
+
+=>
+
+{
+
+const
+
+=
+
+formatDate
+
+(
+
+,
+
+)
+
+;
+
+.
+
+log
+
+(
+
+`Locale: ${locale}, Formatted date: ${formattedDate}`
+
+)
+
+;
+
+}
+
+)
+
+;
+
+**Formatting a date range**
+
+For formatting a time range use the ReactIntl FormattedDateTimeRange component. Note that for dates in headlines or in sections, there is a dedicated format rule listed below.
+
+```jsx
+() => {
+const yesterday = new Date();
+yesterday.setDate(new Date().getDate() - 1);
+
+return <FormattedDateTimeRange from={yesterday} to={new Date()} />;
+})
+```
+
+(
+
+)
+
+=>
+
+{
+
+const
+
+=
+
+new
+
+Date
+
+(
+
+)
+
+;
+
+.
+
+setDate
+
+(
+
+new
+
+Date
+
+(
+
+)
+
+.
+
+getDate
+
+(
+
+)
+
+-
+
+1
+
+)
+
+;
+
+return
+
+<FormattedDateTimeRange from={yesterday} to={new Date()} />
+
+;
+
+}
+
+)
+
+## Date and time format
+
+Date and time format
+
+None of the mentioned locales use a 12-hour format by default according to common usage. Here's a breakdown:
+
+- All the listed locales (including en-GB) typically use the 24-hour format for displaying time.
+- While some countries might use a 12-hour format in informal contexts, the 24-hour format is generally preferred for official communication and technical applications.
+
+The default date and time format looks like this: 27/05/2024, 11:17
+
+27/05/2024, 11:17
+
+```jsx
+<FormattedDate value={new Date()} year='numeric' month='2-digit' day='2-digit' hour='2-digit' minute='2-digit' />
+```
+
+<FormattedDate value={new Date()} year='numeric' month='2-digit' day='2-digit' hour='2-digit' minute='2-digit' />
+
+```javascript
+const formatDateTime = (date, locale) => {
+const options = {
+year: 'numeric',
+month: '2-digit',
+day: '2-digit',
+hour: '2-digit',
+minute: '2-digit'
+};
+
+const dateTimeFormatter = new Intl.DateTimeFormat(locale, options);
+return dateTimeFormatter.format(date);
+}
+
+const locales = [
+'bg-BG', 'cs-CZ', 'da-DK', 'el-GR', 'es-ES', 'et-EE', 'fi-FI', 'fr-FR',
+'hr-HR', 'hu-HU', 'it-IT', 'lt-LT', 'lv-LV', 'nb-NO', 'nl-NL', 'pl-PL',
+'pt-PT', 'ro-RO', 'sk-SK', 'sl-SI', 'sv-SE', 'de-DE', 'pt-BR', 'en-GB'
+];
+
+const today = new Date();
+
+locales.forEach(locale => {
+const formattedDateTime = formatDateTime(today, locale);
+console.log(`Locale: ${locale}, Formatted date time: ${formattedDateTime}`);
+});
+```
+
+const
+
+formatDateTime
+
+=
+
+(
+
+date, locale
+
+)
+
+=>
+
+{
+
+const
+
+=
+
+{
+
+year
+
+:
+
+'numeric'
+
+,
+
+month
+
+:
+
+'2-digit'
+
+,
+
+day
+
+:
+
+'2-digit'
+
+,
+
+hour
+
+:
+
+'2-digit'
+
+,
+
+minute
+
+:
+
+'2-digit'
+
+}
+
+;
+
+const
+
+=
+
+new
+
+Intl.DateTimeFormat
+
+(
+
+,
+
+)
+
+;
+
+return
+
+.
+
+format
+
+(
+
+)
+
+;
+
+}
+
+const
+
+=
+
+[
+
+'bg-BG'
+
+,
+
+'cs-CZ'
+
+,
+
+'da-DK'
+
+,
+
+'el-GR'
+
+,
+
+'es-ES'
+
+,
+
+'et-EE'
+
+,
+
+'fi-FI'
+
+,
+
+'fr-FR'
+
+,
+
+'hr-HR'
+
+,
+
+'hu-HU'
+
+,
+
+'it-IT'
+
+,
+
+'lt-LT'
+
+,
+
+'lv-LV'
+
+,
+
+'nb-NO'
+
+,
+
+'nl-NL'
+
+,
+
+'pl-PL'
+
+,
+
+'pt-PT'
+
+,
+
+'ro-RO'
+
+,
+
+'sk-SK'
+
+,
+
+'sl-SI'
+
+,
+
+'sv-SE'
+
+,
+
+'de-DE'
+
+,
+
+'pt-BR'
+
+,
+
+'en-GB'
+
+]
+
+;
+
+const
+
+=
+
+new
+
+Date
+
+(
+
+)
+
+;
+
+.
+
+forEach
+
+(
+
+locale
+
+=>
+
+{
+
+const
+
+=
+
+formatDateTime
+
+(
+
+,
+
+)
+
+;
+
+.
+
+log
+
+(
+
+`Locale: ${locale}, Formatted date time: ${formattedDateTime}`
+
+)
+
+;
+
+}
+
+)
+
+;
+
+## Formatting dates for headlines and sections
+
+Formatting dates for headlines and sections
+
+When formatting a date or a date range for a headline or a section, use the following format including the weekday if it's not today. If the date is today, add the word "today" instead of the weekday.
+
+- Today, 24 May 2024
+- Thursday, 23 May 2024
+- 12 Feb - 16 Feb 2024
+
+```jsx
+() => {
+const yesterday = new Date();
+yesterday.setDate(new Date().getDate() - 1);
+
+return (
+<>
+{'Today, '}
+<FormattedDate value={new Date()} year='numeric' month='short' day='numeric' />
+<br />
+<FormattedDate value={yesterday} year='numeric' month='short' day='numeric' weekday='long' />
+</>
+);
+})
+```
+
+(
+
+)
+
+=>
+
+{
+
+const
+
+=
+
+new
+
+Date
+
+(
+
+)
+
+;
+
+.
+
+setDate
+
+(
+
+new
+
+Date
+
+(
+
+)
+
+.
+
+getDate
+
+(
+
+)
+
+-
+
+1
+
+)
+
+;
+
+return
+
+(
+
+<>
+
+{
+
+'Today, '
+
+}
+
+<FormattedDate value={new Date()} year='numeric' month='short' day='numeric' />
+
+<br />
+
+<FormattedDate value={yesterday} year='numeric' month='short' day='numeric' weekday='long' />
+
+</>
+
+)
+
+;
+
+}
+
+)
+
+```javascript
+function formatDateWithWeekday(date) {
+const today = new Date();
+const isToday =
+today.getDate() === date.getDate() &&
+today.getMonth() === date.getMonth() &&
+today.getFullYear() === date.getFullYear();
+
+const options = {
+day: 'numeric',
+month: 'short',
+year: 'numeric',
+weekday: isToday ? undefined : 'long',
+};
+
+const dateTimeFormatter = new Intl.DateTimeFormat('en-GB', options);
+return isToday ? `Today, ${dateTimeFormatter.format(date)}` : dateTimeFormatter.format(date);
+}
+
+// Example for today
+const today = new Date();
+const formattedDate = formatDateWithWeekday(today);
+console.log(formattedDate);
+
+// Example for yesterday
+const yesterday = new Date();
+yesterday.setDate(today.getDate() - 1); // Subtract 1 day from today
+const formattedDateYesterday = formatDateWithWeekday(yesterday);
+console.log(formattedDateYesterday);
+```
+
+function
+
+formatDateWithWeekday
+
+(
+
+date
+
+)
+
+{
+
+const
+
+=
+
+new
+
+Date
+
+(
+
+)
+
+;
+
+const
+
+=
+
+.
+
+getDate
+
+(
+
+)
+
+===
+
+.
+
+getDate
+
+(
+
+)
+
+&&
+
+.
+
+getMonth
+
+(
+
+)
+
+===
+
+.
+
+getMonth
+
+(
+
+)
+
+&&
+
+.
+
+getFullYear
+
+(
+
+)
+
+===
+
+.
+
+getFullYear
+
+(
+
+)
+
+;
+
+const
+
+=
+
+{
+
+day
+
+:
+
+'numeric'
+
+,
+
+month
+
+:
+
+'short'
+
+,
+
+year
+
+:
+
+'numeric'
+
+,
+
+weekday
+
+:
+
+?
+
+undefined
+
+:
+
+'long'
+
+,
+
+}
+
+;
+
+const
+
+=
+
+new
+
+Intl.DateTimeFormat
+
+(
+
+'en-GB'
+
+,
+
+)
+
+;
+
+return
+
+?
+
+`Today, ${dateTimeFormatter.format(date)}`
+
+:
+
+.
+
+format
+
+(
+
+)
+
+;
+
+}
+
+// Example for today
+
+const
+
+=
+
+new
+
+Date
+
+(
+
+)
+
+;
+
+const
+
+=
+
+formatDateWithWeekday
+
+(
+
+)
+
+;
+
+.
+
+log
+
+(
+
+)
+
+;
+
+// Example for yesterday
+
+const
+
+=
+
+new
+
+Date
+
+(
+
+)
+
+;
+
+.
+
+setDate
+
+(
+
+.
+
+getDate
+
+(
+
+)
+
+-
+
+1
+
+)
+
+;
+
+// Subtract 1 day from today
+
+const
+
+=
+
+formatDateWithWeekday
+
+(
+
+)
+
+;
+
+.
+
+log
+
+(
+
+)
+
+;
+
+**Formatting a date range for headlines**
+
+When the date rage has the same year for both dates, omit the year for the first date so it looks like this: 27 May - 28 May 2024
+
+```jsx
+() => {
+const yesterday = new Date();
+yesterday.setDate(new Date().getDate() - 1);
+
+return (
+<>
+<FormattedDate value={yesterday} month='short' day='numeric' />
+{' - '}
+<FormattedDate value={new Date()} year='numeric' month='short' day='numeric' />
+</>
+);
+})
+```
+
+(
+
+)
+
+=>
+
+{
+
+const
+
+=
+
+new
+
+Date
+
+(
+
+)
+
+;
+
+.
+
+setDate
+
+(
+
+new
+
+Date
+
+(
+
+)
+
+.
+
+getDate
+
+(
+
+)
+
+-
+
+1
+
+)
+
+;
+
+return
+
+(
+
+<>
+
+<FormattedDate value={yesterday} month='short' day='numeric' />
+
+{
+
+' - '
+
+}
+
+<FormattedDate value={new Date()} year='numeric' month='short' day='numeric' />
+
+</>
+
+)
+
+;
+
+}
+
+)
+
+```javascript
+function formatDateRange(startDate, endDate) {
+if (!(startDate instanceof Date) || !(endDate instanceof Date)) {
+throw new Error("Invalid input. Please provide valid Date objects.");
+}
+
+const startDateFormatter = new Intl.DateTimeFormat('en-GB', {
+day: 'numeric',
+month: 'short'
+});
+
+const endDateFormatter = new Intl.DateTimeFormat('en-GB', {
+day: 'numeric',
+month: 'short',
+year: 'numeric'
+});
+
+const formattedStartDate = startDateFormatter.format(startDate);
+const formattedEndDate = endDateFormatter.format(endDate);
+
+return `${formattedStartDate} - ${formattedEndDate}`;
+}
+
+// Example usage
+const startDate = new Date(2024, 1, 12); // Feb 12, 2024
+const endDate = new Date(2024, 1, 16); // Feb 16, 2024
+
+const formattedRange = formatDateRange(startDate, endDate);
+console.log("Formatted Date Range:", formattedRange);
+```
+
+function
+
+formatDateRange
+
+(
+
+startDate, endDate
+
+)
+
+{
+
+if
+
+(
+
+!
+
+(
+
+instanceof
+
+Date
+
+)
+
+||
+
+!
+
+(
+
+instanceof
+
+Date
+
+)
+
+)
+
+{
+
+throw
+
+new
+
+Error
+
+(
+
+"Invalid input. Please provide valid Date objects."
+
+)
+
+;
+
+}
+
+const
+
+=
+
+new
+
+Intl.DateTimeFormat
+
+(
+
+'en-GB'
+
+,
+
+{
+
+day
+
+:
+
+'numeric'
+
+,
+
+month
+
+:
+
+'short'
+
+}
+
+)
+
+;
+
+const
+
+=
+
+new
+
+Intl.DateTimeFormat
+
+(
+
+'en-GB'
+
+,
+
+{
+
+day
+
+:
+
+'numeric'
+
+,
+
+month
+
+:
+
+'short'
+
+,
+
+year
+
+:
+
+'numeric'
+
+}
+
+)
+
+;
+
+const
+
+=
+
+.
+
+format
+
+(
+
+)
+
+;
+
+const
+
+=
+
+.
+
+format
+
+(
+
+)
+
+;
+
+return
+
+`${formattedStartDate} - ${formattedEndDate}`
+
+;
+
+}
+
+// Example usage
+
+const
+
+=
+
+new
+
+Date
+
+(
+
+2024
+
+,
+
+1
+
+,
+
+12
+
+)
+
+;
+
+// Feb 12, 2024
+
+const
+
+=
+
+new
+
+Date
+
+(
+
+2024
+
+,
+
+1
+
+,
+
+16
+
+)
+
+;
+
+// Feb 16, 2024
+
+const
+
+=
+
+formatDateRange
+
+(
+
+,
+
+)
+
+;
+
+.
+
+log
+
+(
+
+"Formatted Date Range:"
+
+,
+
+)
+
+;
+
+## Format durations
+
+Format durations
+
+Use relative date and time formatting to help the understand quickly when an event happened or when a message has been sent:
+
+- 3 days
+- 2h 32min
+- 45min
+
+Best for: Short durations where hours and minutes are the most relevant unit.
+
+- 3d
+- 3m 20s
+- 10s
+
+Best for: When space is limited, and clarity is still maintained. Example: In a compact playlist view displaying track lengths.
+
+```jsx
+<FormattedNumber value={2} />h <FormattedNumber value={45} />min
+```
+
+<FormattedNumber value={2} />
+
+<FormattedNumber value={45} />
+
+See more information in the section "Formatting units with numbers"
+
+## Relative date and time
+
+Relative date and time
+
+- "5 minutes ago"
+- "1 month ago"
+- "7 days ago"
+- "In 2 hours"
+- "Now" or "Just now" (for events within the last minute)
+
+- Displaying when a notification arrived or a message was sent
+- Counting down to an upcoming event
+- Indicating how recently an item was updated
+- Benefits
+- Clear and concise for recent events Easy for users to understand the time difference
+
+- Clear and concise for recent events
+- Easy for users to understand the time difference
+
+Using a relative time is simple by using the ReactIntl FormattedRelativeTime component.
+
+Example: now
+
+```jsx
+<FormattedRelativeTime value={0} numeric='auto' updateIntervalInSeconds={1} />
+```
+
+<FormattedRelativeTime value={0} numeric='auto' updateIntervalInSeconds={1} />
+
+- "Yesterday"
+- "Yesterday, 10:39"
+- "Today, 12:17"
+- "Tomorrow"
+- "Last week"
+- "Next Friday"
+- "In 3 days"
+
+- Displaying upcoming or past calendar events
+- Highlighting recent activity within a timeframe (e.g., "Top posts from the past week")
+- Providing deadlines or due dates in a user-friendly way
+- Benefits
+- Intuitive understanding for users familiar with common timeframes Reduces mental calculations for interpreting absolute dates
+
+- Intuitive understanding for users familiar with common timeframes
+- Reduces mental calculations for interpreting absolute dates
+
+The choice between relative and absolute formats depends on the context and desired level of precision:
+
+- Use relative formats: When the time difference or date proximity is more important than the exact timestamp. Example: "Your flight departs in 2 hours" is more relevant than "Your flight departs at 14:30".
+- Use absolute formats: When precise timestamps are crucial, or for long time spans where relative terms become ambiguous.
+
+Example for an upcoming event using ReactIntl: In 3 Days
+
+in 3 days
+
+```jsx
+<FormattedRelativeTime value={0} numeric='auto' updateIntervalInSeconds={1} />
+```
+
+<FormattedRelativeTime value={0} numeric='auto' updateIntervalInSeconds={1} />
+
+- Locale and cultural context: Relative terms like "yesterday" or "next week" might vary across languages and cultures. Consider user locale when implementing these formats.
+- Level of detail: You might need to adjust the granularity of relative formats. For example, "3 weeks ago" might be more appropriate than "21 days ago" depending on the context.
+
+## Time format including timezones
+
+Time format including timezones
+
+**Understanding time zones can be challenging**
+
+While time zones are essential for global coordination, navigating them can be complex. Most users naturally think and schedule their activities in their local time zone. Concepts like Coordinated Universal Time (UTC) and daylight saving time (DST) can add layers of complexity.
+
+This table lists the main timezones used across Europe, including their standard times and any daylight saving times. Note that some regions do not observe daylight saving time.
+
+| Region | Standard Time (ST) | Daylight Saving Time (DST) |
+| --- | --- | --- |
+| Western European Time (WET) | GMT+0 | Western European Summer Time (WEST, GMT+1) |
+| Central European Time (CET) | GMT+1 | Central European Summer Time (CEST, GMT+2) |
+| Eastern European Time (EET) | GMT+2 | Eastern European Summer Time (EEST, GMT+3) |
+| Greenwich Mean Time (GMT) | GMT+0 | British Summer Time (BST, GMT+1) |
+| Further-Eastern European Time (FET) | GMT+3 | No DST |
+| Kaliningrad Time (KALT) | GMT+2 | No DST |
+| Moscow Time (MSK) | GMT+3 | No DST |
+| Turkey Time (TRT) | GMT+3 | No DST |
+| Armenia Time (AMT) | GMT+4 | No DST |
+| Azerbaijan Time (AZT) | GMT+4 | Azerbaijan Summer Time (AZST, GMT+5) |
+| Georgia Time (GET) | GMT+4 | No DST |
+
+Studies show that users think in their local time - users often don’t think about UTC at all. Nor do they understand time zones, or the difference between UTC and GMT, or when and where daylight saving times are. But GMT is a more familiar time standard than UTC (even though UTC is the correct time standard). Since the UTC and GMT have the same offset and is widely more common in user interfaces, it is recommended to show GTM to the user instead of UTC.
+
+For optimal clarity and consistency, it's best to display time zone offsets like GMT+1:00 without a blank space before the "+" symbol.
+
+**Prioritize the user's local time**
+
+To simplify the user's experience, we prioritize displaying times in your local time zone. This eliminates the need for manual conversions or deciphering time zone differences.
+
+**Time zone transparency**
+
+While we present times in the user's local time zone by default, we understand the importance of transparency. If needed, you can display information regarding the corresponding GMT time.
+
+- Primary display: Show times in the user's local timezone for ease of use
+- Secondary display: Include the GMT offset in smaller text or tooltips to provide additional context
+
+**Total duration matters**
+
+For situations with multiple locations and time zones, providing a clear "total travel time" or "duration" alongside the individual departure and arrival times is incredibly helpful. This provides a comprehensive picture of the overall journey, just like the best travel itineraries do.
+
+**Event-Based timezones**
+
+For events, show both the local time and the event's original timezone. For example, "Meeting scheduled for 15:00 (CEST) / 16:00 (EEST)
+
+Meeting scheduled for 15:00 (CEST) / 16:00 (EEST)
+
+**Localizing time displays for various European countries**
+
+When localizing time displays for German-speaking users, remember to append the term "Uhr" (with a blank separator) after the hour when displaying times in a 24-hour format to ensure accurate and culturally appropriate representation.
+
+This table provides a comprehensive overview of how to handle time display formats across various European countries, ensuring localized and accurate time representations.
+
+| Locale | Country | Time format | Standard Time (ST) | Daylight Saving Time (DST) |
+| --- | --- | --- | --- | --- |
+| bg-BG | Bulgaria | 24-hour | 16:00 (EET) | 17:00 (EEST) |
+| cs-CZ | Czech Republic | 24-hour | 15:00 (CET) | 16:00 (CEST) |
+| da-DK | Denmark | 24-hour | 15:00 (CET) | 16:00 (CEST) |
+| de-DE | Germany | 24-hour | 15:00 Uhr (CET) | 16:00 Uhr (CEST) |
+| el-GR | Greece | 24-hour | 16:00 (EET) | 17:00 (EEST) |
+| en-GB | United Kingdom | 24-hour | 15:00 (GMT) | 16:00 (BST) |
+| es-ES | Spain | 24-hour | 15:00 (CET) | 16:00 (CEST) |
+| et-EE | Estonia | 24-hour | 16:00 (EET) | 17:00 (EEST) |
+| fi-FI | Finland | 24-hour | 16:00 (EET) | 17:00 (EEST) |
+| fr-FR | France | 24-hour | 15:00 (CET) | 16:00 (CEST) |
+| hr-HR | Croatia | 24-hour | 15:00 (CET) | 16:00 (CEST) |
+| hu-HU | Hungary | 24-hour | 15:00 (CET) | 16:00 (CEST) |
+| it-IT | Italy | 24-hour | 15:00 (CET) | 16:00 (CEST) |
+| lt-LT | Lithuania | 24-hour | 16:00 (EET) | 17:00 (EEST) |
+| lv-LV | Latvia | 24-hour | 16:00 (EET) | 17:00 (EEST) |
+| nb-NO | Norway | 24-hour | 15:00 (CET) | 16:00 (CEST) |
+| nl-NL | Netherlands | 24-hour | 15:00 (CET) | 16:00 (CEST) |
+| pl-PL | Poland | 24-hour | 15:00 (CET) | 16:00 (CEST) |
+| pt-BR | Brazil | 24-hour | 15:00 (BRT) | 16:00 (BRST) |
+| pt-PT | Portugal | 24-hour | 15:00 (WET) | 16:00 (WEST) |
+| ro-RO | Romania | 24-hour | 16:00 (EET) | 17:00 (EEST) |
+| sk-SK | Slovakia | 24-hour | 15:00 (CET) | 16:00 (CEST) |
+| sl-SI | Slovenia | 24-hour | 15:00 (CET) | 16:00 (CEST) |
+| sv-SE | Sweden | 24-hour | 15:00 (CET) | 16:00 (CEST) |
+
+Today, 1 Jun 2024Export
+
+No tasks for todayThere are no tasks created for today. Enjoy your day.
+
+Public holidays
+
+- Constitution Day 23/05/2024, 3 days ago
+- Assumption Day 15/08/2024, in 64 days
+
+Constitution Day23/05/2024, 3 days ago
+
+Assumption Day15/08/2024, in 64 days
+
+27 May - 30 May 2024
+
+30/05/2024
+
+| Username | Working hours | Total working time | Last Check-In time |
+| --- | --- | --- | --- |
+| Sarah Jones | 11:00 - 19:00 | 8h | 20 minutes ago |
+| David Miller | 08:00 - 14:30 | 6h 30min | 10 hours ago |
+| David Ripley | 10:45 - 18:15 | 7h 30min | 1 hour ago |
+
+29/05/2024
+
+## Number formats
+
+## Number formats overview
+
+Number formats overview
+
+This is a list of all supported langues and their respective country, decimal separator, thousand separator, and an example of a formatted number.
+
+| Locale | Country | Decimal Separator | Thousand Separator | Example |
+| --- | --- | --- | --- | --- |
+| bg-BG | Bulgaria | Comma (,) | Space ( ) | 1 234 567,89 |
+| cs-CZ | Czech Republic | Comma (,) | Space ( ) | 1 234 567,89 |
+| da-DK | Denmark | Comma (,) | Period (.) | 1.234.567,89 |
+| de-DE | Germany | Comma (,) | Period (.) | 1.234.567,89 |
+| el-GR | Greece | Comma (,) | Period (.) | 1.234.567,89 |
+| en-GB | United Kingdom | Period (.) | Comma (,) | 1,234,567.89 |
+| es-ES | Spain | Comma (,) | Period (.) | 1.234.567,89 |
+| et-EE | Estonia | Comma (,) | Space ( ) | 1 234 567,89 |
+| fi-FI | Finland | Comma (,) | Space ( ) | 1 234 567,89 |
+| fr-FR | France | Comma (,) | Space ( ) | 1 234 567,89 |
+| hr-HR | Croatia | Comma (,) | Period (.) | 1.234.567,89 |
+| hu-HU | Hungary | Comma (,) | Space ( ) | 1 234 567,89 |
+| it-IT | Italy | Comma (,) | Dot (.) | 1.234.567,89 |
+| lt-LT | Lithuania | Comma (,) | Space ( ) | 1 234 567,89 |
+| lv-LV | Latvia | Comma (,) | Space ( ) | 1 234 567,89 |
+| nb-NO | Norway | Comma (,) | Space ( ) | 1 234 567,89 |
+| nl-NL | Netherlands | Comma (,) | Period (.) | 1.234.567,89 |
+| pl-PL | Poland | Comma (,) | Space ( ) | 1 234 567,89 |
+| pt-BR | Brazil | Comma (,) | Period (.) | 1.234.567,89 |
+| pt-PT | Portugal | Comma (,) | Period (.) | 1.234.567,89 |
+| ro-RO | Romania | Comma (,) | Period (.) | 1.234.567,89 |
+| sk-SK | Slovakia | Comma (,) | Space ( ) | 1 234 567,89 |
+| sl-SI | Slovenia | Comma (,) | Period (.) | 1.234.567,89 |
+| sv-SE | Sweden | Comma (,) | Space ( ) | 1 234 567,89 |
+
+**Best practices for number formatting**
+
+- Locale awareness Always format numbers based on the user’s locale settings to ensure familiarity and reduce errors
+- Consistent use of delimiters Ensure the consistent use of decimal and thousand separators as per the locale’s conventions
+- Handling edge cases Be aware of edge cases like negative numbers, very large numbers, and numbers with many decimal places
+- Use libraries Utilize libraries like ReactIntl to handle number formatting, which provides built-in support for multiple locales and ensures correctness
+
+```jsx
+const NumberFormattingExample = () => {
+const number = 1234567.89;
+
+return (
+<IntlProvider locale="de-DE">
+<FormattedNumber value={number} />
+</IntlProvider>
+);
+};
+```
+
+const
+
+NumberFormattingExample
+
+=
+
+(
+
+)
+
+=>
+
+{
+
+const
+
+=
+
+1234567.89
+
+;
+
+return
+
+(
+
+<IntlProvider locale="de-DE">
+
+<FormattedNumber value={number} />
+
+</IntlProvider>
+
+)
+
+;
+
+}
+
+;
+
+In this example, the number 1234567.89 will be formatted as 1.234.567,89 in the German locale.
+
+## Omit unused or meaningless decimals
+
+Omit unused or meaningless decimals
+
+When displaying numbers with units, it's often more readable and professional to omit unnecessary trailing zeros in decimal places. For instance, displaying "123 km" instead of "123.0 km" when the value is a whole number.
+
+Additionally, decimals should be omitted in cases where they do not add meaningful information, such as in a fuel level "74,87 %".
+
+```jsx
+<FormattedNumber
+value={123.0}
+minimumFractionDigits={0}
+maximumFractionDigits={2}
+style='unit'
+unit='kilometer'
+/>
+```
+
+<FormattedNumber value={123.0} minimumFractionDigits={0} maximumFractionDigits={2} style='unit' unit='kilometer' />
+
+Example
+
+> 123 km 1,234 km Fuel level: 75%
+
+> 123.0 km 1234.0 km Fuel level: 74,87 %
+
+## Formatting numbers with units
+
+Formatting numbers with units
+
+ReactIntl also supports formatting units like currency, percentages, and other measurements. Here are some examples on how to format numbers with units.
+
+| en-GB |  |
+| --- | --- |
+| Kilograms | 1,234.56 kg |
+| Kilometer | 1,234.56 km |
+| Kilometer (long) | 1,234.56 kilometres |
+| Meters | 1,234.56 m |
+| Kilowatt-hour* | 1,234.56 kWh |
+| Megawatt-hour* | 1,234.56 MWh |
+| Seconds (long) | 45 seconds |
+| Minutes (long) | 12 minutes |
+| Centimeters | 34 cm |
+| Percent | 12% |
+| Euro | €1,234.56 |
+| Kilobyte | 1,000kB |
+| Celsius | 27°C |
+| Duration | 2h 45min |
+
+| de-DE |  |
+| --- | --- |
+| Kilograms | 1.234,56 kg |
+| Kilometer | 1.234,56 km |
+| Kilometer (long) | 1.234,56 Kilometer |
+| Meters | 1.234,56 m |
+| Square meters | 1.234,56 m2 |
+| Cubic meters | 1.234,56 m3 |
+| Kilowatt-hour* | 1.234,56 kWh |
+| Megawatt-hour* | 1.234,56 MWh |
+| Seconds (long) | 45 Sekunden |
+| Minutes (long) | 12 Minuten |
+| Centimeters | 34 cm |
+| Percent | 12 % |
+| Euro | 1.234,56 € |
+| Kilobyte | 1.000 kB |
+| Celsius | 27 °C |
+| Duration | 2h 45min |
+
+* Note: kilowatt-hour and megawatt-hour are not yet supported byIntl.NumberFormat(). Please append the unit manually. For more details, see here
+
+```jsx
+const NumberExample = () => {
+const value = 1234.56;
+return (
+<table className='table table-condensed'>
 <tbody>
 <tr>
 <td>Kilograms</td>
@@ -478,47 +1969,285 @@ return (
 </td>
 </tr>
 <tr>
-<td>Centimeters</td>
+<td>Centimeters</td>
+<td>
+<FormattedNumber value={34} style='unit' unit='centimeter' />
+</td>
+</tr>
+<tr>
+<td>Percent</td>
+<td>
+<FormattedNumber value={0.1234} style='percent' />
+</td>
+</tr>
+<tr>
+<td>Euro</td>
+<td>
+<FormattedNumber value={value} style='currency' currency='EUR' />
+</td>
+</tr>
+<tr>
+<td>Kilobyte</td>
+<td>
+<FormattedNumber value={1000} style='unit' unit='kilobyte' unitDisplay='narrow' />
+</td>
+</tr>
+<tr>
+<td>Celsius</td>
+<td>
+<FormattedNumber value={27} style='unit' unit='celsius' unitDisplay='narrow' />
+</td>
+</tr>
+<tr>
+<td>Duration</td>
+<td>
+<FormattedNumber value={2} />h <FormattedNumber value={45} />
+min
+</td>
+</tr>
+</tbody>
+</table>
+)
+};
+```
+
+const
+
+NumberExample
+
+=
+
+(
+
+)
+
+=>
+
+{
+
+const
+
+=
+
+1234.56
+
+;
+
+return
+
+(
+
+<table className='table table-condensed'>
+
+<tbody>
+
+<tr>
+
+<td>
+
+Kilograms
+
+</td>
+
+<td>
+
+<FormattedNumber value={value} style='unit' unit='kilogram' />
+
+</td>
+
+</tr>
+
+<tr>
+
+<td>
+
+Kilometer
+
+</td>
+
+<td>
+
+<FormattedNumber value={value} style='unit' unit='kilometer' />
+
+</td>
+
+</tr>
+
+<tr>
+
+<td>
+
+Kilometer (long)
+
+</td>
+
+<td>
+
+<FormattedNumber value={value} style='unit' unit='kilometer' unitDisplay='long' />
+
+</td>
+
+</tr>
+
+<tr>
+
+<td>
+
+Meters
+
+</td>
+
+<td>
+
+<FormattedNumber value={value} style='unit' unit='meter' />
+
+</td>
+
+</tr>
+
+<tr>
+
+<td>
+
+Seconds (long)
+
+</td>
+
+<td>
+
+<FormattedNumber value={45} style='unit' unit='second' unitDisplay='long' />
+
+</td>
+
+</tr>
+
+<tr>
+
+<td>
+
+Minutes (long)
+
+</td>
+
+<td>
+
+<FormattedNumber value={12} style='unit' unit='minute' unitDisplay='long' />
+
+</td>
+
+</tr>
+
+<tr>
+
+<td>
+
+Centimeters
+
+</td>
+
 <td>
+
 <FormattedNumber value={34} style='unit' unit='centimeter' />
+
 </td>
+
 </tr>
+
 <tr>
-<td>Percent</td>
+
+<td>
+
+Percent
+
+</td>
+
 <td>
+
 <FormattedNumber value={0.1234} style='percent' />
+
 </td>
+
 </tr>
+
 <tr>
-<td>Euro</td>
+
+<td>
+
+Euro
+
+</td>
+
 <td>
+
 <FormattedNumber value={value} style='currency' currency='EUR' />
+
 </td>
+
 </tr>
+
 <tr>
-<td>Kilobyte</td>
+
 <td>
+
+Kilobyte
+
+</td>
+
+<td>
+
 <FormattedNumber value={1000} style='unit' unit='kilobyte' unitDisplay='narrow' />
+
 </td>
+
 </tr>
+
 <tr>
-<td>Celsius</td>
+
+<td>
+
+Celsius
+
+</td>
+
 <td>
+
 <FormattedNumber value={27} style='unit' unit='celsius' unitDisplay='narrow' />
+
 </td>
+
 </tr>
+
 <tr>
-<td>Duration</td>
+
 <td>
-<FormattedNumber value={2} />h <FormattedNumber value={45} />
+
+Duration
+
+</td>
+
+<td>
+
+<FormattedNumber value={2} />
+
+h
+
+<FormattedNumber value={45} />
+
 min
+
 </td>
+
 </tr>
+
 </tbody>
+
 </table>
+
 )
-};
-```
+
+}
+
+;
 
 In Germany, the correct unit format for kilogram is "kg" with a lowercase "k" and "g". It follows the international standard for unit symbols defined by the International System of Units (SI).
 
@@ -529,10 +2258,16 @@ Here's an example of the correct usage:
 
 The unit symbol should always be in lowercase and a space should be used between the number and the unit symbol
 
+> Note: When formatting durations in a short format, ReactIntl does not follow the more common style defined in the section "Format durations" especially for locales like de-DE. In this case we need to combine the FormattedNumber with a custom unit.
+
 ```jsx
 <FormattedNumber value={2} />h <FormattedNumber value={45} />min
 ```
 
+<FormattedNumber value={2} />
+
+<FormattedNumber value={45} />
+
 ```tsx
 type FormattedDuration = {
 hours?: number,
@@ -582,4 +2317,276 @@ return (
 </div>
 );
 };
-```
+```
+
+type
+
+FormattedDuration
+
+=
+
+{
+
+?
+
+:
+
+number
+
+,
+
+?
+
+:
+
+number
+
+,
+
+?
+
+:
+
+number
+
+,
+
+}
+
+;
+
+const
+
+FormattedDuration
+
+=
+
+(
+
+{
+
+,
+
+,
+
+}
+
+)
+
+=>
+
+{
+
+const
+
+=
+
+>
+
+0
+
+;
+
+const
+
+=
+
+>
+
+0
+
+;
+
+const
+
+=
+
+>
+
+0
+
+;
+
+return
+
+(
+
+<div>
+
+{
+
+&&
+
+(
+
+<>
+
+<FormattedNumber value={hours} />
+
+h
+
+{
+
+&&
+
+' '
+
+}
+
+</>
+
+)
+
+}
+
+{
+
+&&
+
+(
+
+<>
+
+<FormattedNumber value={minutes} />
+
+min
+
+{
+
+&&
+
+' '
+
+}
+
+</>
+
+)
+
+}
+
+{
+
+&&
+
+(
+
+<>
+
+<FormattedNumber value={seconds} />
+
+s
+
+</>
+
+)
+
+}
+
+</div>
+
+)
+
+;
+
+}
+
+;
+
+// Example Usage
+
+const
+
+App
+
+=
+
+(
+
+)
+
+=>
+
+{
+
+const
+
+=
+
+{
+
+:
+
+8
+
+,
+
+:
+
+45
+
+}
+
+;
+
+const
+
+=
+
+{
+
+:
+
+0
+
+,
+
+:
+
+56
+
+}
+
+;
+
+const
+
+=
+
+{
+
+:
+
+1
+
+,
+
+:
+
+23
+
+}
+
+;
+
+return
+
+(
+
+<div>
+
+<FormattedDuration {...duration1} />
+
+<FormattedDuration {...duration2} />
+
+<FormattedDuration {...duration3} />
+
+</div>
+
+)
+
+;
+
+}
+
+;