diff --git a/docs/widgets/services/customapi.md b/docs/widgets/services/customapi.md index 85ff4fe7b..2834ea280 100644 --- 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 index 6852346ba..e5bc98bd3 100644 --- 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 index 9c2030442..3a3f88f1d 100644 --- 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 index 48152a9ec..a9e0890d4 100644 --- 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