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

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Philip Allgaier 2021-01-26 16:14:34 +01:00 committed by GitHub
parent 417184525f
commit 0dd9b21c2d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 32 additions and 24 deletions

View File

@ -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");

View File

@ -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");

View File

@ -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;
}

View File

@ -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(
this.hass!.language,
{
hour: "numeric",
}
${formatTime(
new Date(item.datetime),
this.hass!.language
)}
`
: html`