From 86fc3bade89f5546202e3f68d1e2621da579d80e Mon Sep 17 00:00:00 2001 From: Philip Allgaier Date: Sat, 16 Jan 2021 01:41:25 +0100 Subject: [PATCH 1/5] Add minutes to forecast time display --- src/dialogs/more-info/controls/more-info-weather.ts | 1 + src/panels/lovelace/cards/hui-weather-forecast-card.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/src/dialogs/more-info/controls/more-info-weather.ts b/src/dialogs/more-info/controls/more-info-weather.ts index 56018d8316ba..4539fc261f00 100644 --- a/src/dialogs/more-info/controls/more-info-weather.ts +++ b/src/dialogs/more-info/controls/more-info-weather.ts @@ -267,6 +267,7 @@ class MoreInfoWeather extends LitElement { return date.toLocaleDateString(this.hass.language, { weekday: "long", hour: "numeric", + minute: "numeric", }); } diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.ts b/src/panels/lovelace/cards/hui-weather-forecast-card.ts index a8ac37379e2e..133e8e102c47 100644 --- a/src/panels/lovelace/cards/hui-weather-forecast-card.ts +++ b/src/panels/lovelace/cards/hui-weather-forecast-card.ts @@ -288,6 +288,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { this.hass!.language, { hour: "numeric", + minute: "numeric", } )} ` From 11ca075f3ba917fbc82c9f29e2673e9655a43f86 Mon Sep 17 00:00:00 2001 From: Philip Allgaier Date: Thu, 21 Jan 2021 17:40:14 +0100 Subject: [PATCH 2/5] Use proper date and time formatting functions --- src/common/datetime/format_date.ts | 9 ++++++ src/common/datetime/format_time.ts | 9 ++++++ .../more-info/controls/more-info-weather.ts | 30 +++++++------------ .../cards/hui-weather-forecast-card.ts | 10 +++---- 4 files changed, 32 insertions(+), 26 deletions(-) diff --git a/src/common/datetime/format_date.ts b/src/common/datetime/format_date.ts index d8c46d4e8d79..42c416b67226 100644 --- a/src/common/datetime/format_date.ts +++ b/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, "longDate"); diff --git a/src/common/datetime/format_time.ts b/src/common/datetime/format_time.ts index c27874f3a62d..eb14490c7a9b 100644 --- a/src/common/datetime/format_time.ts +++ b/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, "shortTime"); diff --git a/src/dialogs/more-info/controls/more-info-weather.ts b/src/dialogs/more-info/controls/more-info-weather.ts index 4539fc261f00..d750957fbc78 100644 --- a/src/dialogs/more-info/controls/more-info-weather.ts +++ b/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`
- ${this.computeDateTime(item.datetime)} + ${formatTimeWeekday( + new Date(item.datetime), + this.hass.language + )}
` : ""} ${this._showValue(item.templow) ? html`
- ${this.computeDate(item.datetime)} + ${formatDateWeekday( + new Date(item.datetime), + this.hass.language + )}
${formatNumber(item.templow, this.hass!.language)} @@ -253,24 +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", - minute: "numeric", - }); - } - private _showValue(item: string): boolean { return typeof item !== "undefined" && item !== null; } diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.ts b/src/panels/lovelace/cards/hui-weather-forecast-card.ts index 133e8e102c47..b247f8b073e0 100644 --- a/src/panels/lovelace/cards/hui-weather-forecast-card.ts +++ b/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,12 +285,9 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { ` : hourly ? html` - ${new Date(item.datetime).toLocaleTimeString( - this.hass!.language, - { - hour: "numeric", - minute: "numeric", - } + ${formatTime( + new Date(item.datetime), + this.hass!.language )} ` : html` From 56b411ff9ee06f748b1db47c53aea8cee1824403 Mon Sep 17 00:00:00 2001 From: Philip Allgaier Date: Fri, 22 Jan 2021 20:46:17 +0100 Subject: [PATCH 3/5] Correct fecha formats --- src/common/datetime/format_date.ts | 2 +- src/common/datetime/format_time.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/common/datetime/format_date.ts b/src/common/datetime/format_date.ts index 42c416b67226..a4441bf379a5 100644 --- a/src/common/datetime/format_date.ts +++ b/src/common/datetime/format_date.ts @@ -17,4 +17,4 @@ export const formatDateWeekday = toLocaleDateStringSupportsOptions month: "short", day: "numeric", }) - : (dateObj: Date) => format(dateObj, "longDate"); + : (dateObj: Date) => format(dateObj, "dddd, D MMM"); diff --git a/src/common/datetime/format_time.ts b/src/common/datetime/format_time.ts index eb14490c7a9b..3c2cf95d0490 100644 --- a/src/common/datetime/format_time.ts +++ b/src/common/datetime/format_time.ts @@ -25,4 +25,4 @@ export const formatTimeWeekday = toLocaleTimeStringSupportsOptions hour: "numeric", minute: "2-digit", }) - : (dateObj: Date) => format(dateObj, "shortTime"); + : (dateObj: Date) => format(dateObj, "dddd HH:mm"); From cf3600e9d19b42cb4dd40ad2bb0a1dbbc84f3202 Mon Sep 17 00:00:00 2001 From: Philip Allgaier Date: Sat, 23 Jan 2021 19:14:38 +0100 Subject: [PATCH 4/5] Update format_time.ts --- src/common/datetime/format_time.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common/datetime/format_time.ts b/src/common/datetime/format_time.ts index 3c2cf95d0490..6b79f0c173e4 100644 --- a/src/common/datetime/format_time.ts +++ b/src/common/datetime/format_time.ts @@ -25,4 +25,4 @@ export const formatTimeWeekday = toLocaleTimeStringSupportsOptions hour: "numeric", minute: "2-digit", }) - : (dateObj: Date) => format(dateObj, "dddd HH:mm"); + : (dateObj: Date) => format(dateObj, "dddd, HH:mm"); From c17290c559e228f6259b4a6e257411cc9bd5c4f5 Mon Sep 17 00:00:00 2001 From: Philip Allgaier Date: Tue, 26 Jan 2021 16:00:05 +0100 Subject: [PATCH 5/5] Update src/common/datetime/format_date.ts Co-authored-by: Bram Kragten --- src/common/datetime/format_date.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common/datetime/format_date.ts b/src/common/datetime/format_date.ts index a4441bf379a5..050006fe7d99 100644 --- a/src/common/datetime/format_date.ts +++ b/src/common/datetime/format_date.ts @@ -17,4 +17,4 @@ export const formatDateWeekday = toLocaleDateStringSupportsOptions month: "short", day: "numeric", }) - : (dateObj: Date) => format(dateObj, "dddd, D MMM"); + : (dateObj: Date) => format(dateObj, "dddd, MMM D");