Make date period picker respect timezone settings (#23996)

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

@@ -9,12 +9,13 @@ import {
   endOfMonth,
   endOfWeek,
   endOfYear,
+  isThisYear,
   startOfDay,
   startOfMonth,
   startOfWeek,
   startOfYear,
-  isThisYear,
 } from "date-fns";
+import { fromZonedTime, toZonedTime } from "date-fns-tz";
 import type { PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -22,16 +23,18 @@ import { ifDefined } from "lit/directives/if-defined";
 import { calcDate, shiftDateRange } from "../common/datetime/calc_date";
 import { firstWeekdayIndex } from "../common/datetime/first_weekday";
 import {
-  formatShortDateTimeWithYear,
   formatShortDateTime,
+  formatShortDateTimeWithYear,
 } from "../common/datetime/format_date_time";
 import { useAmPm } from "../common/datetime/use_am_pm";
+import { fireEvent } from "../common/dom/fire_event";
+import { TimeZone } from "../data/translation";
 import type { HomeAssistant } from "../types";
 import "./date-range-picker";
 import "./ha-icon-button";
-import "./ha-textarea";
 import "./ha-icon-button-next";
 import "./ha-icon-button-prev";
+import "./ha-textarea";
 
 export type DateRangePickerRanges = Record<string, [Date, Date]>;
 
@@ -197,14 +200,15 @@ export class HaDateRangePicker extends LitElement {
         ?auto-apply=${this.autoApply}
         time-picker=${this.timePicker}
         twentyfour-hours=${this._hour24format}
-        start-date=${this.startDate.toISOString()}
-        end-date=${this.endDate.toISOString()}
+        start-date=${this._formatDate(this.startDate)}
+        end-date=${this._formatDate(this.endDate)}
         ?ranges=${this.ranges !== false}
         opening-direction=${ifDefined(
           this.openingDirection || this._calcedOpeningDirection
         )}
         first-day=${firstWeekdayIndex(this.hass.locale)}
         language=${this.hass.locale.language}
+        @change=${this._handleChange}
       >
         <div slot="input" class="date-range-inputs" @click=${this._handleClick}>
           ${!this.minimal
@@ -325,9 +329,31 @@ export class HaDateRangePicker extends LitElement {
   }
 
   private _applyDateRange() {
+    if (this.hass.locale.time_zone === TimeZone.server) {
+      const dateRangePicker = this._dateRangePicker;
+
+      const startDate = fromZonedTime(
+        dateRangePicker.start,
+        this.hass.config.time_zone
+      );
+      const endDate = fromZonedTime(
+        dateRangePicker.end,
+        this.hass.config.time_zone
+      );
+
+      dateRangePicker.clickRange([startDate, endDate]);
+    }
+
     this._dateRangePicker.clickedApply();
   }
 
+  private _formatDate(date: Date): string {
+    if (this.hass.locale.time_zone === TimeZone.server) {
+      return toZonedTime(date, this.hass.config.time_zone).toISOString();
+    }
+    return date.toISOString();
+  }
+
   private get _dateRangePicker() {
     const dateRangePicker = this.shadowRoot!.querySelector(
       "date-range-picker"
@@ -358,6 +384,16 @@ export class HaDateRangePicker extends LitElement {
     }
   }
 
+  private _handleChange(ev: CustomEvent) {
+    ev.stopPropagation();
+    const startDate = ev.detail.startDate;
+    const endDate = ev.detail.endDate;
+
+    fireEvent(this, "value-changed", {
+      value: { startDate, endDate },
+    });
+  }
+
   static styles = css`
 
       ha-icon-button {