Feature: add date formatting option in custom api (#2228)

docs/widgets/services/customapi.md

@@ -31,9 +31,13 @@ widget:
             another: key3
       label: Field 3
       format: percent # optional - defaults to text
+    - field: key # needs to be YAML string or object
+      label: Field 4
+      format: date # optional - defaults to text
+      dateStyle: long # optional - defaults to "long". Allowed values: `["full", "long", "medium", "short"]`.
 ```
 
-Supported formats for the values are `text`, `number`, `float`, `percent`, `bytes` and `bitrate`.
+Supported formats for the values are `text`, `number`, `float`, `percent`, `bytes`, `bitrate` and `date`.
 
 ## Example
 

next-i18next.config.js

@@ -123,6 +123,9 @@ module.exports = {
         i18next.services.formatter.add("percent", (value, lng, options) =>
           new Intl.NumberFormat(lng, { style: "percent", ...options }).format(parseFloat(value) / 100.0),
         );
+        i18next.services.formatter.add("date", (value, lng, options) =>
+          new Intl.DateTimeFormat(lng, { ...options }).format(new Date(value)),
+        );
       },
       type: "3rdParty",
     },

public/locales/en/common.json

@@ -10,7 +10,8 @@
         "bibitrate": "{{value, rate(bits: true; binary: true)}}",
         "percent": "{{value, percent}}",
         "number": "{{value, number}}",
-        "ms": "{{value, number}}"
+        "ms": "{{value, number}}",
+        "date": "{{value, date}}"
     },
     "widget": {
         "missing_type": "Missing Widget Type: {{type}}",

src/widgets/customapi/component.jsx

@@ -69,6 +69,9 @@ function formatValue(t, mapping, rawValue) {
     case "bitrate":
       value = t("common.bitrate", { value });
       break;
+    case "date":
+      value = t("common.date", { value, dateStyle: mapping?.dateStyle ?? "long" });
+      break;
     case "text":
     default:
     // nothing