Use firstday of the week for range shortcuts in date pickers (#14210)

src/common/datetime/first_weekday.ts

@@ -11,16 +11,20 @@ export const weekdays = [
   "saturday",
 ] as const;
 
-export const firstWeekdayIndex = (locale: FrontendLocaleData): number => {
+type WeekdayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+
+export const firstWeekdayIndex = (locale: FrontendLocaleData): WeekdayIndex => {
   if (locale.first_weekday === FirstWeekday.language) {
     // @ts-ignore
     if ("weekInfo" in Intl.Locale.prototype) {
       // @ts-ignore
       return new Intl.Locale(locale.language).weekInfo.firstDay % 7;
     }
-    return getWeekStartByLocale(locale.language) % 7;
+    return (getWeekStartByLocale(locale.language) % 7) as WeekdayIndex;
   }
-  return weekdays.indexOf(locale.first_weekday);
+  return weekdays.includes(locale.first_weekday)
+    ? (weekdays.indexOf(locale.first_weekday) as WeekdayIndex)
+    : 1;
 };
 
 export const firstWeekday = (locale: FrontendLocaleData) => {

src/panels/history/ha-panel-history.ts

@@ -16,6 +16,7 @@ import {
 } from "home-assistant-js-websocket/dist/types";
 import { css, html, LitElement, PropertyValues } from "lit";
 import { property, state } from "lit/decorators";
+import { firstWeekdayIndex } from "../../common/datetime/first_weekday";
 import { LocalStorage } from "../../common/decorators/local-storage";
 import { ensureArray } from "../../common/ensure-array";
 import { navigate } from "../../common/navigate";
@@ -179,8 +180,9 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {
     }
 
     const today = new Date();
-    const weekStart = startOfWeek(today);
+    const weekStartsOn = firstWeekdayIndex(this.hass.locale);
-    const weekEnd = endOfWeek(today);
+    const weekStart = startOfWeek(today, { weekStartsOn });
+    const weekEnd = endOfWeek(today, { weekStartsOn });
 
     this._ranges = {
       [this.hass.localize("ui.components.date-range-picker.ranges.today")]: [

src/panels/logbook/ha-panel-logbook.ts

@@ -12,6 +12,7 @@ import {
 } from "date-fns/esm";
 import { css, html, LitElement, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { firstWeekdayIndex } from "../../common/datetime/first_weekday";
 import { navigate } from "../../common/navigate";
 import {
   createSearchParam,
@@ -108,8 +109,9 @@ export class HaPanelLogbook extends LitElement {
     }
 
     const today = new Date();
-    const weekStart = startOfWeek(today);
+    const weekStartsOn = firstWeekdayIndex(this.hass.locale);
-    const weekEnd = endOfWeek(today);
+    const weekStart = startOfWeek(today, { weekStartsOn });
+    const weekEnd = endOfWeek(today, { weekStartsOn });
 
     this._ranges = {
       [this.hass.localize("ui.components.date-range-picker.ranges.today")]: [

src/panels/lovelace/components/hui-energy-period-selector.ts

@@ -36,6 +36,7 @@ import { EnergyData, getEnergyDataCollection } from "../../../data/energy";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { HomeAssistant, ToggleButton } from "../../../types";
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
+import { firstWeekdayIndex } from "../../../common/datetime/first_weekday";
 
 @customElement("hui-energy-period-selector")
 export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
@@ -179,11 +180,13 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
         ? today
         : this._startDate;
 
+    const weekStartsOn = firstWeekdayIndex(this.hass.locale);
+
     this._setDate(
       this._period === "day"
         ? startOfDay(start)
         : this._period === "week"
-        ? startOfWeek(start, { weekStartsOn: 1 })
+        ? startOfWeek(start, { weekStartsOn })
         : this._period === "month"
         ? startOfMonth(start)
         : startOfYear(start)
@@ -191,11 +194,13 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
   }
 
   private _pickToday() {
+    const weekStartsOn = firstWeekdayIndex(this.hass.locale);
+
     this._setDate(
       this._period === "day"
         ? startOfToday()
         : this._period === "week"
-        ? startOfWeek(new Date(), { weekStartsOn: 1 })
+        ? startOfWeek(new Date(), { weekStartsOn })
         : this._period === "month"
         ? startOfMonth(new Date())
         : startOfYear(new Date())
@@ -227,11 +232,13 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
   }
 
   private _setDate(startDate: Date) {
+    const weekStartsOn = firstWeekdayIndex(this.hass.locale);
+
     const endDate =
       this._period === "day"
         ? endOfDay(startDate)
         : this._period === "week"
-        ? endOfWeek(startDate, { weekStartsOn: 1 })
+        ? endOfWeek(startDate, { weekStartsOn })
         : this._period === "month"
         ? endOfMonth(startDate)
         : endOfYear(startDate);