diff --git a/src/common/datetime/calc_date.ts b/src/common/datetime/calc_date.ts
index bd1fef2887..aa2c0e2eae 100644
--- a/src/common/datetime/calc_date.ts
+++ b/src/common/datetime/calc_date.ts
@@ -37,3 +37,20 @@ export const calcDateProperty = (
   locale.time_zone === TimeZone.server
     ? (calcZonedDate(date, config.time_zone, fn, options) as number | boolean)
     : fn(date, options);
+
+export const calcDateDifferenceProperty = (
+  endDate: Date,
+  startDate: Date,
+  fn: (date: Date, options?: any) => boolean | number,
+  locale: FrontendLocaleData,
+  config: HassConfig
+) =>
+  calcDateProperty(
+    endDate,
+    fn,
+    locale,
+    config,
+    locale.time_zone === TimeZone.server
+      ? utcToZonedTime(startDate, config.time_zone)
+      : startDate
+  );
diff --git a/src/data/energy.ts b/src/data/energy.ts
index a811199cee..d322723ae2 100644
--- a/src/data/energy.ts
+++ b/src/data/energy.ts
@@ -11,7 +11,11 @@ import {
   isLastDayOfMonth,
 } from "date-fns/esm";
 import { Collection, getCollection } from "home-assistant-js-websocket";
-import { calcDate, calcDateProperty } from "../common/datetime/calc_date";
+import {
+  calcDate,
+  calcDateProperty,
+  calcDateDifferenceProperty,
+} from "../common/datetime/calc_date";
 import { formatTime24h } from "../common/datetime/format_time";
 import { groupBy } from "../common/util/group-by";
 import { HomeAssistant } from "../types";
@@ -443,12 +447,12 @@ const getEnergyData = async (
         addMonths,
         hass.locale,
         hass.config,
-        -(calcDateProperty(
+        -(calcDateDifferenceProperty(
           end || new Date(),
+          start,
           differenceInMonths,
           hass.locale,
-          hass.config,
-          start
+          hass.config
         ) as number) - 1
       );
     } else {
diff --git a/src/panels/lovelace/components/hui-energy-period-selector.ts b/src/panels/lovelace/components/hui-energy-period-selector.ts
index e2717f6908..0da7b83907 100644
--- a/src/panels/lovelace/components/hui-energy-period-selector.ts
+++ b/src/panels/lovelace/components/hui-energy-period-selector.ts
@@ -32,7 +32,11 @@ import {
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { calcDate, calcDateProperty } from "../../../common/datetime/calc_date";
+import {
+  calcDate,
+  calcDateProperty,
+  calcDateDifferenceProperty,
+} from "../../../common/datetime/calc_date";
 import { firstWeekdayIndex } from "../../../common/datetime/first_weekday";
 import {
   formatDate,
@@ -300,23 +304,23 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
         (calcDateProperty(endDate, isLastDayOfMonth, locale, config) as boolean)
       ) {
         if (
-          (calcDateProperty(
+          (calcDateDifferenceProperty(
             endDate,
+            startDate,
             differenceInMonths,
             locale,
-            config,
-            startDate
+            config
           ) as number) === 0
         ) {
           return "month";
         }
         if (
-          (calcDateProperty(
+          (calcDateDifferenceProperty(
             endDate,
+            startDate,
             differenceInMonths,
             locale,
-            config,
-            startDate
+            config
           ) as number) === 2 &&
           startDate.getMonth() % 3 === 0
         ) {
@@ -326,12 +330,12 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
       if (
         calcDateProperty(startDate, isFirstDayOfMonth, locale, config) &&
         calcDateProperty(endDate, isLastDayOfMonth, locale, config) &&
-        calcDateProperty(
+        calcDateDifferenceProperty(
           endDate,
+          startDate,
           differenceInMonths,
           locale,
-          config,
-          startDate
+          config
         ) === 11
       ) {
         return "year";
@@ -468,12 +472,12 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
         );
       } else {
         // Custom date range
-        const difference = calcDateProperty(
+        const difference = calcDateDifferenceProperty(
           this._endDate!,
+          this._startDate,
           differenceInDays,
           this.hass.locale,
-          this.hass.config,
-          this._startDate
+          this.hass.config
         ) as number;
         this._startDate = calcDate(
           calcDate(
@@ -534,12 +538,12 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
     ) {
       // Shift date range with respect to month/year selection
       const difference =
-        ((calcDateProperty(
+        ((calcDateDifferenceProperty(
           this._endDate!,
+          this._startDate,
           differenceInMonths,
           this.hass.locale,
-          this.hass.config,
-          this._startDate
+          this.hass.config
         ) as number) +
           1) *
         (forward ? 1 : -1);
@@ -565,12 +569,12 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
     } else {
       // Shift date range by period length
       const difference =
-        ((calcDateProperty(
+        ((calcDateDifferenceProperty(
           this._endDate!,
+          this._startDate,
           differenceInDays,
           this.hass.locale,
-          this.hass.config,
-          this._startDate
+          this.hass.config
         ) as number) +
           1) *
         (forward ? 1 : -1);