From 37cffe25e701742328ed62579f674c630387712c Mon Sep 17 00:00:00 2001
From: Your Name <boern99@gmail.com>
Date: Tue, 12 Nov 2024 22:51:00 +0000
Subject: [PATCH 1/4] add previous and next button to History and Logbook

---
 src/components/ha-date-range-picker.ts | 38 +++++++++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts
index 4e541e0a7efa..4a44c682373f 100644
--- a/src/components/ha-date-range-picker.ts
+++ b/src/components/ha-date-range-picker.ts
@@ -30,6 +30,8 @@ import "./date-range-picker";
 import "./ha-icon-button";
 import "./ha-svg-icon";
 import "./ha-textfield";
+import "./ha-icon-button-next";
+import "./ha-icon-button-prev";
 
 export interface DateRangePickerRanges {
   [key: string]: [Date, Date];
@@ -249,6 +251,12 @@ export class HaDateRangePicker extends LitElement {
         <div slot="input" class="date-range-inputs" @click=${this._handleClick}>
           ${!this.minimal
             ? html`<ha-svg-icon .path=${mdiCalendar}></ha-svg-icon>
+                <ha-icon-button-prev
+                  .label=${this.hass.localize("ui.common.previous")}
+                  class="prev"
+                  @click=${this._handlePrev}
+                >
+                </ha-icon-button-prev>
                 <ha-textfield
                   .value=${this.timePicker
                     ? formatDateTime(
@@ -286,7 +294,13 @@ export class HaDateRangePicker extends LitElement {
                   .disabled=${this.disabled}
                   @click=${this._handleInputClick}
                   readonly
-                ></ha-textfield>`
+                ></ha-textfield>
+                <ha-icon-button-next
+                  .label=${this.hass.localize("ui.common.next")}
+                  class="next"
+                  @click=${this._handleNext}
+                >
+                </ha-icon-button-next>`
             : html`<ha-icon-button
                 .label=${this.hass.localize(
                   "ui.components.date-range-picker.select_date_range"
@@ -317,6 +331,28 @@ export class HaDateRangePicker extends LitElement {
     `;
   }
 
+  private _handleNext(): void {
+    const diff = this.endDate.getTime() - this.startDate.getTime();
+    const dateRange = [
+      new Date(this.endDate.getTime() + 1),
+      new Date(this.endDate.getTime() + 1 + diff),
+    ];
+    const dateRangePicker = this._dateRangePicker;
+    dateRangePicker.clickRange(dateRange);
+    dateRangePicker.clickedApply();
+  }
+
+  private _handlePrev(): void {
+    const diff = this.endDate.getTime() - this.startDate.getTime() + 1;
+    const dateRange = [
+      new Date(this.startDate.getTime() - diff),
+      new Date(this.startDate.getTime() - 1),
+    ];
+    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

From 9e62f60eda6b269c7edd59e870de22f2b43cc0a9 Mon Sep 17 00:00:00 2001
From: boern99 <boern99@gmail.com>
Date: Thu, 14 Nov 2024 17:20:42 +0000
Subject: [PATCH 2/4] used date-fns and changed media-query-resolution to fit
 on mobiles

---
 src/components/ha-date-range-picker.ts | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts
index 4a44c682373f..2110189367fa 100644
--- a/src/components/ha-date-range-picker.ts
+++ b/src/components/ha-date-range-picker.ts
@@ -15,6 +15,9 @@ import {
   startOfMonth,
   startOfWeek,
   startOfYear,
+  differenceInMilliseconds,
+  addMilliseconds,
+  subMilliseconds,
 } from "date-fns";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -332,10 +335,12 @@ export class HaDateRangePicker extends LitElement {
   }
 
   private _handleNext(): void {
-    const diff = this.endDate.getTime() - this.startDate.getTime();
     const dateRange = [
-      new Date(this.endDate.getTime() + 1),
-      new Date(this.endDate.getTime() + 1 + diff),
+      addMilliseconds(this.endDate, 1),
+      addMilliseconds(
+        this.endDate,
+        1 + differenceInMilliseconds(this.endDate, this.startDate)
+      ),
     ];
     const dateRangePicker = this._dateRangePicker;
     dateRangePicker.clickRange(dateRange);
@@ -343,10 +348,12 @@ export class HaDateRangePicker extends LitElement {
   }
 
   private _handlePrev(): void {
-    const diff = this.endDate.getTime() - this.startDate.getTime() + 1;
     const dateRange = [
-      new Date(this.startDate.getTime() - diff),
-      new Date(this.startDate.getTime() - 1),
+      subMilliseconds(
+        this.startDate,
+        differenceInMilliseconds(this.endDate, this.startDate) + 1
+      ),
+      subMilliseconds(this.startDate, 1),
     ];
     const dateRangePicker = this._dateRangePicker;
     dateRangePicker.clickRange(dateRange);
@@ -449,7 +456,7 @@ export class HaDateRangePicker extends LitElement {
         }
       }
 
-      @media only screen and (max-width: 500px) {
+      @media only screen and (max-width: 560px) {
         ha-textfield {
           min-width: inherit;
         }

From 94dd7e8ebbec578087feed2cfb73d9f6570653e1 Mon Sep 17 00:00:00 2001
From: boern99 <boern99@gmail.com>
Date: Mon, 18 Nov 2024 18:47:36 +0000
Subject: [PATCH 3/4] hide .prev and .next on small screens; optimized
 dateRange for ranges lower 1 day

---
 src/components/ha-date-range-picker.ts | 31 ++++++++++++++++++--------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts
index 2110189367fa..2a49b0f17c3b 100644
--- a/src/components/ha-date-range-picker.ts
+++ b/src/components/ha-date-range-picker.ts
@@ -18,6 +18,7 @@ import {
   differenceInMilliseconds,
   addMilliseconds,
   subMilliseconds,
+  roundToNearestHours,
 } from "date-fns";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -336,10 +337,15 @@ export class HaDateRangePicker extends LitElement {
 
   private _handleNext(): void {
     const dateRange = [
-      addMilliseconds(this.endDate, 1),
+      roundToNearestHours(this.endDate),
       addMilliseconds(
-        this.endDate,
-        1 + differenceInMilliseconds(this.endDate, this.startDate)
+        roundToNearestHours(this.endDate),
+        Math.max(
+          3600000,
+          roundToNearestHours(
+            differenceInMilliseconds(this.endDate, this.startDate)
+          )
+        ) - 1
       ),
     ];
     const dateRangePicker = this._dateRangePicker;
@@ -349,11 +355,16 @@ export class HaDateRangePicker extends LitElement {
 
   private _handlePrev(): void {
     const dateRange = [
-      subMilliseconds(
-        this.startDate,
-        differenceInMilliseconds(this.endDate, this.startDate) + 1
+      roundToNearestHours(
+        subMilliseconds(
+          this.startDate,
+          Math.max(
+            3600000,
+            differenceInMilliseconds(this.endDate, this.startDate)
+          )
+        )
       ),
-      subMilliseconds(this.startDate, 1),
+      subMilliseconds(roundToNearestHours(this.startDate), 1),
     ];
     const dateRangePicker = this._dateRangePicker;
     dateRangePicker.clickRange(dateRange);
@@ -456,12 +467,14 @@ export class HaDateRangePicker extends LitElement {
         }
       }
 
-      @media only screen and (max-width: 560px) {
+      @media only screen and (max-width: 500px) {
         ha-textfield {
           min-width: inherit;
         }
 
-        ha-svg-icon {
+        ha-svg-icon,
+        .prev,
+        .next {
           display: none;
         }
       }

From 11af31c7fbc478f6e64be8ce311047509c55f1c2 Mon Sep 17 00:00:00 2001
From: boern99 <boern99@gmail.com>
Date: Mon, 18 Nov 2024 19:09:29 +0000
Subject: [PATCH 4/4] fixed Date type number

---
 src/components/ha-date-range-picker.ts | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts
index 2a49b0f17c3b..3b9695310cd9 100644
--- a/src/components/ha-date-range-picker.ts
+++ b/src/components/ha-date-range-picker.ts
@@ -338,14 +338,17 @@ export class HaDateRangePicker extends LitElement {
   private _handleNext(): void {
     const dateRange = [
       roundToNearestHours(this.endDate),
-      addMilliseconds(
-        roundToNearestHours(this.endDate),
-        Math.max(
-          3600000,
-          roundToNearestHours(
-            differenceInMilliseconds(this.endDate, this.startDate)
+      subMilliseconds(
+        roundToNearestHours(
+          addMilliseconds(
+            this.endDate,
+            Math.max(
+              3600000,
+              differenceInMilliseconds(this.endDate, this.startDate)
+            )
           )
-        ) - 1
+        ),
+        1
       ),
     ];
     const dateRangePicker = this._dateRangePicker;