mirror of
https://github.com/home-assistant/frontend.git
synced 2025-04-25 22:07:20 +00:00
Add minutes to hourly weather forecast time display (#8182)
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
parent
417184525f
commit
0dd9b21c2d
@ -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");
|
||||
|
@ -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");
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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`
|
||||
|
Loading…
x
Reference in New Issue
Block a user