Format scheduled backup time using locale settings

src/data/backup.ts

@@ -1,6 +1,11 @@
+import { setHours, setMinutes } from "date-fns";
+import type { HassConfig } from "home-assistant-js-websocket";
+import memoizeOne from "memoize-one";
+import { formatTime } from "../common/datetime/format_time";
 import type { LocalizeFunc } from "../common/translations/localize";
 import type { HomeAssistant } from "../types";
 import { domainToName } from "./integration";
+import type { FrontendLocaleData } from "./translation";
 
 export const enum BackupScheduleState {
   NEVER = "never",
@@ -282,3 +287,10 @@ export const generateEncryptionKey = () => {
   });
   return result;
 };
+
+export const getFormattedBackupTime = memoizeOne(
+  (locale: FrontendLocaleData, config: HassConfig) => {
+    const date = setMinutes(setHours(new Date(), 4), 45);
+    return formatTime(date, locale, config);
+  }
+);

src/panels/config/backup/components/config/ha-backup-config-schedule.ts

@@ -3,18 +3,21 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
+import { clamp } from "../../../../../common/number/clamp";
 import type { HaCheckbox } from "../../../../../components/ha-checkbox";
 import "../../../../../components/ha-md-list";
 import "../../../../../components/ha-md-list-item";
 import "../../../../../components/ha-md-select";
-import "../../../../../components/ha-md-textfield";
 import type { HaMdSelect } from "../../../../../components/ha-md-select";
 import "../../../../../components/ha-md-select-option";
+import "../../../../../components/ha-md-textfield";
 import "../../../../../components/ha-switch";
 import type { BackupConfig } from "../../../../../data/backup";
-import { BackupScheduleState } from "../../../../../data/backup";
+import {
+  BackupScheduleState,
+  getFormattedBackupTime,
+} from "../../../../../data/backup";
 import type { HomeAssistant } from "../../../../../types";
-import { clamp } from "../../../../../common/number/clamp";
 
 export type BackupConfigSchedule = Pick<BackupConfig, "schedule" | "retention">;
 
@@ -120,6 +123,8 @@ class HaBackupConfigSchedule extends LitElement {
   protected render() {
     const data = this._getData(this.value);
 
+    const time = getFormattedBackupTime(this.hass.locale, this.hass.config);
+
     return html`
       <ha-md-list>
         <ha-md-list-item>
@@ -148,28 +153,28 @@ class HaBackupConfigSchedule extends LitElement {
                   .value=${data.schedule}
                 >
                   <ha-md-select-option .value=${BackupScheduleState.DAILY}>
-                    <div slot="headline">Daily at 04:45</div>
+                    <div slot="headline">Daily at ${time}</div>
                   </ha-md-select-option>
                   <ha-md-select-option .value=${BackupScheduleState.MONDAY}>
-                    <div slot="headline">Monday at 04:45</div>
+                    <div slot="headline">Monday at ${time}</div>
                   </ha-md-select-option>
                   <ha-md-select-option .value=${BackupScheduleState.TUESDAY}>
-                    <div slot="headline">Tuesday at 04:45</div>
+                    <div slot="headline">Tuesday at ${time}</div>
                   </ha-md-select-option>
                   <ha-md-select-option .value=${BackupScheduleState.WEDNESDAY}>
-                    <div slot="headline">Wednesday at 04:45</div>
+                    <div slot="headline">Wednesday at ${time}</div>
                   </ha-md-select-option>
                   <ha-md-select-option .value=${BackupScheduleState.THURSDAY}>
-                    <div slot="headline">Thursday at 04:45</div>
+                    <div slot="headline">Thursday at ${time}</div>
                   </ha-md-select-option>
                   <ha-md-select-option .value=${BackupScheduleState.FRIDAY}>
-                    <div slot="headline">Friday at 04:45</div>
+                    <div slot="headline">Friday at ${time}</div>
                   </ha-md-select-option>
                   <ha-md-select-option .value=${BackupScheduleState.SATURDAY}>
-                    <div slot="headline">Saturday at 04:45</div>
+                    <div slot="headline">Saturday at ${time}</div>
                   </ha-md-select-option>
                   <ha-md-select-option .value=${BackupScheduleState.SUNDAY}>
-                    <div slot="headline">Sunday at 04:45</div>
+                    <div slot="headline">Sunday at ${time}</div>
                   </ha-md-select-option>
                 </ha-md-select>
               </ha-md-list-item>

src/panels/config/backup/components/overview/ha-backup-overview-settings.ts

@@ -13,6 +13,7 @@ import type { BackupConfig } from "../../../../../data/backup";
 import {
   BackupScheduleState,
   computeBackupAgentName,
+  getFormattedBackupTime,
   isLocalAgent,
 } from "../../../../../data/backup";
 import { haStyle } from "../../../../../resources/styles";
@@ -43,30 +44,32 @@ class HaBackupBackupsSummary extends LitElement {
       copiesText = `and keep backups for ${days} day(s)`;
     }
 
+    const time = getFormattedBackupTime(this.hass.locale, this.hass.config);
+
     let scheduleText = "";
     if (schedule === BackupScheduleState.DAILY) {
-      scheduleText = `Daily at 04:45`;
+      scheduleText = `Daily at ${time}`;
     }
     if (schedule === BackupScheduleState.MONDAY) {
-      scheduleText = `Weekly on Mondays at 04:45`;
+      scheduleText = `Weekly on Mondays at ${time}`;
     }
     if (schedule === BackupScheduleState.TUESDAY) {
-      scheduleText = `Weekly on Thuesdays at 04:45`;
+      scheduleText = `Weekly on Thuesdays at ${time}`;
     }
     if (schedule === BackupScheduleState.WEDNESDAY) {
-      scheduleText = `Weekly on Wednesdays at 04:45`;
+      scheduleText = `Weekly on Wednesdays at ${time}`;
     }
     if (schedule === BackupScheduleState.THURSDAY) {
-      scheduleText = `Weekly on Thursdays at 04:45`;
+      scheduleText = `Weekly on Thursdays at ${time}`;
     }
     if (schedule === BackupScheduleState.FRIDAY) {
-      scheduleText = `Weekly on Fridays at 04:45`;
+      scheduleText = `Weekly on Fridays at ${time}`;
     }
     if (schedule === BackupScheduleState.SATURDAY) {
-      scheduleText = `Weekly on Saturdays at 04:45`;
+      scheduleText = `Weekly on Saturdays at ${time}`;
     }
     if (schedule === BackupScheduleState.SUNDAY) {
-      scheduleText = `Weekly on Sundays at 04:45`;
+      scheduleText = `Weekly on Sundays at ${time}`;
     }
 
     return scheduleText + " " + copiesText;

src/panels/config/backup/components/overview/ha-backup-overview-summary.ts

@@ -1,18 +1,20 @@
 import { mdiBackupRestore, mdiCalendar } from "@mdi/js";
-import { addHours, differenceInDays, setHours, setMinutes } from "date-fns";
+import { addHours, differenceInDays } from "date-fns";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { formatTime } from "../../../../../common/datetime/format_time";
 import { relativeTime } from "../../../../../common/datetime/relative_time";
 import "../../../../../components/ha-button";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-md-list";
 import "../../../../../components/ha-md-list-item";
 import "../../../../../components/ha-svg-icon";
 import type { BackupConfig, BackupContent } from "../../../../../data/backup";
-import { BackupScheduleState } from "../../../../../data/backup";
+import {
+  BackupScheduleState,
+  getFormattedBackupTime,
+} from "../../../../../data/backup";
 import { haStyle } from "../../../../../resources/styles";
 import type { HomeAssistant } from "../../../../../types";
 import "../ha-backup-summary-card";
@@ -41,8 +43,7 @@ class HaBackupOverviewBackups extends LitElement {
   });
 
   private _nextBackupDescription(schedule: BackupScheduleState) {
-    const newDate = setMinutes(setHours(new Date(), 4), 45);
-    const time = formatTime(newDate, this.hass.locale, this.hass.config);
+    const time = getFormattedBackupTime(this.hass.locale, this.hass.config);
 
     switch (schedule) {
       case BackupScheduleState.DAILY: