date-range-picker with cally (#30193)

* date-range-picker with cally * fix timePicker * Review: backdrop transition * fix comments * Add formatCallyDateRange * Refactor date formatting in date range picker and remove unused styles * time-input without label * review
2026-04-01 16:17:21 +01:00 · 2026-03-19 11:30:15 +01:00
parent 8313be8e7e
commit e278e33375
21 changed files with 1115 additions and 1048 deletions
--- a/package.json
+++ b/package.json
@@ -87,7 +87,6 @@
    "@tsparticles/engine": "3.9.1",
    "@tsparticles/preset-links": "3.2.0",
    "@vibrant/color": "4.0.4",
-    "@vue/web-component-wrapper": "1.3.0",
    "@webcomponents/scoped-custom-element-registry": "0.0.10",
    "@webcomponents/webcomponentsjs": "2.8.0",
    "barcode-detector": "3.1.1",
@@ -131,8 +130,6 @@
    "superstruct": "2.0.2",
    "tinykeys": "3.0.0",
    "ua-parser-js": "2.0.9",
-    "vue": "2.7.16",
-    "vue2-daterange-picker": "0.6.8",
    "weekstart": "2.0.0",
    "workbox-cacheable-response": "7.4.0",
    "workbox-core": "7.4.0",
--- a/renovate.json
+++ b/renovate.json
@@ -24,11 +24,6 @@
      "extends": ["monorepo:material-components-web"],
      "enabled": false
    },
-    {
-      "description": "Vue is only used by date range which is only v2",
-      "matchPackageNames": ["vue"],
-      "allowedVersions": "< 3"
-    },
    {
      "description": "Group MDI packages",
      "groupName": "Material Design Icons",
--- a/src/common/datetime/calc_date_range.ts
+++ b/src/common/datetime/calc_date_range.ts
@@ -1,17 +1,17 @@
 import {
  addDays,
-  subHours,
  endOfDay,
  endOfMonth,
+  endOfQuarter,
  endOfWeek,
  endOfYear,
  startOfDay,
  startOfMonth,
+  startOfQuarter,
  startOfWeek,
  startOfYear,
-  startOfQuarter,
-  endOfQuarter,
  subDays,
+  subHours,
  subMonths,
 } from "date-fns";
 import type { HomeAssistant } from "../../types";
@@ -33,88 +33,89 @@ export type DateRange =
  | "now-24h";

 export const calcDateRange = (
-  hass: HomeAssistant,
+  locale: HomeAssistant["locale"],
+  hassConfig: HomeAssistant["config"],
  range: DateRange
 ): [Date, Date] => {
  const today = new Date();
-  const weekStartsOn = firstWeekdayIndex(hass.locale);
+  const weekStartsOn = firstWeekdayIndex(locale);
  switch (range) {
    case "today":
      return [
-        calcDate(today, startOfDay, hass.locale, hass.config, {
+        calcDate(today, startOfDay, locale, hassConfig, {
          weekStartsOn,
        }),
-        calcDate(today, endOfDay, hass.locale, hass.config, {
+        calcDate(today, endOfDay, locale, hassConfig, {
          weekStartsOn,
        }),
      ];
    case "yesterday":
      return [
-        calcDate(addDays(today, -1), startOfDay, hass.locale, hass.config, {
+        calcDate(addDays(today, -1), startOfDay, locale, hassConfig, {
          weekStartsOn,
        }),
-        calcDate(addDays(today, -1), endOfDay, hass.locale, hass.config, {
+        calcDate(addDays(today, -1), endOfDay, locale, hassConfig, {
          weekStartsOn,
        }),
      ];
    case "this_week":
      return [
-        calcDate(today, startOfWeek, hass.locale, hass.config, {
+        calcDate(today, startOfWeek, locale, hassConfig, {
          weekStartsOn,
        }),
-        calcDate(today, endOfWeek, hass.locale, hass.config, {
+        calcDate(today, endOfWeek, locale, hassConfig, {
          weekStartsOn,
        }),
      ];
    case "this_month":
      return [
-        calcDate(today, startOfMonth, hass.locale, hass.config),
-        calcDate(today, endOfMonth, hass.locale, hass.config),
+        calcDate(today, startOfMonth, locale, hassConfig),
+        calcDate(today, endOfMonth, locale, hassConfig),
      ];
    case "this_quarter":
      return [
-        calcDate(today, startOfQuarter, hass.locale, hass.config),
-        calcDate(today, endOfQuarter, hass.locale, hass.config),
+        calcDate(today, startOfQuarter, locale, hassConfig),
+        calcDate(today, endOfQuarter, locale, hassConfig),
      ];
    case "this_year":
      return [
-        calcDate(today, startOfYear, hass.locale, hass.config),
-        calcDate(today, endOfYear, hass.locale, hass.config),
+        calcDate(today, startOfYear, locale, hassConfig),
+        calcDate(today, endOfYear, locale, hassConfig),
      ];
    case "now-7d":
      return [
-        calcDate(today, subDays, hass.locale, hass.config, 7),
-        calcDate(today, subDays, hass.locale, hass.config, 0),
+        calcDate(today, subDays, locale, hassConfig, 7),
+        calcDate(today, subDays, locale, hassConfig, 0),
      ];
    case "now-30d":
      return [
-        calcDate(today, subDays, hass.locale, hass.config, 30),
-        calcDate(today, subDays, hass.locale, hass.config, 0),
+        calcDate(today, subDays, locale, hassConfig, 30),
+        calcDate(today, subDays, locale, hassConfig, 0),
      ];
    case "now-12m":
      return [
        calcDate(
          today,
          (date) => subMonths(startOfMonth(date), 11),
-          hass.locale,
-          hass.config
+          locale,
+          hassConfig
        ),
-        calcDate(today, endOfMonth, hass.locale, hass.config),
+        calcDate(today, endOfMonth, locale, hassConfig),
      ];
    case "now-1h":
      return [
-        calcDate(today, subHours, hass.locale, hass.config, 1),
-        calcDate(today, subHours, hass.locale, hass.config, 0),
+        calcDate(today, subHours, locale, hassConfig, 1),
+        calcDate(today, subHours, locale, hassConfig, 0),
      ];
    case "now-12h":
      return [
-        calcDate(today, subHours, hass.locale, hass.config, 12),
-        calcDate(today, subHours, hass.locale, hass.config, 0),
+        calcDate(today, subHours, locale, hassConfig, 12),
+        calcDate(today, subHours, locale, hassConfig, 0),
      ];
    case "now-24h":
      return [
-        calcDate(today, subHours, hass.locale, hass.config, 24),
-        calcDate(today, subHours, hass.locale, hass.config, 0),
+        calcDate(today, subHours, locale, hassConfig, 24),
+        calcDate(today, subHours, locale, hassConfig, 0),
      ];
  }
  return [today, today];
--- a/src/common/datetime/format_date.ts
+++ b/src/common/datetime/format_date.ts
@@ -261,3 +261,36 @@ const formatDateWeekdayShortDateMem = memoizeOne(
      timeZone: resolveTimeZone(locale.time_zone, serverTimeZone),
    })
 );
+
+/**
+ * Format a date as YYYY-MM-DD. Uses "en-CA" because it's the only
+ * Intl locale that natively outputs ISO 8601 date format.
+ * Locale/config are only used to resolve the time zone.
+ */
+export const formatISODateOnly = (
+  dateObj: Date,
+  locale: FrontendLocaleData,
+  config: HassConfig
+) => {
+  const timeZone = resolveTimeZone(locale.time_zone, config.time_zone);
+  const formatter = new Intl.DateTimeFormat("en-CA", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    timeZone,
+  });
+  return formatter.format(dateObj);
+};
+
+// 2026-08-10/2026-08-15
+export const formatCallyDateRange = (
+  start: Date,
+  end: Date,
+  locale: FrontendLocaleData,
+  config: HassConfig
+) => {
+  const startDate = formatISODateOnly(start, locale, config);
+  const endDate = formatISODateOnly(end, locale, config);
+
+  return `${startDate}/${endDate}`;
+};
--- a/src/components/date-picker/date-range-picker.ts
+++ b/src/components/date-picker/date-range-picker.ts
@@ -0,0 +1,348 @@
+import { TZDate } from "@date-fns/tz";
+import { consume, type ContextType } from "@lit/context";
+import type { ActionDetail } from "@material/mwc-list";
+import { mdiCalendarToday } from "@mdi/js";
+import "cally";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { firstWeekdayIndex } from "../../common/datetime/first_weekday";
+import {
+  formatCallyDateRange,
+  formatDateMonth,
+  formatDateYear,
+  formatISODateOnly,
+} from "../../common/datetime/format_date";
+import { fireEvent } from "../../common/dom/fire_event";
+import {
+  configContext,
+  localeContext,
+  localizeContext,
+} from "../../data/context";
+import { TimeZone } from "../../data/translation";
+import type { ValueChangedEvent } from "../../types";
+import type { HaBaseTimeInput } from "../ha-base-time-input";
+import "../ha-icon-button";
+import "../ha-icon-button-next";
+import "../ha-icon-button-prev";
+import "../ha-list";
+import "../ha-list-item";
+import "../ha-time-input";
+import type { DateRangePickerRanges } from "./ha-date-range-picker";
+import { datePickerStyles, dateRangePickerStyles } from "./styles";
+
+@customElement("date-range-picker")
+export class DateRangePicker extends LitElement {
+  @property({ attribute: false }) public ranges?: DateRangePickerRanges | false;
+
+  @property({ attribute: false }) public startDate?: Date;
+
+  @property({ attribute: false }) public endDate?: Date;
+
+  @property({ attribute: "time-picker", type: Boolean })
+  public timePicker = false;
+
+  @state()
+  @consume({ context: localizeContext, subscribe: true })
+  private localize!: ContextType<typeof localizeContext>;
+
+  @state()
+  @consume({ context: localeContext, subscribe: true })
+  private locale!: ContextType<typeof localeContext>;
+
+  @state()
+  @consume({ context: configContext, subscribe: true })
+  private hassConfig!: ContextType<typeof configContext>;
+
+  /** used to show month in calendar-range header */
+  @state() private _pickerMonth?: string;
+
+  /** used to show year in calendar-date header */
+  @state() private _pickerYear?: string;
+
+  /** used for today to navigate focus in calendar-range  */
+  @state() private _focusDate?: string;
+
+  @state() private _dateValue?: string;
+
+  @state() private _timeValue = {
+    from: { hours: 0, minutes: 0 },
+    to: { hours: 23, minutes: 59 },
+  };
+
+  public connectedCallback() {
+    super.connectedCallback();
+
+    const date = this.startDate || new Date();
+
+    this._dateValue =
+      this.startDate && this.endDate
+        ? formatCallyDateRange(
+            this.startDate,
+            this.endDate,
+            this.locale,
+            this.hassConfig
+          )
+        : undefined;
+    this._pickerMonth = formatDateMonth(date, this.locale, this.hassConfig);
+    this._pickerYear = formatDateYear(date, this.locale, this.hassConfig);
+
+    if (this.timePicker && this.startDate && this.endDate) {
+      this._timeValue = {
+        from: {
+          hours: this.startDate.getHours(),
+          minutes: this.startDate.getMinutes(),
+        },
+        to: {
+          hours: this.endDate.getHours(),
+          minutes: this.endDate.getMinutes(),
+        },
+      };
+    }
+  }
+
+  render() {
+    return html`<div class="picker">
+        ${this.ranges !== false && this.ranges
+          ? html`<div class="date-range-ranges">
+              <ha-list @action=${this._setDateRange} activatable>
+                ${Object.keys(this.ranges).map(
+                  (name) => html`<ha-list-item>${name}</ha-list-item>`
+                )}
+              </ha-list>
+            </div>`
+          : nothing}
+        <div class="range">
+          <calendar-range
+            .value=${this._dateValue}
+            .locale=${this.locale.language}
+            .focusedDate=${this._focusDate}
+            @focusday=${this._focusChanged}
+            @change=${this._handleChange}
+            show-outside-days
+            .firstDayOfWeek=${firstWeekdayIndex(this.locale)}
+          >
+            <ha-icon-button-prev
+              tabindex="-1"
+              slot="previous"
+            ></ha-icon-button-prev>
+            <div class="heading" slot="heading">
+              <span class="month-year"
+                >${this._pickerMonth} ${this._pickerYear}</span
+              >
+              <ha-icon-button
+                @click=${this._focusToday}
+                .path=${mdiCalendarToday}
+                .label=${this.localize("ui.dialogs.date-picker.today")}
+              ></ha-icon-button>
+            </div>
+            <ha-icon-button-next
+              tabindex="-1"
+              slot="next"
+            ></ha-icon-button-next>
+            <calendar-month></calendar-month>
+          </calendar-range>
+          ${this.timePicker
+            ? html`
+                <div class="times">
+                  <ha-time-input
+                    .value=${`${this._timeValue.from.hours}:${this._timeValue.from.minutes}`}
+                    .locale=${this.locale}
+                    @value-changed=${this._handleChangeTime}
+                    .label=${this.localize(
+                      "ui.components.date-range-picker.time_from"
+                    )}
+                    id="from"
+                    placeholder-labels
+                  ></ha-time-input>
+                  <ha-time-input
+                    .value=${`${this._timeValue.to.hours}:${this._timeValue.to.minutes}`}
+                    .locale=${this.locale}
+                    @value-changed=${this._handleChangeTime}
+                    .label=${this.localize(
+                      "ui.components.date-range-picker.time_to"
+                    )}
+                    id="to"
+                    placeholder-labels
+                  ></ha-time-input>
+                </div>
+              `
+            : nothing}
+        </div>
+      </div>
+      <div class="footer">
+        <ha-button appearance="plain" @click=${this._cancel}
+          >${this.localize("ui.common.cancel")}</ha-button
+        >
+        <ha-button .disabled=${!this._dateValue} @click=${this._save}
+          >${this.localize("ui.components.date-range-picker.select")}</ha-button
+        >
+      </div>`;
+  }
+
+  private _focusToday() {
+    const date = new Date();
+    this._focusDate = formatISODateOnly(date, this.locale, this.hassConfig);
+    this._pickerMonth = formatDateMonth(date, this.locale, this.hassConfig);
+    this._pickerYear = formatDateYear(date, this.locale, this.hassConfig);
+  }
+
+  private _cancel() {
+    fireEvent(this, "cancel-date-picker");
+  }
+
+  private _save() {
+    if (!this._dateValue) {
+      return;
+    }
+
+    const dates = this._dateValue.split("/");
+    let startDate = new Date(`${dates[0]}T00:00:00`);
+    let endDate = new Date(`${dates[1]}T23:59:00`);
+
+    if (this.timePicker) {
+      startDate.setHours(this._timeValue.from.hours);
+      startDate.setMinutes(this._timeValue.from.minutes);
+      endDate.setHours(this._timeValue.to.hours);
+      endDate.setMinutes(this._timeValue.to.minutes);
+
+      startDate.setSeconds(0);
+      startDate.setMilliseconds(0);
+      endDate.setSeconds(0);
+      endDate.setMilliseconds(0);
+
+      if (endDate <= startDate) {
+        endDate.setDate(startDate.getDate() + 1);
+      }
+    }
+
+    if (this.locale.time_zone === TimeZone.server) {
+      startDate = new Date(
+        new TZDate(startDate, this.hassConfig.time_zone).getTime()
+      );
+      endDate = new Date(
+        new TZDate(endDate, this.hassConfig.time_zone).getTime()
+      );
+    }
+
+    if (
+      startDate.getHours() !== this._timeValue.from.hours ||
+      startDate.getMinutes() !== this._timeValue.from.minutes ||
+      endDate.getHours() !== this._timeValue.to.hours ||
+      endDate.getMinutes() !== this._timeValue.to.minutes
+    ) {
+      this._timeValue.from.hours = startDate.getHours();
+      this._timeValue.from.minutes = startDate.getMinutes();
+      this._timeValue.to.hours = endDate.getHours();
+      this._timeValue.to.minutes = endDate.getMinutes();
+    }
+
+    fireEvent(this, "value-changed", {
+      value: {
+        startDate,
+        endDate,
+      },
+    });
+  }
+
+  private _focusChanged(ev: CustomEvent<Date>) {
+    const date = ev.detail;
+    this._pickerMonth = formatDateMonth(date, this.locale, this.hassConfig);
+    this._pickerYear = formatDateYear(date, this.locale, this.hassConfig);
+    this._focusDate = undefined;
+  }
+
+  private _handleChange(ev: CustomEvent) {
+    const dateElement = ev.target as HTMLElementTagNameMap["calendar-range"];
+    this._dateValue = dateElement.value;
+    this._focusDate = undefined;
+  }
+
+  private _setDateRange(ev: CustomEvent<ActionDetail>) {
+    const dateRange: [Date, Date] = Object.values(this.ranges!)[
+      ev.detail.index
+    ];
+    this._dateValue = formatCallyDateRange(
+      dateRange[0],
+      dateRange[1],
+      this.locale,
+      this.hassConfig
+    );
+    fireEvent(this, "value-changed", {
+      value: {
+        startDate: dateRange[0],
+        endDate: dateRange[1],
+      },
+    });
+    fireEvent(this, "preset-selected", {
+      index: ev.detail.index,
+    });
+  }
+
+  private _handleChangeTime(ev: ValueChangedEvent<string>) {
+    ev.stopPropagation();
+    const time = ev.detail.value;
+    const type = (ev.target as HaBaseTimeInput).id;
+    if (time) {
+      if (!this._timeValue) {
+        this._timeValue = {
+          from: { hours: 0, minutes: 0 },
+          to: { hours: 23, minutes: 59 },
+        };
+      }
+      const [hours, minutes] = time.split(":").map(Number);
+      this._timeValue[type].hours = hours;
+      this._timeValue[type].minutes = minutes;
+    }
+  }
+
+  static styles = [
+    datePickerStyles,
+    dateRangePickerStyles,
+    css`
+      .picker {
+        display: flex;
+      }
+
+      .date-range-ranges {
+        border-right: 1px solid var(--divider-color);
+      }
+      .range {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        flex: 1;
+        padding: var(--ha-space-3);
+      }
+
+      .times {
+        display: flex;
+        flex-direction: column;
+        gap: var(--ha-space-2);
+      }
+
+      .footer {
+        display: flex;
+        justify-content: flex-end;
+        padding: var(--ha-space-2);
+        border-top: 1px solid var(--divider-color);
+      }
+
+      @media only screen and (max-width: 500px) {
+        .date-range-ranges {
+          max-width: 30%;
+        }
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "date-range-picker": DateRangePicker;
+  }
+
+  interface HASSDomEvents {
+    "cancel-date-picker": undefined;
+    "preset-selected": { index: number };
+  }
+}
--- a/src/components/date-picker/ha-date-range-picker.ts
+++ b/src/components/date-picker/ha-date-range-picker.ts
@@ -0,0 +1,406 @@
+import "@home-assistant/webawesome/dist/components/popover/popover";
+import { consume, type ContextType } from "@lit/context";
+import { mdiCalendar } from "@mdi/js";
+import "cally";
+import { isThisYear } from "date-fns";
+import type { TemplateResult } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { tinykeys } from "tinykeys";
+import { shiftDateRange } from "../../common/datetime/calc_date";
+import type { DateRange } from "../../common/datetime/calc_date_range";
+import { calcDateRange } from "../../common/datetime/calc_date_range";
+import {
+  formatShortDateTime,
+  formatShortDateTimeWithYear,
+} from "../../common/datetime/format_date_time";
+import { fireEvent } from "../../common/dom/fire_event";
+import {
+  configContext,
+  localeContext,
+  localizeContext,
+} from "../../data/context";
+import "../ha-bottom-sheet";
+import "../ha-icon-button";
+import "../ha-icon-button-next";
+import "../ha-icon-button-prev";
+import "../ha-textarea";
+import "./date-range-picker";
+
+export type DateRangePickerRanges = Record<string, [Date, Date]>;
+
+const RANGE_KEYS: DateRange[] = ["today", "yesterday", "this_week"];
+const EXTENDED_RANGE_KEYS: DateRange[] = [
+  "this_month",
+  "this_year",
+  "now-1h",
+  "now-12h",
+  "now-24h",
+  "now-7d",
+  "now-30d",
+];
+
+@customElement("ha-date-range-picker")
+export class HaDateRangePicker extends LitElement {
+  @state()
+  @consume({ context: localizeContext, subscribe: true })
+  private localize!: ContextType<typeof localizeContext>;
+
+  @state()
+  @consume({ context: localeContext, subscribe: true })
+  private locale!: ContextType<typeof localeContext>;
+
+  @state()
+  @consume({ context: configContext, subscribe: true })
+  private hassConfig!: ContextType<typeof configContext>;
+
+  @property({ attribute: false }) public startDate!: Date;
+
+  @property({ attribute: false }) public endDate!: Date;
+
+  @property({ attribute: false }) public ranges?: DateRangePickerRanges | false;
+
+  @state() private _ranges?: DateRangePickerRanges;
+
+  @property({ attribute: "time-picker", type: Boolean })
+  public timePicker = false;
+
+  @property({ type: Boolean, reflect: true })
+  public backdrop = false;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public minimal = false;
+
+  @property({ attribute: "extended-presets", type: Boolean })
+  public extendedPresets = false;
+
+  @property({ attribute: "popover-placement" })
+  public popoverPlacement:
+    | "bottom"
+    | "top"
+    | "left"
+    | "right"
+    | "top-start"
+    | "top-end"
+    | "right-start"
+    | "right-end"
+    | "bottom-start"
+    | "bottom-end"
+    | "left-start"
+    | "left-end" = "bottom-start";
+
+  @state() private _opened = false;
+
+  @state() private _pickerWrapperOpen = false;
+
+  @state() private _openedNarrow = false;
+
+  @state() private _popoverWidth = 0;
+
+  @query(".container") private _containerElement?: HTMLDivElement;
+
+  private _narrow = false;
+
+  private _unsubscribeTinyKeys?: () => void;
+
+  public connectedCallback() {
+    super.connectedCallback();
+
+    this._handleResize();
+    window.addEventListener("resize", this._handleResize);
+
+    const rangeKeys = this.extendedPresets
+      ? [...RANGE_KEYS, ...EXTENDED_RANGE_KEYS]
+      : RANGE_KEYS;
+
+    this._ranges = {};
+    rangeKeys.forEach((key) => {
+      this._ranges![
+        this.localize(`ui.components.date-range-picker.ranges.${key}`)
+      ] = calcDateRange(this.locale, this.hassConfig, key);
+    });
+  }
+
+  public open(): void {
+    this._openPicker();
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      <div class="container">
+        <div class="date-range-inputs">
+          ${!this.minimal
+            ? html`<ha-textarea
+                  id="field"
+                  mobile-multiline
+                  @click=${this._openPicker}
+                  @keydown=${this._handleKeydown}
+                  .value=${(isThisYear(this.startDate)
+                    ? formatShortDateTime(
+                        this.startDate,
+                        this.locale,
+                        this.hassConfig
+                      )
+                    : formatShortDateTimeWithYear(
+                        this.startDate,
+                        this.locale,
+                        this.hassConfig
+                      )) +
+                  (window.innerWidth >= 459 ? " - " : " - \n") +
+                  (isThisYear(this.endDate)
+                    ? formatShortDateTime(
+                        this.endDate,
+                        this.locale,
+                        this.hassConfig
+                      )
+                    : formatShortDateTimeWithYear(
+                        this.endDate,
+                        this.locale,
+                        this.hassConfig
+                      ))}
+                  .label=${this.localize(
+                    "ui.components.date-range-picker.start_date"
+                  ) +
+                  " - " +
+                  this.localize("ui.components.date-range-picker.end_date")}
+                  .disabled=${this.disabled}
+                  readonly
+                ></ha-textarea>
+                <ha-icon-button-prev
+                  .label=${this.localize("ui.common.previous")}
+                  @click=${this._handlePrev}
+                >
+                </ha-icon-button-prev>
+                <ha-icon-button-next
+                  .label=${this.localize("ui.common.next")}
+                  @click=${this._handleNext}
+                >
+                </ha-icon-button-next>`
+            : html`<ha-icon-button
+                @click=${this._openPicker}
+                .disabled=${this.disabled}
+                id="field"
+                .label=${this.localize(
+                  "ui.components.date-range-picker.select_date_range"
+                )}
+                .path=${mdiCalendar}
+              ></ha-icon-button>`}
+        </div>
+        ${this._pickerWrapperOpen || this._opened
+          ? this._openedNarrow
+            ? html`
+                <ha-bottom-sheet
+                  flexcontent
+                  .open=${this._pickerWrapperOpen}
+                  @wa-after-show=${this._dialogOpened}
+                  @closed=${this._hidePicker}
+                >
+                  ${this._renderPicker()}
+                </ha-bottom-sheet>
+              `
+            : html`
+                <wa-popover
+                  .open=${this._pickerWrapperOpen}
+                  style="--body-width: ${this._popoverWidth}px;"
+                  class=${this._opened ? "open" : ""}
+                  without-arrow
+                  distance="0"
+                  .placement=${this.popoverPlacement}
+                  for="field"
+                  auto-size="vertical"
+                  auto-size-padding="16"
+                  @wa-after-show=${this._dialogOpened}
+                  @wa-hide=${this._handlePopoverHide}
+                  @wa-after-hide=${this._hidePicker}
+                  trap-focus
+                >
+                  ${this._renderPicker()}
+                </wa-popover>
+              `
+          : nothing}
+      </div>
+    `;
+  }
+
+  private _renderPicker() {
+    if (!this._opened) {
+      return nothing;
+    }
+    return html`
+      <date-range-picker
+        .ranges=${this.ranges === false ? false : this.ranges || this._ranges}
+        .startDate=${this.startDate}
+        .endDate=${this.endDate}
+        .timePicker=${this.timePicker}
+        @cancel-date-picker=${this._closePicker}
+        @value-changed=${this._closePicker}
+      >
+      </date-range-picker>
+    `;
+  }
+
+  private _hidePicker(ev: Event) {
+    ev.stopPropagation();
+    this._opened = false;
+    this._pickerWrapperOpen = false;
+    this._unsubscribeTinyKeys?.();
+    fireEvent(this, "picker-closed");
+  }
+
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener("resize", this._handleResize);
+    this._unsubscribeTinyKeys?.();
+  }
+
+  private _handleResize = () => {
+    this._narrow =
+      window.matchMedia("(max-width: 870px)").matches ||
+      window.matchMedia("(max-height: 500px)").matches;
+
+    if (!this._openedNarrow && this._pickerWrapperOpen) {
+      this._popoverWidth = this._containerElement?.offsetWidth || 250;
+    }
+  };
+
+  private _dialogOpened = () => {
+    this._opened = true;
+    this._setTextareaFocusStyle(true);
+  };
+
+  private _handlePopoverHide = () => {
+    this._opened = false;
+  };
+
+  private _handleNext(ev: MouseEvent): void {
+    if (ev && ev.stopPropagation) ev.stopPropagation();
+    this._shift(true);
+  }
+
+  private _handlePrev(ev: MouseEvent): void {
+    if (ev && ev.stopPropagation) ev.stopPropagation();
+    this._shift(false);
+  }
+
+  private _shift(forward: boolean) {
+    if (!this.startDate) return;
+    const { start, end } = shiftDateRange(
+      this.startDate,
+      this.endDate,
+      forward,
+      this.locale,
+      this.hassConfig
+    );
+    this.startDate = start;
+    this.endDate = end;
+    fireEvent(this, "value-changed", {
+      value: {
+        startDate: this.startDate,
+        endDate: this.endDate,
+      },
+    });
+  }
+
+  private _closePicker() {
+    this._pickerWrapperOpen = false;
+  }
+
+  private _openPicker(ev?: Event) {
+    if (this.disabled) {
+      return;
+    }
+    if (this._pickerWrapperOpen) {
+      ev?.stopImmediatePropagation();
+      return;
+    }
+    this._openedNarrow = this._narrow;
+    this._popoverWidth = this._containerElement?.offsetWidth || 250;
+    this._pickerWrapperOpen = true;
+    this._unsubscribeTinyKeys = tinykeys(this, {
+      Escape: this._handleEscClose,
+    });
+  }
+
+  private _handleKeydown(ev: KeyboardEvent) {
+    if (ev.key === "Enter" || ev.key === " ") {
+      ev.stopPropagation();
+      this._openPicker(ev);
+    }
+  }
+
+  private _handleEscClose = (ev: KeyboardEvent) => {
+    ev.stopPropagation();
+  };
+
+  private _setTextareaFocusStyle(focused: boolean) {
+    const textarea = this.renderRoot.querySelector("ha-textarea");
+    if (textarea) {
+      const foundation = (textarea as any).mdcFoundation;
+      if (foundation) {
+        if (focused) {
+          foundation.activateFocus();
+        } else {
+          foundation.deactivateFocus();
+        }
+      }
+    }
+  }
+
+  static styles = [
+    css`
+      ha-icon-button {
+        direction: var(--direction);
+      }
+
+      .date-range-inputs {
+        display: flex;
+        align-items: center;
+        gap: var(--ha-space-2);
+      }
+
+      ha-textarea {
+        display: inline-block;
+        width: 340px;
+      }
+      @media only screen and (max-width: 460px) {
+        ha-textarea {
+          width: 100%;
+        }
+      }
+
+      wa-popover {
+        --wa-space-l: 0;
+      }
+
+      wa-popover::part(dialog)::backdrop {
+        opacity: 0;
+        transition: opacity var(--ha-animation-duration-normal) ease-out;
+      }
+
+      wa-popover.open::part(dialog)::backdrop {
+        opacity: 1;
+      }
+
+      :host(:not([backdrop])) wa-popover::part(dialog)::backdrop {
+        background: none;
+      }
+
+      wa-popover::part(body) {
+        min-width: max(var(--body-width), 250px);
+        max-width: calc(
+          100vw - var(--safe-area-inset-left) - var(
+              --safe-area-inset-right
+            ) - var(--ha-space-8)
+        );
+        overflow: hidden;
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-date-range-picker": HaDateRangePicker;
+  }
+}
--- a/src/components/date-picker/ha-dialog-date-picker.ts
+++ b/src/components/date-picker/ha-dialog-date-picker.ts
@@ -8,16 +8,22 @@ import {
  formatDateMonth,
  formatDateShort,
  formatDateYear,
-} from "../common/datetime/format_date";
-import { configContext, localeContext, localizeContext } from "../data/context";
-import { DialogMixin } from "../dialogs/dialog-mixin";
-import "./ha-button";
-import type { DatePickerDialogParams } from "./ha-date-input";
-import "./ha-dialog";
-import "./ha-dialog-footer";
-import "./ha-icon-button";
-import "./ha-icon-button-next";
-import "./ha-icon-button-prev";
+  formatISODateOnly,
+} from "../../common/datetime/format_date";
+import {
+  configContext,
+  localeContext,
+  localizeContext,
+} from "../../data/context";
+import { DialogMixin } from "../../dialogs/dialog-mixin";
+import "../ha-button";
+import type { DatePickerDialogParams } from "../ha-date-input";
+import "../ha-dialog";
+import "../ha-dialog-footer";
+import "../ha-icon-button";
+import "../ha-icon-button-next";
+import "../ha-icon-button-prev";
+import { datePickerStyles } from "./styles";

 type CalendarDate = HTMLElementTagNameMap["calendar-date"];

@@ -75,7 +81,7 @@ export class HaDialogDatePicker extends DialogMixin<DatePickerDialogParams>(
        ? {
            year: this._pickerYear,
            title: formatDateShort(date, this.locale, this.hassConfig),
-            dateString: this.params.value.substring(0, 10),
+            dateString: formatISODateOnly(date, this.locale, this.hassConfig),
          }
        : undefined;
    }
@@ -160,7 +166,8 @@ export class HaDialogDatePicker extends DialogMixin<DatePickerDialogParams>(
    this._value = {
      year: formatDateYear(date, this.locale, this.hassConfig),
      title: formatDateShort(date, this.locale, this.hassConfig),
-      dateString: value || date.toISOString().substring(0, 10),
+      dateString:
+        value || formatISODateOnly(date, this.locale, this.hassConfig),
    };

    if (setFocusDay) {
@@ -196,81 +203,14 @@ export class HaDialogDatePicker extends DialogMixin<DatePickerDialogParams>(
    this.closeDialog();
  }

-  static styles = css`
-    ha-dialog {
-      --dialog-content-padding: 0;
-    }
-    calendar-date {
-      width: 100%;
-    }
-    calendar-date::part(button) {
-      border: none;
-      background-color: unset;
-      border-radius: var(--ha-border-radius-circle);
-      outline-offset: -2px;
-      outline-color: var(--ha-color-neutral-60);
-    }
-
-    calendar-month {
-      width: 100%;
-      margin: 0 auto;
-      min-height: calc(42px * 7);
-    }
-
-    calendar-month::part(heading) {
-      display: none;
-    }
-    calendar-month::part(day) {
-      color: var(--disabled-text-color);
-      font-size: var(--ha-font-size-m);
-      font-family: var(--ha-font-body);
-    }
-    calendar-month::part(button),
-    calendar-month::part(selected):focus-visible {
-      color: var(--primary-text-color);
-      height: 32px;
-      width: 32px;
-      margin: var(--ha-space-1);
-      border-radius: var(--ha-border-radius-circle);
-    }
-    calendar-month::part(button):focus-visible {
-      background-color: inherit;
-      outline: 1px solid var(--ha-color-neutral-60);
-      outline-offset: 2px;
-    }
-    calendar-month::part(button):hover {
-      background-color: var(--ha-color-fill-primary-quiet-hover);
-    }
-    calendar-month::part(today) {
-      color: var(--primary-color);
-    }
-    calendar-month::part(selected),
-    calendar-month::part(selected):hover {
-      color: var(--text-primary-color);
-      background-color: var(--primary-color);
-      height: 40px;
-      width: 40px;
-      margin: 0;
-    }
-    calendar-month::part(selected):focus-visible {
-      background-color: var(--primary-color);
-      color: var(--text-primary-color);
-    }
-
-    .heading {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 100%;
-      font-size: var(--ha-font-size-m);
-      font-weight: var(--ha-font-weight-medium);
-    }
-    .month-year {
-      flex: 1;
-      text-align: center;
-      margin-left: 48px;
-    }
-  `;
+  static styles = [
+    datePickerStyles,
+    css`
+      ha-dialog {
+        --dialog-content-padding: 0;
+      }
+    `,
+  ];
 }

 declare global {
--- a/src/components/date-picker/styles.ts
+++ b/src/components/date-picker/styles.ts
@@ -0,0 +1,144 @@
+import { css } from "lit";
+
+export const datePickerStyles = css`
+  calendar-range,
+  calendar-date {
+    width: 100%;
+    min-width: 300px;
+  }
+  calendar-date::part(button),
+  calendar-range::part(button) {
+    border: none;
+    background-color: unset;
+    border-radius: var(--ha-border-radius-circle);
+    outline-offset: -2px;
+    outline-color: var(--ha-color-neutral-60);
+  }
+
+  calendar-month {
+    width: calc(40px * 7);
+    margin: 0 auto;
+    min-height: calc(42px * 7);
+  }
+
+  calendar-month::part(heading) {
+    display: none;
+  }
+  calendar-month::part(day) {
+    color: var(--disabled-text-color);
+    font-size: var(--ha-font-size-m);
+    font-family: var(--ha-font-body);
+  }
+  calendar-month::part(button) {
+    color: var(--primary-text-color);
+    height: 32px;
+    width: 32px;
+    margin: var(--ha-space-1);
+    border-radius: var(--ha-border-radius-circle);
+  }
+  calendar-month::part(button):focus-visible {
+    background-color: inherit;
+    outline: 2px solid var(--accent-color);
+    outline-offset: 2px;
+  }
+  calendar-month::part(button):hover {
+    background-color: var(--ha-color-fill-primary-quiet-hover);
+  }
+  calendar-month::part(today) {
+    color: var(--primary-color);
+  }
+  calendar-month::part(range-inner),
+  calendar-month::part(range-start),
+  calendar-month::part(range-end),
+  calendar-month::part(selected),
+  calendar-month::part(selected):hover {
+    color: var(--text-primary-color);
+    background-color: var(--primary-color);
+    height: 40px;
+    width: 40px;
+    margin: 0;
+  }
+  calendar-month::part(selected):focus-visible {
+    background-color: var(--primary-color);
+    color: var(--text-primary-color);
+  }
+
+  calendar-month::part(outside) {
+    cursor: pointer;
+  }
+
+  .heading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    font-size: var(--ha-font-size-m);
+    font-weight: var(--ha-font-weight-medium);
+  }
+  .month-year {
+    flex: 1;
+    text-align: center;
+    margin-left: 48px;
+  }
+
+  @media only screen and (max-width: 500px) {
+    calendar-month {
+      min-height: calc(34px * 7);
+    }
+    calendar-month::part(day) {
+      font-size: var(--ha-font-size-s);
+    }
+    calendar-month::part(button) {
+      height: 26px;
+      width: 26px;
+    }
+    calendar-month::part(range-inner),
+    calendar-month::part(range-start),
+    calendar-month::part(range-end),
+    calendar-month::part(selected),
+    calendar-month::part(selected):hover {
+      height: 34px;
+      width: 34px;
+    }
+    .heading {
+      font-size: var(--ha-font-size-s);
+    }
+    .month-year {
+      margin-left: 40px;
+    }
+  }
+`;
+
+export const dateRangePickerStyles = css`
+  calendar-month::part(selected):focus-visible {
+    background-color: var(--primary-color);
+    color: var(--text-primary-color);
+  }
+  calendar-month::part(range-inner),
+  calendar-month::part(range-start),
+  calendar-month::part(range-end),
+  calendar-month::part(range-inner):hover,
+  calendar-month::part(range-start):hover,
+  calendar-month::part(range-end):hover {
+    color: var(--text-primary-color);
+    background-color: var(--primary-color);
+    border-radius: var(--ha-border-radius-square);
+    display: block;
+    margin: 0;
+  }
+  calendar-month::part(range-start),
+  calendar-month::part(range-start):hover {
+    border-top-left-radius: var(--ha-border-radius-circle);
+    border-bottom-left-radius: var(--ha-border-radius-circle);
+  }
+  calendar-month::part(range-end),
+  calendar-month::part(range-end):hover {
+    border-top-right-radius: var(--ha-border-radius-circle);
+    border-bottom-right-radius: var(--ha-border-radius-circle);
+  }
+  calendar-month::part(range-start):hover,
+  calendar-month::part(range-end):hover,
+  calendar-month::part(range-inner):hover {
+    color: var(--primary-text-color);
+  }
+`;
--- a/src/components/date-range-picker.ts
+++ b/src/components/date-range-picker.ts
@@ -1,359 +0,0 @@
-import wrap from "@vue/web-component-wrapper";
-import { customElement } from "lit/decorators";
-import Vue from "vue";
-import DateRangePicker from "vue2-daterange-picker";
-// @ts-ignore
-import dateRangePickerStyles from "vue2-daterange-picker/dist/vue2-daterange-picker.css";
-import {
-  localizeMonths,
-  localizeWeekdays,
-} from "../common/datetime/localize_date";
-import { fireEvent } from "../common/dom/fire_event";
-import { mainWindow } from "../common/dom/get_main_window";
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const CustomDateRangePicker = Vue.extend({
-  mixins: [DateRangePicker],
-  methods: {
-    // Set the current date to the left picker instead of the right picker because the right is hidden
-    selectMonthDate() {
-      const dt: Date = this.end || new Date();
-      // @ts-ignore
-      this.changeLeftMonth({
-        year: dt.getFullYear(),
-        month: dt.getMonth() + 1,
-      });
-    },
-    // Fix the start/end date calculation when selecting a date range. The
-    // original code keeps track of the first clicked date (in_selection) but it
-    // never sets it to either the start or end date variables, so if the
-    // in_selection date is between the start and end date that were set by the
-    // hover the selection will enter a broken state that's counter-intuitive
-    // when hovering between weeks and leads to a random date when selecting a
-    // range across months. This bug doesn't seem to be present on v0.6.7 of the
-    // lib
-    hoverDate(value: Date) {
-      if (this.readonly) return;
-
-      if (this.in_selection) {
-        const pickA = this.in_selection as Date;
-        const pickB = value;
-
-        this.start = this.normalizeDatetime(
-          Math.min(pickA.valueOf(), pickB.valueOf()),
-          this.start
-        );
-        this.end = this.normalizeDatetime(
-          Math.max(pickA.valueOf(), pickB.valueOf()),
-          this.end
-        );
-      }
-
-      this.$emit("hover-date", value);
-    },
-  },
-});
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const Component = Vue.extend({
-  props: {
-    timePicker: {
-      type: Boolean,
-      default: true,
-    },
-    twentyfourHours: {
-      type: Boolean,
-      default: true,
-    },
-    openingDirection: {
-      type: String,
-      default: "right",
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    ranges: {
-      type: Boolean,
-      default: true,
-    },
-    startDate: {
-      type: [String, Date],
-      default() {
-        return new Date();
-      },
-    },
-    endDate: {
-      type: [String, Date],
-      default() {
-        return new Date();
-      },
-    },
-    firstDay: {
-      type: Number,
-      default: 1,
-    },
-    autoApply: {
-      type: Boolean,
-      default: false,
-    },
-    language: {
-      type: String,
-      default: "en",
-    },
-    opensVertical: {
-      type: String,
-      default: undefined,
-    },
-  },
-  render(createElement) {
-    // @ts-expect-error
-    return createElement(CustomDateRangePicker, {
-      props: {
-        "time-picker": this.timePicker,
-        "auto-apply": this.autoApply,
-        opens: this.openingDirection,
-        "show-dropdowns": false,
-        "time-picker24-hour": this.twentyfourHours,
-        disabled: this.disabled,
-        ranges: this.ranges ? {} : false,
-        "locale-data": {
-          firstDay: this.firstDay,
-          daysOfWeek: localizeWeekdays(this.language, true),
-          monthNames: localizeMonths(this.language, false),
-        },
-      },
-      model: {
-        value: {
-          startDate: this.startDate,
-          endDate: this.endDate,
-        },
-        callback: (value) => {
-          fireEvent(this.$el as HTMLElement, "change", value);
-        },
-        expression: "dateRange",
-      },
-      on: {
-        toggle: (open: boolean) => {
-          fireEvent(this.$el as HTMLElement, "toggle", { open });
-        },
-      },
-      scopedSlots: {
-        input() {
-          return createElement("slot", {
-            domProps: { name: "input" },
-          });
-        },
-        header() {
-          return createElement("slot", {
-            domProps: { name: "header" },
-          });
-        },
-        ranges() {
-          return createElement("slot", {
-            domProps: { name: "ranges" },
-          });
-        },
-        footer() {
-          return createElement("slot", {
-            domProps: { name: "footer" },
-          });
-        },
-      },
-    });
-  },
-});
-
-// Assertion corrects HTMLElement type from package
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const WrappedElement = wrap(
-  Vue,
-  Component
-) as unknown as CustomElementConstructor;
-
-@customElement("date-range-picker")
-class DateRangePickerElement extends WrappedElement {
-  constructor() {
-    super();
-    const style = document.createElement("style");
-    style.innerHTML = `
-          ${dateRangePickerStyles}
-          .calendars {
-            display: flex;
-            flex-wrap: nowrap !important;
-          }
-          .daterangepicker {
-            top: auto;
-            box-shadow: var(--ha-card-box-shadow, none);
-            background-color: var(--card-background-color);
-            border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));
-            border-width: var(--ha-card-border-width, 1px);
-            border-style: solid;
-            border-color: var(
-              --ha-card-border-color,
-              var(--divider-color, #e0e0e0)
-            );
-            color: var(--primary-text-color);
-            min-width: initial !important;
-            max-height: var(--date-range-picker-max-height);
-            overflow-y: auto;
-                      }
-          .daterangepicker:before {
-            display: none;
-          }
-          .daterangepicker:after {
-            border-bottom: 6px solid var(--card-background-color);
-          }
-          .daterangepicker .calendar-table {
-            background-color: var(--card-background-color);
-            border: none;
-          }
-          .daterangepicker .calendar-table td,
-          .daterangepicker .calendar-table th {
-            background-color: transparent;
-            color: var(--secondary-text-color);
-            border-radius: var(--ha-border-radius-square);
-            outline: none;
-            min-width: 32px;
-            height: 32px;
-          }
-          .daterangepicker td.off,
-          .daterangepicker td.off.end-date,
-          .daterangepicker td.off.in-range,
-          .daterangepicker td.off.start-date {
-            background-color: var(--secondary-background-color);
-            color: var(--disabled-text-color);
-          }
-          .daterangepicker td.in-range {
-            background-color: var(--light-primary-color);
-            color: var(--text-light-primary-color, var(--primary-text-color));
-          }
-          .daterangepicker td.active,
-          .daterangepicker td.active:hover {
-            background-color: var(--primary-color);
-            color: var(--text-primary-color);
-          }
-          .daterangepicker td.start-date.end-date {
-            border-radius: var(--ha-border-radius-circle);
-          }
-          .daterangepicker td.start-date {
-            border-radius: var(--ha-border-radius-circle) var(--ha-border-radius-square) var(--ha-border-radius-square) var(--ha-border-radius-circle);
-          }
-          .daterangepicker td.end-date {
-            border-radius: var(--ha-border-radius-square) var(--ha-border-radius-circle) var(--ha-border-radius-circle) var(--ha-border-radius-square);
-          }
-          .reportrange-text {
-            background: none !important;
-            padding: 0 !important;
-            border: none !important;
-          }
-          .daterangepicker .calendar-table .next span,
-          .daterangepicker .calendar-table .prev span {
-            border: solid var(--primary-text-color);
-            border-width: 0 2px 2px 0;
-          }
-          .daterangepicker .ranges li {
-            outline: none;
-          }
-          .daterangepicker .ranges li:hover {
-            background-color: var(--secondary-background-color);
-          }
-          .daterangepicker .ranges li.active {
-            background-color: var(--primary-color);
-            color: var(--text-primary-color);
-          }
-          .daterangepicker select.ampmselect,
-          .daterangepicker select.hourselect,
-          .daterangepicker select.minuteselect,
-          .daterangepicker select.secondselect {
-            background: var(--card-background-color);
-            border: 1px solid var(--divider-color);
-            color: var(--primary-color);
-          }
-          .daterangepicker .drp-buttons .btn {
-            border: 1px solid var(--primary-color);
-            background-color: transparent;
-            color: var(--primary-color);
-            border-radius: var(--ha-border-radius-sm);
-            padding: 8px;
-            cursor: pointer;
-          }
-          .calendars-container {
-            flex-direction: column;
-            align-items: center;
-          }
-          .drp-calendar.col.right .calendar-table {
-            display: none;
-          }
-          .daterangepicker.show-ranges .drp-calendar.left {
-            border-left: 0px;
-          }
-          .daterangepicker .drp-calendar.left {
-            padding: 8px;
-            width: unset;
-            max-width: unset;
-            min-width: 270px;
-          }
-          .daterangepicker.show-calendar .ranges {
-            margin-top: 0;
-            padding-top: 8px;
-            border-right: 1px solid var(--divider-color);
-          }
-          @media only screen and (max-width: 800px) {
-            .calendars {
-              flex-direction: column;
-            }
-          }
-          .calendar-table {
-            padding: 0 !important;
-          }
-          .calendar-time {
-            direction: ltr;
-          }
-          .daterangepicker.ltr {
-            direction: var(--direction);
-            text-align: var(--float-start);
-          }
-          .vue-daterange-picker{
-            min-width: unset !important;
-            display: block !important;
-          }
-          :host([opens-vertical="up"]) .daterangepicker {
-            bottom: 100%;
-            top: auto !important;
-          }
-        `;
-    if (mainWindow.document.dir === "rtl") {
-      style.innerHTML += `
-            .daterangepicker .calendar-table .next span {
-              transform: rotate(135deg);
-              -webkit-transform: rotate(135deg);
-            }
-            .daterangepicker .calendar-table .prev span {
-              transform: rotate(-45deg);
-              -webkit-transform: rotate(-45deg);
-            }
-            .daterangepicker td.start-date {
-              border-radius: var(--ha-border-radius-square) var(--ha-border-radius-circle) var(--ha-border-radius-circle) var(--ha-border-radius-square);
-            }
-            .daterangepicker td.end-date {
-              border-radius: var(--ha-border-radius-circle) var(--ha-border-radius-square) var(--ha-border-radius-square) var(--ha-border-radius-circle);
-            }
-            `;
-    }
-
-    const shadowRoot = this.shadowRoot!;
-    shadowRoot.appendChild(style);
-    // Stop click events from reaching the document, otherwise it will close the picker immediately.
-    shadowRoot.addEventListener("click", (ev) => ev.stopPropagation());
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "date-range-picker": DateRangePickerElement;
-  }
-  interface HASSDomEvents {
-    toggle: { open: boolean };
-  }
-}
--- a/src/components/ha-base-time-input.ts
+++ b/src/components/ha-base-time-input.ts
@@ -4,6 +4,7 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, queryAll } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../common/dom/fire_event";
+import { stopPropagation } from "../common/dom/stop_propagation";
 import "./ha-icon-button";
 import "./ha-input-helper-text";
 import "./ha-select";
@@ -133,6 +134,9 @@ export class HaBaseTimeInput extends LitElement {

  @property({ type: Boolean, reflect: true }) public clearable?: boolean;

+  @property({ attribute: "placeholder-labels", type: Boolean })
+  public placeholderLabels = false;
+
  @queryAll("ha-input") private _inputs?: HaInput[];

  static shadowRootOptions = {
@@ -158,7 +162,8 @@ export class HaBaseTimeInput extends LitElement {
                  type="number"
                  inputmode="numeric"
                  .value=${this.days.toFixed()}
-                  .label=${this.dayLabel}
+                  .label=${!this.placeholderLabels ? this.dayLabel : ""}
+                  .placeholder=${this.placeholderLabels ? this.dayLabel : ""}
                  name="days"
                  @change=${this._valueChanged}
                  @focusin=${this._onFocus}
@@ -178,7 +183,8 @@ export class HaBaseTimeInput extends LitElement {
            type="number"
            inputmode="numeric"
            .value=${this.hours.toFixed()}
-            .label=${this.hourLabel}
+            .label=${!this.placeholderLabels ? this.hourLabel : ""}
+            .placeholder=${this.placeholderLabels ? this.hourLabel : ""}
            name="hours"
            @change=${this._valueChanged}
            @focusin=${this._onFocus}
@@ -197,7 +203,8 @@ export class HaBaseTimeInput extends LitElement {
            type="number"
            inputmode="numeric"
            .value=${this._formatValue(this.minutes)}
-            .label=${this.minLabel}
+            .label=${!this.placeholderLabels ? this.minLabel : ""}
+            .placeholder=${this.placeholderLabels ? this.minLabel : ""}
            @change=${this._valueChanged}
            @focusin=${this._onFocus}
            name="minutes"
@@ -220,7 +227,8 @@ export class HaBaseTimeInput extends LitElement {
                  inputmode="decimal"
                  step="any"
                  .value=${this._formatValue(this.seconds)}
-                  .label=${this.secLabel}
+                  .label=${!this.placeholderLabels ? this.secLabel : ""}
+                  .placeholder=${this.placeholderLabels ? this.secLabel : ""}
                  @change=${this._valueChanged}
                  @focusin=${this._onFocus}
                  name="seconds"
@@ -241,7 +249,8 @@ export class HaBaseTimeInput extends LitElement {
                id="millisec"
                type="number"
                .value=${this._formatValue(this.milliseconds, 3)}
-                .label=${this.millisecLabel}
+                .label=${!this.placeholderLabels ? this.millisecLabel : ""}
+                .placeholder=${this.placeholderLabels ? this.millisecLabel : ""}
                @change=${this._valueChanged}
                @focusin=${this._onFocus}
                name="milliseconds"
@@ -263,6 +272,7 @@ export class HaBaseTimeInput extends LitElement {
                .disabled=${this.disabled}
                .name=${"amPm"}
                @selected=${this._valueChanged}
+                @wa-after-hide=${stopPropagation}
                .options=${["AM", "PM"]}
              >
              </ha-select>`}
--- a/src/components/ha-date-input.ts
+++ b/src/components/ha-date-input.ts
@@ -11,7 +11,8 @@ import "./ha-svg-icon";
 import "./ha-textfield";
 import type { HaTextField } from "./ha-textfield";

-const loadDatePickerDialog = () => import("./ha-dialog-date-picker");
+const loadDatePickerDialog = () =>
+  import("./date-picker/ha-dialog-date-picker");

 export interface DatePickerDialogParams {
  value?: string;
--- a/src/components/ha-date-range-picker.ts
+++ b/src/components/ha-date-range-picker.ts
@@ -1,422 +0,0 @@
-import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
-
-import { mdiCalendar } from "@mdi/js";
-import { isThisYear } from "date-fns";
-import { TZDate } from "@date-fns/tz";
-import type { PropertyValues, TemplateResult } from "lit";
-import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
-import { shiftDateRange } from "../common/datetime/calc_date";
-import type { DateRange } from "../common/datetime/calc_date_range";
-import { calcDateRange } from "../common/datetime/calc_date_range";
-import { firstWeekdayIndex } from "../common/datetime/first_weekday";
-import {
-  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-button";
-import "./ha-icon-button";
-import "./ha-icon-button-next";
-import "./ha-icon-button-prev";
-import "./ha-list";
-import "./ha-list-item";
-import "./ha-textarea";
-
-export type DateRangePickerRanges = Record<string, [Date, Date]>;
-
-declare global {
-  interface HASSDomEvents {
-    "preset-selected": { index: number };
-  }
-}
-
-const RANGE_KEYS: DateRange[] = ["today", "yesterday", "this_week"];
-const EXTENDED_RANGE_KEYS: DateRange[] = [
-  "this_month",
-  "this_year",
-  "now-1h",
-  "now-12h",
-  "now-24h",
-  "now-7d",
-  "now-30d",
-];
-
-@customElement("ha-date-range-picker")
-export class HaDateRangePicker extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public startDate!: Date;
-
-  @property({ attribute: false }) public endDate!: Date;
-
-  @property({ attribute: false }) public ranges?: DateRangePickerRanges | false;
-
-  @state() private _ranges?: DateRangePickerRanges;
-
-  @property({ attribute: "auto-apply", type: Boolean })
-  public autoApply = false;
-
-  @property({ attribute: "time-picker", type: Boolean })
-  public timePicker = false;
-
-  public open(): void {
-    this._openPicker();
-  }
-
-  @property({ type: Boolean }) public disabled = false;
-
-  @property({ type: Boolean }) public minimal = false;
-
-  @state() private _hour24format = false;
-
-  @property({ attribute: "extended-presets", type: Boolean })
-  public extendedPresets = false;
-
-  @property({ attribute: "vertical-opening-direction" })
-  public verticalOpeningDirection?: "up" | "down";
-
-  @property({ attribute: false }) public openingDirection?:
-    | "right"
-    | "left"
-    | "center"
-    | "inline";
-
-  @state() private _calcedOpeningDirection?:
-    | "right"
-    | "left"
-    | "center"
-    | "inline";
-
-  @state() private _calcedVerticalOpeningDirection?: "up" | "down";
-
-  protected willUpdate(changedProps: PropertyValues) {
-    if (
-      (!this.hasUpdated && this.ranges === undefined) ||
-      (changedProps.has("hass") &&
-        this.hass?.localize !== changedProps.get("hass")?.localize)
-    ) {
-      const rangeKeys = this.extendedPresets
-        ? [...RANGE_KEYS, ...EXTENDED_RANGE_KEYS]
-        : RANGE_KEYS;
-
-      this._ranges = {};
-      rangeKeys.forEach((key) => {
-        this._ranges![
-          this.hass.localize(`ui.components.date-range-picker.ranges.${key}`)
-        ] = calcDateRange(this.hass, key);
-      });
-    }
-  }
-
-  protected updated(changedProps: PropertyValues) {
-    if (changedProps.has("hass")) {
-      const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-      if (!oldHass || oldHass.locale !== this.hass.locale) {
-        this._hour24format = !useAmPm(this.hass.locale);
-      }
-    }
-  }
-
-  protected render(): TemplateResult {
-    return html`
-      <date-range-picker
-        ?disabled=${this.disabled}
-        ?auto-apply=${this.autoApply}
-        time-picker=${this.timePicker}
-        twentyfour-hours=${this._hour24format}
-        start-date=${this._formatDate(this.startDate)}
-        end-date=${this._formatDate(this.endDate)}
-        ?ranges=${this.ranges !== false}
-        opening-direction=${ifDefined(
-          this.openingDirection || this._calcedOpeningDirection
-        )}
-        opens-vertical=${ifDefined(
-          this.verticalOpeningDirection || this._calcedVerticalOpeningDirection
-        )}
-        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
-            ? html`<ha-textarea
-                  mobile-multiline
-                  .value=${(isThisYear(this.startDate)
-                    ? formatShortDateTime(
-                        this.startDate,
-                        this.hass.locale,
-                        this.hass.config
-                      )
-                    : formatShortDateTimeWithYear(
-                        this.startDate,
-                        this.hass.locale,
-                        this.hass.config
-                      )) +
-                  (window.innerWidth >= 459 ? " - " : " - \n") +
-                  (isThisYear(this.endDate)
-                    ? formatShortDateTime(
-                        this.endDate,
-                        this.hass.locale,
-                        this.hass.config
-                      )
-                    : formatShortDateTimeWithYear(
-                        this.endDate,
-                        this.hass.locale,
-                        this.hass.config
-                      ))}
-                  .label=${this.hass.localize(
-                    "ui.components.date-range-picker.start_date"
-                  ) +
-                  " - " +
-                  this.hass.localize(
-                    "ui.components.date-range-picker.end_date"
-                  )}
-                  .disabled=${this.disabled}
-                  @click=${this._handleInputClick}
-                  readonly
-                ></ha-textarea>
-                <ha-icon-button-prev
-                  .label=${this.hass.localize("ui.common.previous")}
-                  @click=${this._handlePrev}
-                >
-                </ha-icon-button-prev>
-                <ha-icon-button-next
-                  .label=${this.hass.localize("ui.common.next")}
-                  @click=${this._handleNext}
-                >
-                </ha-icon-button-next>`
-            : html`<ha-icon-button
-                .label=${this.hass.localize(
-                  "ui.components.date-range-picker.select_date_range"
-                )}
-                .path=${mdiCalendar}
-              ></ha-icon-button>`}
-        </div>
-        ${this.ranges !== false && (this.ranges || this._ranges)
-          ? html`<div slot="ranges" class="date-range-ranges">
-              <ha-list @action=${this._setDateRange} activatable>
-                ${Object.keys(this.ranges || this._ranges!).map(
-                  (name) => html`<ha-list-item>${name}</ha-list-item>`
-                )}
-              </ha-list>
-            </div>`
-          : nothing}
-        <div slot="footer" class="date-range-footer">
-          <ha-button appearance="plain" @click=${this._cancelDateRange}
-            >${this.hass.localize("ui.common.cancel")}</ha-button
-          >
-          <ha-button @click=${this._applyDateRange}
-            >${this.hass.localize(
-              "ui.components.date-range-picker.select"
-            )}</ha-button
-          >
-        </div>
-      </date-range-picker>
-    `;
-  }
-
-  private _handleNext(ev: MouseEvent): void {
-    if (ev && ev.stopPropagation) ev.stopPropagation();
-    this._shift(true);
-  }
-
-  private _handlePrev(ev: MouseEvent): void {
-    if (ev && ev.stopPropagation) ev.stopPropagation();
-    this._shift(false);
-  }
-
-  private _shift(forward: boolean) {
-    if (!this.startDate) return;
-    const { start, end } = shiftDateRange(
-      this.startDate,
-      this.endDate,
-      forward,
-      this.hass.locale,
-      this.hass.config
-    );
-    this.startDate = start;
-    this.endDate = end;
-    const dateRange = [start, end];
-    const dateRangePicker = this._dateRangePicker;
-    dateRangePicker.clickRange(dateRange);
-    dateRangePicker.clickedApply();
-  }
-
-  private _setDateRange(ev: CustomEvent<ActionDetail>) {
-    const dateRange = Object.values(this.ranges || this._ranges!)[
-      ev.detail.index
-    ];
-
-    fireEvent(this, "preset-selected", {
-      index: ev.detail.index,
-    });
-    const dateRangePicker = this._dateRangePicker;
-    dateRangePicker.clickRange(dateRange);
-    dateRangePicker.clickedApply();
-  }
-
-  private _cancelDateRange() {
-    this._dateRangePicker.clickCancel();
-  }
-
-  private _applyDateRange() {
-    let start = new Date(this._dateRangePicker.start);
-    let end = new Date(this._dateRangePicker.end);
-
-    if (this.timePicker) {
-      start.setSeconds(0);
-      start.setMilliseconds(0);
-      end.setSeconds(0);
-      end.setMilliseconds(0);
-
-      if (
-        end.getHours() === 0 &&
-        end.getMinutes() === 0 &&
-        start.getFullYear() === end.getFullYear() &&
-        start.getMonth() === end.getMonth() &&
-        start.getDate() === end.getDate()
-      ) {
-        end.setDate(end.getDate() + 1);
-      }
-    }
-
-    if (this.hass.locale.time_zone === TimeZone.server) {
-      start = new Date(new TZDate(start, this.hass.config.time_zone).getTime());
-      end = new Date(new TZDate(end, this.hass.config.time_zone).getTime());
-    }
-
-    if (
-      start.getTime() !== this._dateRangePicker.start.getTime() ||
-      end.getTime() !== this._dateRangePicker.end.getTime()
-    ) {
-      this._dateRangePicker.clickRange([start, end]);
-    }
-    this._dateRangePicker.clickedApply();
-  }
-
-  private _formatDate(date: Date): string {
-    if (this.hass.locale.time_zone === TimeZone.server) {
-      return new TZDate(date, this.hass.config.time_zone).toISOString();
-    }
-    return date.toISOString();
-  }
-
-  private get _dateRangePicker() {
-    const dateRangePicker = this.shadowRoot!.querySelector(
-      "date-range-picker"
-    ) as any;
-    return dateRangePicker.vueComponent.$children[0];
-  }
-
-  private _openPicker() {
-    if (!this._dateRangePicker.open) {
-      const datePicker = this.shadowRoot!.querySelector(
-        "date-range-picker div.date-range-inputs"
-      ) as any;
-      datePicker?.click();
-    }
-  }
-
-  private _handleInputClick() {
-    // close the date picker, so it will open again on the click event
-    if (this._dateRangePicker.open) {
-      this._dateRangePicker.open = false;
-    }
-  }
-
-  private _handleClick() {
-    // calculate opening direction if not set
-    if (!this._dateRangePicker.open) {
-      if (!this.openingDirection) {
-        const datePickerPosition = this.getBoundingClientRect().x;
-        let opens: "right" | "left" | "center" | "inline";
-        if (datePickerPosition > (2 * window.innerWidth) / 3) {
-          opens = "left";
-        } else if (datePickerPosition < window.innerWidth / 3) {
-          opens = "right";
-        } else {
-          opens = "center";
-        }
-        this._calcedOpeningDirection = opens;
-      }
-      if (!this.verticalOpeningDirection) {
-        const rect = this.getBoundingClientRect();
-        this._calcedVerticalOpeningDirection =
-          rect.top > window.innerHeight / 2 ? "up" : "down";
-      }
-    }
-  }
-
-  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 {
-      direction: var(--direction);
-    }
-
-    .date-range-inputs {
-      display: flex;
-      align-items: center;
-      gap: var(--ha-space-2);
-    }
-
-    .date-range-ranges {
-      border-right: 1px solid var(--divider-color);
-    }
-
-    .date-range-footer {
-      display: flex;
-      justify-content: flex-end;
-      padding: 8px;
-      border-top: 1px solid var(--divider-color);
-    }
-
-    ha-textarea {
-      display: inline-block;
-      width: 340px;
-    }
-    @media only screen and (max-width: 460px) {
-      ha-textarea {
-        width: 100%;
-      }
-    }
-    @media only screen and (max-width: 800px) {
-      .date-range-ranges {
-        border-right: none;
-        border-bottom: 1px solid var(--divider-color);
-      }
-    }
-
-    @media only screen and (max-height: 940px) and (max-width: 800px) {
-      .date-range-ranges {
-        overflow: auto;
-        max-height: calc(70vh - 330px);
-        min-height: 160px;
-      }
-
-      :host([header-position]) .date-range-ranges {
-        max-height: calc(90vh - 430px);
-      }
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-date-range-picker": HaDateRangePicker;
-  }
-}
--- a/src/components/ha-time-input.ts
+++ b/src/components/ha-time-input.ts
@@ -26,6 +26,9 @@ export class HaTimeInput extends LitElement {

  @property({ type: Boolean, reflect: true }) public clearable?: boolean;

+  @property({ attribute: "placeholder-labels", type: Boolean })
+  public placeholderLabels = false;
+
  @query("ha-base-time-input") private _input?: HaBaseTimeInput;

  public reportValidity(): boolean {
@@ -67,6 +70,7 @@ export class HaTimeInput extends LitElement {
        .required=${this.required}
        .clearable=${this.clearable && this.value !== undefined}
        .helper=${this.helper}
+        .placeholderLabels=${this.placeholderLabels}
        day-label="dd"
        hour-label="hh"
        min-label="mm"
--- a/src/components/input/ha-input.ts
+++ b/src/components/input/ha-input.ts
@@ -271,7 +271,7 @@ export class HaInput extends LitElement {
        .type=${this.type}
        .value=${this.value ?? null}
        .withClear=${this.withClear}
-        .placeholder=${this.placeholder && this.label ? this.placeholder : ""}
+        .placeholder=${this.placeholder}
        .readonly=${this.readonly}
        .passwordToggle=${this.passwordToggle}
        .passwordVisible=${this.passwordVisible}
@@ -294,7 +294,8 @@ export class HaInput extends LitElement {
        .disabled=${this.disabled}
        class=${classMap({
          invalid: this.invalid || this._invalid,
-          "label-raised": this.value || this.placeholder,
+          "label-raised": this.value || (this.label && this.placeholder),
+          "no-label": !this.label,
        })}
        @input=${this._handleInput}
        @change=${this._handleChange}
@@ -304,11 +305,7 @@ export class HaInput extends LitElement {
      >
        ${this.label || hasLabelSlot
          ? html`<slot name="label" slot="label"
-              >${this._renderLabel(
-                this.label,
-                this.placeholder,
-                this.required
-              )}</slot
+              >${this._renderLabel(this.label, this.required)}</slot
            >`
          : nothing}
        <slot
@@ -388,33 +385,29 @@ export class HaInput extends LitElement {
    }
  };

-  private _renderLabel = memoizeOne(
-    (label: string, placeholder: string, required: boolean) => {
-      // fallback to placeholder if no label is provided
-      const text = label || placeholder;
-      if (!required) {
-        return text;
-      }
-
-      let marker = getComputedStyle(this).getPropertyValue(
-        "--ha-input-required-marker"
-      );
-
-      if (!marker) {
-        marker = "*";
-      }
-
-      if (marker.startsWith('"') && marker.endsWith('"')) {
-        marker = marker.slice(1, -1);
-      }
-
-      if (!marker) {
-        return text;
-      }
-
-      return `${text}${marker}`;
+  private _renderLabel = memoizeOne((label: string, required: boolean) => {
+    if (!required) {
+      return label;
    }
-  );
+
+    let marker = getComputedStyle(this).getPropertyValue(
+      "--ha-input-required-marker"
+    );
+
+    if (!marker) {
+      marker = "*";
+    }
+
+    if (marker.startsWith('"') && marker.endsWith('"')) {
+      marker = marker.slice(1, -1);
+    }
+
+    if (!marker) {
+      return label;
+    }
+
+    return `${label}${marker}`;
+  });

  static styles = css`
    :host {
@@ -504,6 +497,9 @@ export class HaInput extends LitElement {
      padding-top: var(--ha-space-3);
      padding-inline-start: var(--input-padding-inline-start, 0);
    }
+    wa-input.no-label::part(input) {
+      padding-top: 0;
+    }
    :host([type="color"]) wa-input::part(input) {
      padding-top: var(--ha-space-6);
    }
--- a/src/data/energy.ts
+++ b/src/data/energy.ts
@@ -3,27 +3,30 @@ import {
  addHours,
  addMilliseconds,
  addMonths,
+  addYears,
  differenceInDays,
  differenceInMonths,
  endOfDay,
-  startOfDay,
  isFirstDayOfMonth,
  isLastDayOfMonth,
-  addYears,
+  startOfDay,
 } from "date-fns";
 import type { Collection, HassEntity } from "home-assistant-js-websocket";
 import { getCollection } from "home-assistant-js-websocket";
 import memoizeOne from "memoize-one";
-import { normalizeValueBySIPrefix } from "../common/number/normalize-by-si-prefix";
 import {
  calcDate,
-  calcDateProperty,
  calcDateDifferenceProperty,
+  calcDateProperty,
 } from "../common/datetime/calc_date";
+import type { DateRange } from "../common/datetime/calc_date_range";
+import { calcDateRange } from "../common/datetime/calc_date_range";
 import { formatTime24h } from "../common/datetime/format_time";
+import { formatNumber } from "../common/number/format_number";
+import { normalizeValueBySIPrefix } from "../common/number/normalize-by-si-prefix";
 import { groupBy } from "../common/util/group-by";
-import { fileDownload } from "../util/file_download";
 import type { HomeAssistant } from "../types";
+import { fileDownload } from "../util/file_download";
 import type {
  Statistics,
  StatisticsMetaData,
@@ -36,9 +39,6 @@ import {
  getStatisticMetadata,
  VOLUME_UNITS,
 } from "./recorder";
-import { calcDateRange } from "../common/datetime/calc_date_range";
-import type { DateRange } from "../common/datetime/calc_date_range";
-import { formatNumber } from "../common/number/format_number";

 export const ENERGY_COLLECTION_KEY_PREFIX = "energy_";

@@ -841,7 +841,7 @@ export const getEnergyDataCollection = (
  const period =
    preferredPeriod === "today" && hour === "0" ? "yesterday" : preferredPeriod;

-  const [start, end] = calcDateRange(hass, period);
+  const [start, end] = calcDateRange(hass.locale, hass.config, period);
  collection.start = calcDate(start, startOfDay, hass.locale, hass.config);
  collection.end = calcDate(end, endOfDay, hass.locale, hass.config);

--- a/src/panels/history/ha-panel-history.ts
+++ b/src/panels/history/ha-panel-history.ts
@@ -26,8 +26,9 @@ import {
 import { MIN_TIME_BETWEEN_UPDATES } from "../../components/chart/ha-chart-base";
 import "../../components/chart/state-history-charts";
 import type { StateHistoryCharts } from "../../components/chart/state-history-charts";
-import "../../components/ha-date-range-picker";
+import "../../components/date-picker/ha-date-range-picker";
 import "../../components/ha-dropdown";
+import type { HaDropdownSelectEvent } from "../../components/ha-dropdown";
 import "../../components/ha-dropdown-item";
 import "../../components/ha-icon-button";
 import "../../components/ha-icon-button-arrow-prev";
@@ -50,7 +51,6 @@ import { haStyle, haStyleScrollbar } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import { fileDownload } from "../../util/file_download";
 import { addEntitiesToLovelaceView } from "../lovelace/editor/add-entities-to-view";
-import type { HaDropdownSelectEvent } from "../../components/ha-dropdown";

@customElement("ha-panel-history")
 class HaPanelHistory extends LitElement {
@@ -169,7 +169,6 @@ class HaPanelHistory extends LitElement {
        <div class="flex content ha-scrollbar">
          <div class="filters">
            <ha-date-range-picker
-              .hass=${this.hass}
              ?disabled=${this._isLoading}
              .startDate=${this._startDate}
              .endDate=${this._endDate}
--- a/src/panels/logbook/ha-panel-logbook.ts
+++ b/src/panels/logbook/ha-panel-logbook.ts
@@ -14,7 +14,7 @@ import {
  removeSearchParam,
 } from "../../common/url/search-params";
 import "../../components/entity/ha-entity-picker";
-import "../../components/ha-date-range-picker";
+import "../../components/date-picker/ha-date-range-picker";
 import "../../components/ha-icon-button";
 import "../../components/ha-icon-button-arrow-prev";
 import "../../components/ha-menu-button";
@@ -95,7 +95,6 @@ export class HaPanelLogbook extends LitElement {
        <div class="content">
          <div class="filters">
            <ha-date-range-picker
-              .hass=${this.hass}
              .startDate=${this._time.range[0]}
              .endDate=${this._time.range[1]}
              @value-changed=${this._dateRangeChanged}
--- a/src/panels/lovelace/card-features/hui-date-set-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-date-set-card-feature.ts
@@ -1,22 +1,22 @@
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { firstWeekdayIndex } from "../../../common/datetime/first_weekday";
+import { fireEvent } from "../../../common/dom/fire_event";
 import { computeDomain } from "../../../common/entity/compute_domain";
+import "../../../components/ha-control-button";
+import "../../../components/ha-control-button-group";
 import "../../../components/ha-control-slider";
+import type { DatePickerDialogParams } from "../../../components/ha-date-input";
 import type { HomeAssistant } from "../../../types";
 import type { LovelaceCardFeature } from "../types";
 import { cardFeatureStyles } from "./common/card-feature-styles";
 import type {
-  LovelaceCardFeatureContext,
  DateSetCardFeatureConfig,
+  LovelaceCardFeatureContext,
 } from "./types";
-import { fireEvent } from "../../../common/dom/fire_event";
-import type { DatePickerDialogParams } from "../../../components/ha-date-input";
-import { firstWeekdayIndex } from "../../../common/datetime/first_weekday";
-import "../../../components/ha-control-button";
-import "../../../components/ha-control-button-group";

 const loadDatePickerDialog = () =>
-  import("../../../components/ha-dialog-date-picker");
+  import("../../../components/date-picker/ha-dialog-date-picker");

 export const supportsDateSetCardFeature = (
  hass: HomeAssistant,
--- a/src/panels/lovelace/components/hui-energy-period-selector.ts
+++ b/src/panels/lovelace/components/hui-energy-period-selector.ts
@@ -1,10 +1,10 @@
 import {
+  mdiCheckboxBlankOutline,
+  mdiCheckboxOutline,
  mdiChevronLeft,
  mdiChevronRight,
  mdiDotsVertical,
  mdiDownload,
-  mdiCheckboxBlankOutline,
-  mdiCheckboxOutline,
  mdiHomeClock,
 } from "@mdi/js";
 import {
@@ -30,8 +30,6 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
-import { mainWindow } from "../../../common/dom/get_main_window";
-import { stopPropagation } from "../../../common/dom/stop_propagation";
 import {
  calcDate,
  calcDateDifferenceProperty,
@@ -47,13 +45,15 @@ import {
  formatDateVeryShort,
  formatDateYear,
 } from "../../../common/datetime/format_date";
+import { mainWindow } from "../../../common/dom/get_main_window";
+import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { debounce } from "../../../common/util/debounce";
-import "../../../components/ha-button";
-import "../../../components/ha-date-range-picker";
+import "../../../components/date-picker/ha-date-range-picker";
 import type {
  DateRangePickerRanges,
  HaDateRangePicker,
-} from "../../../components/ha-date-range-picker";
+} from "../../../components/date-picker/ha-date-range-picker";
+import "../../../components/ha-button";
 import "../../../components/ha-dropdown";
 import "../../../components/ha-dropdown-item";
 import "../../../components/ha-ripple";
@@ -88,6 +88,10 @@ interface OverflowMenuItem {
  action: () => void;
 }

+type VerticalOpeningDirection = "up" | "down";
+
+type OpeningDirection = "right" | "left" | "center" | "inline";
+
@customElement("hui-energy-period-selector")
 export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
  @property({ attribute: false }) public hass!: HomeAssistant;
@@ -102,10 +106,10 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
    true;

  @property({ attribute: "vertical-opening-direction" })
-  public verticalOpeningDirection?: "up" | "down";
+  public verticalOpeningDirection?: VerticalOpeningDirection;

  @property({ attribute: "opening-direction" })
-  public openingDirection?: "right" | "left" | "center" | "inline";
+  public openingDirection?: OpeningDirection;

  @state() _datepickerOpen = false;

@@ -175,7 +179,7 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
      RANGE_KEYS.forEach((key) => {
        this._ranges[
          this.hass.localize(`ui.components.date-range-picker.ranges.${key}`)
-        ] = calcDateRange(this.hass, key);
+        ] = calcDateRange(this.hass.locale, this.hass.config, key);
      });
    }
  }
@@ -269,7 +273,6 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
        <div class="content">
          <section class="date-picker-icon">
            <ha-date-range-picker
-              .hass=${this.hass}
              .startDate=${this._startDate}
              .endDate=${this._endDate || new Date()}
              .ranges=${this._ranges}
@@ -277,9 +280,11 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
              @preset-selected=${this._presetSelected}
              @toggle=${this._handleDatepickerToggle}
              minimal
-              header-position
-              .verticalOpeningDirection=${this.verticalOpeningDirection}
-              .openingDirection=${this.openingDirection}
+              backdrop
+              .popoverPlacement=${this._getDatePickerPlacement(
+                this.verticalOpeningDirection,
+                this.openingDirection
+              )}
            ></ha-date-range-picker>
          </section>
          <section class="date-range" @click=${this._openDatePicker}>
@@ -527,16 +532,29 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
    );
    const today = new Date();
    if (range === "month") {
-      [this._startDate, this._endDate] = calcDateRange(this.hass, "this_month");
+      [this._startDate, this._endDate] = calcDateRange(
+        this.hass.locale,
+        this.hass.config,
+        "this_month"
+      );
    } else if (range === "quarter") {
      [this._startDate, this._endDate] = calcDateRange(
-        this.hass,
+        this.hass.locale,
+        this.hass.config,
        "this_quarter"
      );
    } else if (range === "year") {
-      [this._startDate, this._endDate] = calcDateRange(this.hass, "this_year");
+      [this._startDate, this._endDate] = calcDateRange(
+        this.hass.locale,
+        this.hass.config,
+        "this_year"
+      );
    } else if (range === "12month") {
-      [this._startDate, this._endDate] = calcDateRange(this.hass, "now-12m");
+      [this._startDate, this._endDate] = calcDateRange(
+        this.hass.locale,
+        this.hass.config,
+        "now-12m"
+      );
    } else if (range === "months") {
      // Custom month range
      const difference = calcDateDifferenceProperty(
@@ -587,7 +605,8 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
      ) {
        // Pick current week
        [this._startDate, this._endDate] = calcDateRange(
-          this.hass,
+          this.hass.locale,
+          this.hass.config,
          "this_week"
        );
      } else {
@@ -672,6 +691,20 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
    energyCollection.refresh();
  }

+  private _getDatePickerPlacement = memoizeOne(
+    (
+      verticalOpeningDirection: VerticalOpeningDirection | undefined,
+      openingDirection: OpeningDirection | undefined
+    ): HaDateRangePicker["popoverPlacement"] => {
+      const vertical = verticalOpeningDirection === "up" ? "top" : "bottom";
+      if (openingDirection === "center" || openingDirection === "inline") {
+        return vertical;
+      }
+      const horizontal = openingDirection === "left" ? "end" : "start";
+      return `${vertical}-${horizontal}`;
+    }
+  );
+
  static styles = css`
    :host {
      display: block;
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -993,6 +993,8 @@
        "end_date": "End date",
        "select": "Select",
        "select_date_range": "Select time period",
+        "time_from": "Time from",
+        "time_to": "Time to",
        "ranges": {
          "today": "Today",
          "yesterday": "Yesterday",
--- a/yarn.lock
+++ b/yarn.lock
@@ -317,7 +317,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@babel/parser@npm:^7.23.5, @babel/parser@npm:^7.28.6, @babel/parser@npm:^7.29.0":
+"@babel/parser@npm:^7.28.6, @babel/parser@npm:^7.29.0":
  version: 7.29.0
  resolution: "@babel/parser@npm:7.29.0"
  dependencies:
@@ -5241,28 +5241,6 @@ __metadata:
  languageName: node
  linkType: hard

-"@vue/compiler-sfc@npm:2.7.16":
-  version: 2.7.16
-  resolution: "@vue/compiler-sfc@npm:2.7.16"
-  dependencies:
-    "@babel/parser": "npm:^7.23.5"
-    postcss: "npm:^8.4.14"
-    prettier: "npm:^1.18.2 || ^2.0.0"
-    source-map: "npm:^0.6.1"
-  dependenciesMeta:
-    prettier:
-      optional: true
-  checksum: 10/fd1128fe1b0ebb1e680aa34909d73716ee5e6f4d3460c1c292b47626976d7af25982cdcbfba7cdbd74e1bee865c39813b82dc71c483731c58184d99ef4043d4d
-  languageName: node
-  linkType: hard
-
-"@vue/web-component-wrapper@npm:1.3.0":
-  version: 1.3.0
-  resolution: "@vue/web-component-wrapper@npm:1.3.0"
-  checksum: 10/60b94cbf34bcaa9c04be867a19981083d0b235ae2dd24d70b9c89cf4b682f80cec0df125553af8ba78deaf162ca1c635e4054bd451897655b4bad07da842fae3
-  languageName: node
-  linkType: hard
-
 "@webcomponents/scoped-custom-element-registry@npm:0.0.10":
  version: 0.0.10
  resolution: "@webcomponents/scoped-custom-element-registry@npm:0.0.10"
@@ -6766,13 +6744,6 @@ __metadata:
  languageName: node
  linkType: hard

-"csstype@npm:^3.1.0":
-  version: 3.2.3
-  resolution: "csstype@npm:3.2.3"
-  checksum: 10/ad41baf7e2ffac65ab544d79107bf7cd1a4bb9bab9ac3302f59ab4ba655d5e30942a8ae46e10ba160c6f4ecea464cc95b975ca2fefbdeeacd6ac63f12f99fe1f
-  languageName: node
-  linkType: hard
-
 "culori@npm:4.0.2":
  version: 4.0.2
  resolution: "culori@npm:4.0.2"
@@ -8967,7 +8938,6 @@ __metadata:
    "@types/webspeechapi": "npm:0.0.29"
    "@vibrant/color": "npm:4.0.4"
    "@vitest/coverage-v8": "npm:4.1.0"
-    "@vue/web-component-wrapper": "npm:1.3.0"
    "@webcomponents/scoped-custom-element-registry": "npm:0.0.10"
    "@webcomponents/webcomponentsjs": "npm:2.8.0"
    babel-loader: "npm:10.1.1"
@@ -9052,8 +9022,6 @@ __metadata:
    ua-parser-js: "npm:2.0.9"
    vite-tsconfig-paths: "npm:6.1.1"
    vitest: "npm:4.1.0"
-    vue: "npm:2.7.16"
-    vue2-daterange-picker: "npm:0.6.8"
    webpack-stats-plugin: "npm:1.1.3"
    webpackbar: "npm:7.0.0"
    weekstart: "npm:2.0.0"
@@ -11780,7 +11748,7 @@ __metadata:
  languageName: node
  linkType: hard

-"postcss@npm:^8.4.14, postcss@npm:^8.5.8":
+"postcss@npm:^8.5.8":
  version: 8.5.8
  resolution: "postcss@npm:8.5.8"
  dependencies:
@@ -11821,15 +11789,6 @@ __metadata:
  languageName: node
  linkType: hard

-"prettier@npm:^1.18.2 || ^2.0.0":
-  version: 2.8.8
-  resolution: "prettier@npm:2.8.8"
-  bin:
-    prettier: bin-prettier.js
-  checksum: 10/00cdb6ab0281f98306cd1847425c24cbaaa48a5ff03633945ab4c701901b8e96ad558eb0777364ffc312f437af9b5a07d0f45346266e8245beaf6247b9c62b24
-  languageName: node
-  linkType: hard
-
 "pretty-bytes@npm:^5.3.0":
  version: 5.6.0
  resolution: "pretty-bytes@npm:5.6.0"
@@ -12997,7 +12956,7 @@ __metadata:
  languageName: node
  linkType: hard

-"source-map@npm:^0.6.0, source-map@npm:^0.6.1, source-map@npm:~0.6.0, source-map@npm:~0.6.1":
+"source-map@npm:^0.6.0, source-map@npm:~0.6.0, source-map@npm:~0.6.1":
  version: 0.6.1
  resolution: "source-map@npm:0.6.1"
  checksum: 10/59ef7462f1c29d502b3057e822cdbdae0b0e565302c4dd1a95e11e793d8d9d62006cdc10e0fd99163ca33ff2071360cf50ee13f90440806e7ed57d81cba2f7ff
@@ -14546,25 +14505,6 @@ __metadata:
  languageName: node
  linkType: hard

-"vue2-daterange-picker@npm:0.6.8":
-  version: 0.6.8
-  resolution: "vue2-daterange-picker@npm:0.6.8"
-  dependencies:
-    vue: "npm:^2.6.10"
-  checksum: 10/3975051d976fc90eb43d2d55af184fae11c64c6790d11fee8fe756514e909b5804768c71c19330e61f66d1e4e025864c4bf09210696bd130f67716562af3cd75
-  languageName: node
-  linkType: hard
-
-"vue@npm:2.7.16, vue@npm:^2.6.10":
-  version: 2.7.16
-  resolution: "vue@npm:2.7.16"
-  dependencies:
-    "@vue/compiler-sfc": "npm:2.7.16"
-    csstype: "npm:^3.1.0"
-  checksum: 10/0371f7bfafd9c6f58ffee6f291fc4ca045033f163e090d8afdfb7550fb9ba71770fe673941083038c88b4a45effe45bb8560c235dc3953c1ff8596f0ad4e4d88
-  languageName: node
-  linkType: hard
-
 "w3c-keyname@npm:^2.2.4":
  version: 2.2.8
  resolution: "w3c-keyname@npm:2.2.8"