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

@@ -56,6 +56,8 @@ const optionMapping: OptionMapping = {
     showSeconds: () => undefined,
     timezone: (oldOptions) => oldOptions.timezone,
     useCustomTimezone: () => true,
+    customTimeFormat: () => undefined,
+    customDateFormat: () => undefined,
   },
   downloads: {
     activeTorrentThreshold: (oldOptions) =>

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)"
         }
       }
     },

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>

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: {