Added support for custom time format in header clocks

Signed-off-by: Andre Wanlin <67169551+awanlin@users.noreply.github.com>

.changeset/silver-needles-unite.md

@@ -0,0 +1,26 @@
+---
+'@backstage/plugin-home': patch
+---
+
+Added support for customizing the time format used in the `HeaderWorlClock` component
+
+Here's an example of how this can be used in the `HomePage.tsx` found in `\packages\app\src\components\home` to change the clock to be in the 24hr time format:
+
+```diff
++const timeFormat: Intl.DateTimeFormatOptions = {
++  hour: '2-digit',
++  minute: '2-digit',
++  hour12: false,
++};
+
+export const homePage = (
+  <Page themeId="home">
+    <Header title={<WelcomeTitle />} pageTitleOverride="Home">
++      <HeaderWorldClock clockConfigs={clockConfigs} customTimeFormat={timeFormat} />
+    </Header>
+    <Content>
+      <Grid container spacing={3}>
+        <Grid item xs={12}>
+          <HomePageSearchBar />
+        </Grid>
+```

packages/app/src/components/home/HomePage.tsx

@@ -49,10 +49,19 @@ const clockConfigs: ClockConfig[] = [
   },
 ];
 
+const timeFormat: Intl.DateTimeFormatOptions = {
+  hour: '2-digit',
+  minute: '2-digit',
+  hour12: false,
+};
+
 export const homePage = (
   <Page themeId="home">
     <Header title={<WelcomeTitle />} pageTitleOverride="Home">
-      <HeaderWorldClock clockConfigs={clockConfigs} />
+      <HeaderWorldClock
+        clockConfigs={clockConfigs}
+        customTimeFormat={timeFormat}
+      />
     </Header>
     <Content>
       <Grid container spacing={3}>

plugins/home/api-report.md

@@ -62,6 +62,7 @@ export function createCardExtension<T>(options: {
 // @public (undocumented)
 export const HeaderWorldClock: (props: {
   clockConfigs: ClockConfig[];
+  customTimeFormat?: Intl.DateTimeFormatOptions;
 }) => JSX.Element | null;
 
 // @public

plugins/home/src/components/HeaderWorldClock/HeaderWorldClock.tsx

@@ -32,7 +32,10 @@ export type ClockConfig = {
   timeZone: string;
 };
 
-function getTimes(clockConfigs: ClockConfig[]) {
+function getTimes(
+  clockConfigs: ClockConfig[],
+  customTimeFormat?: Intl.DateTimeFormatOptions,
+) {
   const d = new Date();
   const lang = window.navigator.language;
 
@@ -47,7 +50,7 @@ function getTimes(clockConfigs: ClockConfig[]) {
 
     const options: Intl.DateTimeFormatOptions = {
       timeZone: clockConfig.timeZone,
-      ...timeFormat,
+      ...(customTimeFormat ?? timeFormat),
     };
 
     try {
@@ -69,23 +72,26 @@ function getTimes(clockConfigs: ClockConfig[]) {
 }
 
 /** @public */
-export const HeaderWorldClock = (props: { clockConfigs: ClockConfig[] }) => {
-  const { clockConfigs } = props;
+export const HeaderWorldClock = (props: {
+  clockConfigs: ClockConfig[];
+  customTimeFormat?: Intl.DateTimeFormatOptions;
+}) => {
+  const { clockConfigs, customTimeFormat } = props;
 
   const defaultTimes: TimeObj[] = [];
   const [clocks, setTimes] = React.useState(defaultTimes);
 
   React.useEffect(() => {
-    setTimes(getTimes(clockConfigs));
+    setTimes(getTimes(clockConfigs, customTimeFormat));
 
     const intervalId = setInterval(() => {
-      setTimes(getTimes(clockConfigs));
+      setTimes(getTimes(clockConfigs, customTimeFormat));
     }, 1000);
 
     return () => {
       clearInterval(intervalId);
     };
-  }, [clockConfigs]);
+  }, [clockConfigs, customTimeFormat]);
 
   if (clocks.length !== 0) {
     return (