diff --git a/src/common/datetime/format_date.ts b/src/common/datetime/format_date.ts index 9b4b5bd510..aeed82b33b 100644 --- a/src/common/datetime/format_date.ts +++ b/src/common/datetime/format_date.ts @@ -210,3 +210,39 @@ const formatDateWeekdayShortMem = memoizeOne( timeZone: resolveTimeZone(locale.time_zone, serverTimeZone), }) ); + +// Mon, Aug 10 +export const formatDateWeekdayVeryShortDate = ( + dateObj: Date, + locale: FrontendLocaleData, + config: HassConfig +) => + formatDateWeekdayVeryShortDateMem(locale, config.time_zone).format(dateObj); + +const formatDateWeekdayVeryShortDateMem = memoizeOne( + (locale: FrontendLocaleData, serverTimeZone: string) => + new Intl.DateTimeFormat(locale.language, { + weekday: "short", + month: "short", + day: "numeric", + timeZone: resolveTimeZone(locale.time_zone, serverTimeZone), + }) +); + +// Mon, Aug 10, 2021 +export const formatDateWeekdayShortDate = ( + dateObj: Date, + locale: FrontendLocaleData, + config: HassConfig +) => formatDateWeekdayShortDateMem(locale, config.time_zone).format(dateObj); + +const formatDateWeekdayShortDateMem = memoizeOne( + (locale: FrontendLocaleData, serverTimeZone: string) => + new Intl.DateTimeFormat(locale.language, { + weekday: "short", + month: "short", + day: "numeric", + year: "numeric", + timeZone: resolveTimeZone(locale.time_zone, serverTimeZone), + }) +); diff --git a/src/panels/lovelace/cards/energy/common/energy-chart-options.ts b/src/panels/lovelace/cards/energy/common/energy-chart-options.ts index 9bf0560aa6..ebb83472d0 100644 --- a/src/panels/lovelace/cards/energy/common/energy-chart-options.ts +++ b/src/panels/lovelace/cards/energy/common/energy-chart-options.ts @@ -28,6 +28,8 @@ import { formatDateMonthYear, formatDateShort, formatDateVeryShort, + formatDateWeekdayShortDate, + formatDateWeekdayVeryShortDate, } from "../../../../../common/datetime/format_date"; import { formatTime } from "../../../../../common/datetime/format_time"; import type { ECOption } from "../../../../../resources/echarts/echarts"; @@ -222,7 +224,9 @@ function formatTooltip( if (suggestedPeriod === "month") { period = `${formatDateMonthYear(date, locale, config)}`; } else if (suggestedPeriod === "day") { - period = `${(showCompareYear ? formatDateShort : formatDateVeryShort)(date, locale, config)}`; + period = showCompareYear + ? formatDateWeekdayShortDate(date, locale, config) + : formatDateWeekdayVeryShortDate(date, locale, config); } else { period = `${ compare