Allow to show times in the UI in the timezone of the server (#16799)

src/components/ha-date-range-picker.ts

@@ -3,6 +3,13 @@ import "@material/mwc-list/mwc-list";
 import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import { mdiCalendar } from "@mdi/js";
+import {
+  addDays,
+  endOfDay,
+  endOfWeek,
+  startOfDay,
+  startOfWeek,
+} from "date-fns";
 import {
   css,
   CSSResultGroup,
@@ -12,10 +19,11 @@ import {
   TemplateResult,
 } from "lit";
 import { customElement, property } from "lit/decorators";
-import { formatDateTime } from "../common/datetime/format_date_time";
-import { formatDate } from "../common/datetime/format_date";
-import { useAmPm } from "../common/datetime/use_am_pm";
+import { calcDate } from "../common/datetime/calc_date";
 import { firstWeekdayIndex } from "../common/datetime/first_weekday";
+import { formatDate } from "../common/datetime/format_date";
+import { formatDateTime } from "../common/datetime/format_date_time";
+import { useAmPm } from "../common/datetime/use_am_pm";
 import { computeRTLDirection } from "../common/util/compute_rtl";
 import { HomeAssistant } from "../types";
 import "./date-range-picker";
@@ -34,7 +42,7 @@ export class HaDateRangePicker extends LitElement {
 
   @property() public endDate!: Date;
 
-  @property() public ranges?: DateRangePickerRanges;
+  @property() public ranges?: DateRangePickerRanges | false;
 
   @property() public autoApply = false;
 
@@ -46,6 +54,70 @@ export class HaDateRangePicker extends LitElement {
 
   @property({ type: String }) private _rtlDirection = "ltr";
 
+  protected willUpdate() {
+    if (!this.hasUpdated && this.ranges === undefined) {
+      const today = new Date();
+      const weekStartsOn = firstWeekdayIndex(this.hass.locale);
+      const weekStart = calcDate(
+        today,
+        startOfWeek,
+        this.hass.locale,
+        this.hass.config,
+        {
+          weekStartsOn,
+        }
+      );
+      const weekEnd = calcDate(
+        today,
+        endOfWeek,
+        this.hass.locale,
+        this.hass.config,
+        {
+          weekStartsOn,
+        }
+      );
+
+      this.ranges = {
+        [this.hass.localize("ui.components.date-range-picker.ranges.today")]: [
+          calcDate(today, startOfDay, this.hass.locale, this.hass.config, {
+            weekStartsOn,
+          }),
+          calcDate(today, endOfDay, this.hass.locale, this.hass.config, {
+            weekStartsOn,
+          }),
+        ],
+        [this.hass.localize(
+          "ui.components.date-range-picker.ranges.yesterday"
+        )]: [
+          calcDate(
+            addDays(today, -1),
+            startOfDay,
+            this.hass.locale,
+            this.hass.config,
+            {
+              weekStartsOn,
+            }
+          ),
+          calcDate(
+            addDays(today, -1),
+            endOfDay,
+            this.hass.locale,
+            this.hass.config,
+            {
+              weekStartsOn,
+            }
+          ),
+        ],
+        [this.hass.localize(
+          "ui.components.date-range-picker.ranges.this_week"
+        )]: [weekStart, weekEnd],
+        [this.hass.localize(
+          "ui.components.date-range-picker.ranges.last_week"
+        )]: [addDays(weekStart, -7), addDays(weekEnd, -7)],
+      };
+    }
+  }
+
   protected updated(changedProps: PropertyValues) {
     if (changedProps.has("hass")) {
       const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
@@ -65,15 +137,19 @@ export class HaDateRangePicker extends LitElement {
         twentyfour-hours=${this._hour24format}
         start-date=${this.startDate}
         end-date=${this.endDate}
-        ?ranges=${this.ranges !== undefined}
+        ?ranges=${this.ranges !== false}
         first-day=${firstWeekdayIndex(this.hass.locale)}
       >
         <div slot="input" class="date-range-inputs">
           <ha-svg-icon .path=${mdiCalendar}></ha-svg-icon>
           <ha-textfield
             .value=${this.timePicker
-              ? formatDateTime(this.startDate, this.hass.locale)
-              : formatDate(this.startDate, this.hass.locale)}
+              ? formatDateTime(
+                  this.startDate,
+                  this.hass.locale,
+                  this.hass.config
+                )
+              : formatDate(this.startDate, this.hass.locale, this.hass.config)}
             .label=${this.hass.localize(
               "ui.components.date-range-picker.start_date"
             )}
@@ -83,8 +159,8 @@ export class HaDateRangePicker extends LitElement {
           ></ha-textfield>
           <ha-textfield
             .value=${this.timePicker
-              ? formatDateTime(this.endDate, this.hass.locale)
-              : formatDate(this.endDate, this.hass.locale)}
+              ? formatDateTime(this.endDate, this.hass.locale, this.hass.config)
+              : formatDate(this.endDate, this.hass.locale, this.hass.config)}
             .label=${this.hass.localize(
               "ui.components.date-range-picker.end_date"
             )}