Enhancement: locale option for date & relativeDate format (#2658)

docs/widgets/services/customapi.md

@@ -34,11 +34,20 @@ widget:
     - field: key # needs to be YAML string or object
       label: Field 4
       format: date # optional - defaults to text
+      locale: nl # optional
       dateStyle: long # optional - defaults to "long". Allowed values: `["full", "long", "medium", "short"]`.
       timeStyle: medium # optional - Allowed values: `["full", "long", "medium", "short"]`.
+    - field: key # needs to be YAML string or object
+      label: Field 5
+      format: relativeDate # optional - defaults to text
+      locale: nl # optional
+      style: short # optional - defaults to "long". Allowed values: `["long", "short", "narrow"]`.
+      numeric: auto # optional - defaults to "always". Allowed values `["always", "auto"]`.
 ```
 
-Supported formats for the values are `text`, `number`, `float`, `percent`, `bytes`, `bitrate` and `date`.
+Supported formats for the values are `text`, `number`, `float`, `percent`, `bytes`, `bitrate`, `date` and `relativeDate`.
+
+The `dateStyle` and `timeStyle` options of the `date` format are passed directly to [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) and the `style` and `numeric` options of `relativeDate` are passed to [Intl.RelativeTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/RelativeTimeFormat).
 
 ## Example
 

next-i18next.config.js

@@ -100,6 +100,17 @@ function uptime(uptimeInSeconds, i18next) {
   return (moDisplay + dDisplay + hDisplay + mDisplay + sDisplay).replace(/,\s*$/, "");
 }
 
+function relativeDate(date, formatter) {
+  const cutoffs = [60, 3600, 86400, 86400 * 7, 86400 * 30, 86400 * 365, Infinity];
+  const units = ["second", "minute", "hour", "day", "week", "month", "year"];
+
+  const delta = Math.round((date.getTime() - Date.now()) / 1000);
+  const unitIndex = cutoffs.findIndex((cutoff) => cutoff > Math.abs(delta));
+  const divisor = unitIndex ? cutoffs[unitIndex - 1] : 1;
+
+  return formatter.format(Math.floor(delta / divisor), units[unitIndex]);
+}
+
 module.exports = {
   i18n: {
     defaultLocale: "en",
@@ -142,6 +153,9 @@ module.exports = {
         i18next.services.formatter.add("date", (value, lng, options) =>
           new Intl.DateTimeFormat(lng, { ...options }).format(new Date(value)),
         );
+        i18next.services.formatter.add("relativeDate", (value, lng, options) =>
+          relativeDate(new Date(value), new Intl.RelativeTimeFormat(lng, { ...options })),
+        );
         i18next.services.formatter.add("uptime", (value, lng) => uptime(value, i18next));
       },
       type: "3rdParty",

public/locales/en/common.json

@@ -12,6 +12,7 @@
         "number": "{{value, number}}",
         "ms": "{{value, number}}",
         "date": "{{value, date}}",
+        "relativeDate": "{{value, relativeDate}}",
         "uptime": "{{value, uptime}}",
         "months": "mo",
         "days": "d",

src/widgets/customapi/component.jsx

@@ -70,7 +70,20 @@ function formatValue(t, mapping, rawValue) {
       value = t("common.bitrate", { value });
       break;
     case "date":
-      value = t("common.date", { value, dateStyle: mapping?.dateStyle ?? "long", timeStyle: mapping?.timeStyle });
+      value = t("common.date", {
+        value,
+        lng: mapping?.locale,
+        dateStyle: mapping?.dateStyle ?? "long",
+        timeStyle: mapping?.timeStyle,
+      });
+      break;
+    case "relativeDate":
+      value = t("common.relativeDate", {
+        value,
+        lng: mapping?.locale,
+        style: mapping?.style,
+        numeric: mapping?.numeric,
+      });
       break;
     case "text":
     default: