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

gethomepage · Oct 23, 2023 · 3c4818a · 3c4818a
1 parent f773e02
commit 3c4818a
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 2 deletions.
diff --git a/docs/widgets/services/customapi.md b/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
 

diff --git a/next-i18next.config.js b/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",
     },

diff --git a/public/locales/en/common.json b/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}}",

diff --git a/src/widgets/customapi/component.jsx b/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