Add minutes to hourly weather forecast time display (#8182)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/common/datetime/format_date.ts

@@ -9,3 +9,12 @@ export const formatDate = toLocaleDateStringSupportsOptions
         day: "numeric",
       })
   : (dateObj: Date) => format(dateObj, "longDate");
+
+export const formatDateWeekday = toLocaleDateStringSupportsOptions
+  ? (dateObj: Date, locales: string) =>
+      dateObj.toLocaleDateString(locales, {
+        weekday: "long",
+        month: "short",
+        day: "numeric",
+      })
+  : (dateObj: Date) => format(dateObj, "dddd, MMM D");

src/common/datetime/format_time.ts

@@ -17,3 +17,12 @@ export const formatTimeWithSeconds = toLocaleTimeStringSupportsOptions
         second: "2-digit",
       })
   : (dateObj: Date) => format(dateObj, "mediumTime");
+
+export const formatTimeWeekday = toLocaleTimeStringSupportsOptions
+  ? (dateObj: Date, locales: string) =>
+      dateObj.toLocaleTimeString(locales, {
+        weekday: "long",
+        hour: "numeric",
+        minute: "2-digit",
+      })
+  : (dateObj: Date) => format(dateObj, "dddd, HH:mm");

src/dialogs/more-info/controls/more-info-weather.ts

@@ -29,6 +29,8 @@ import {
   PropertyValues,
 } from "lit-element";
 import { html, TemplateResult } from "lit-html";
+import { formatDateWeekday } from "../../../common/datetime/format_date";
+import { formatTimeWeekday } from "../../../common/datetime/format_time";
 import { formatNumber } from "../../../common/string/format_number";
 import "../../../components/ha-svg-icon";
 import { getWeatherUnit, getWind } from "../../../data/weather";
@@ -180,14 +182,20 @@ class MoreInfoWeather extends LitElement {
                   ${!this._showValue(item.templow)
                     ? html`
                         <div class="main">
-                          ${this.computeDateTime(item.datetime)}
+                          ${formatTimeWeekday(
+                            new Date(item.datetime),
+                            this.hass.language
+                          )}
                         </div>
                       `
                     : ""}
                   ${this._showValue(item.templow)
                     ? html`
                         <div class="main">
-                          ${this.computeDate(item.datetime)}
+                          ${formatDateWeekday(
+                            new Date(item.datetime),
+                            this.hass.language
+                          )}
                         </div>
                         <div class="templow">
                           ${formatNumber(item.templow, this.hass!.language)}
@@ -253,23 +261,6 @@ class MoreInfoWeather extends LitElement {
     `;
   }
 
-  private computeDate(data) {
-    const date = new Date(data);
-    return date.toLocaleDateString(this.hass.language, {
-      weekday: "long",
-      month: "short",
-      day: "numeric",
-    });
-  }
-
-  private computeDateTime(data) {
-    const date = new Date(data);
-    return date.toLocaleDateString(this.hass.language, {
-      weekday: "long",
-      hour: "numeric",
-    });
-  }
-
   private _showValue(item: string): boolean {
     return typeof item !== "undefined" && item !== null;
   }

src/panels/lovelace/cards/hui-weather-forecast-card.ts

@@ -9,6 +9,7 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit-element";
+import { formatTime } from "../../../common/datetime/format_time";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeStateDisplay } from "../../../common/entity/compute_state_display";
@@ -284,11 +285,9 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
                             `
                           : hourly
                           ? html`
-                              ${new Date(item.datetime).toLocaleTimeString(
+                              ${formatTime(
-                                this.hass!.language,
+                                new Date(item.datetime),
-                                {
+                                this.hass!.language
-                                  hour: "numeric",
-                                }
                               )}
                             `
                           : html`