From be603badfed63ad7583a5265bef3b9e85f6b6b61 Mon Sep 17 00:00:00 2001
From: Jack Weller <97435840+jackwellerreal@users.noreply.github.com>
Date: Tue, 4 Feb 2025 04:33:29 +1000
Subject: [PATCH] feat: custom time/date format in clock widget (#2180)

* feat: custom time/date format in clock widget

* feat: add customFormat variables for old-imports

* fix: added missing comma for old-import

---------

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>
---
 packages/old-import/src/widgets/options.ts |  2 ++
 packages/translation/src/lang/en.json      |  8 ++++++++
 packages/widgets/src/clock/component.tsx   | 10 ++++++++--
 packages/widgets/src/clock/index.ts        |  8 ++++++++
 4 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/packages/old-import/src/widgets/options.ts b/packages/old-import/src/widgets/options.ts
index 3e2d27b4e..d8a84e95e 100644
--- a/packages/old-import/src/widgets/options.ts
+++ b/packages/old-import/src/widgets/options.ts
@@ -56,6 +56,8 @@ const optionMapping: OptionMapping = {
     showSeconds: () => undefined,
     timezone: (oldOptions) => oldOptions.timezone,
     useCustomTimezone: () => true,
+    customTimeFormat: () => undefined,
+    customDateFormat: () => undefined,
   },
   downloads: {
     activeTorrentThreshold: (oldOptions) =>
diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json
index 6d45df73f..a940087c8 100644
--- a/packages/translation/src/lang/en.json
+++ b/packages/translation/src/lang/en.json
@@ -1193,6 +1193,14 @@
         "dateFormat": {
           "label": "Date Format",
           "description": "How the date should look like"
+        },
+        "customTimeFormat": {
+          "label": "Custom time format",
+          "description": "Use ISO 8601 to format time (this will override other options)"
+        },
+        "customDateFormat": {
+          "label": "Custom date format",
+          "description": "Use ISO 8601 to format date (this will override other options)"
         }
       }
     },
diff --git a/packages/widgets/src/clock/component.tsx b/packages/widgets/src/clock/component.tsx
index b32c5dbe1..95c5a2af2 100644
--- a/packages/widgets/src/clock/component.tsx
+++ b/packages/widgets/src/clock/component.tsx
@@ -17,6 +17,8 @@ export default function ClockWidget({ options }: WidgetComponentProps<"clock">)
   const secondsFormat = options.showSeconds ? ":ss" : "";
   const timeFormat = options.is24HourFormat ? `HH:mm${secondsFormat}` : `h:mm${secondsFormat} A`;
   const dateFormat = options.dateFormat;
+  const customTimeFormat = options.customTimeFormat;
+  const customDateFormat = options.customDateFormat;
   const timezone = options.useCustomTimezone ? options.timezone : Intl.DateTimeFormat().resolvedOptions().timeZone;
   const time = useCurrentTime(options);
   return (
@@ -27,11 +29,15 @@ export default function ClockWidget({ options }: WidgetComponentProps<"clock">)
         </Text>
       )}
       <Text className="clock-time-text" fw={700} size="22.5cqmin" lh="1">
-        {dayjs(time).tz(timezone).format(timeFormat)}
+        {options.customTimeFormat
+          ? dayjs(time).tz(timezone).format(customTimeFormat)
+          : dayjs(time).tz(timezone).format(timeFormat)}
       </Text>
       {options.showDate && (
         <Text className="clock-date-text" size="12.5cqmin" p="1cqmin" lineClamp={1}>
-          {dayjs(time).tz(timezone).format(dateFormat)}
+          {options.customDateFormat
+            ? dayjs(time).tz(timezone).format(customDateFormat)
+            : dayjs(time).tz(timezone).format(dateFormat)}
         </Text>
       )}
     </Stack>
diff --git a/packages/widgets/src/clock/index.ts b/packages/widgets/src/clock/index.ts
index fed269b9b..47125609c 100644
--- a/packages/widgets/src/clock/index.ts
+++ b/packages/widgets/src/clock/index.ts
@@ -46,6 +46,14 @@ export const { definition, componentLoader } = createWidgetDefinition("clock", {
         defaultValue: "dddd, MMMM D",
         withDescription: true,
       }),
+      customTimeFormat: factory.text({
+        defaultValue: "",
+        withDescription: true,
+      }),
+      customDateFormat: factory.text({
+        defaultValue: "",
+        withDescription: true,
+      }),
     }),
     {
       customTitle: {