diff --git a/src/components/ha-relative-time.ts b/src/components/ha-relative-time.ts
index b7c950942d7a..b638cf12438e 100644
--- a/src/components/ha-relative-time.ts
+++ b/src/components/ha-relative-time.ts
@@ -1,4 +1,5 @@
 import { PropertyValues, ReactiveElement } from "lit";
+import { parseISO } from "date-fns";
 import { customElement, property } from "lit/decorators";
 import { relativeTime } from "../common/datetime/relative_time";
 import { capitalizeFirstLetter } from "../common/string/capitalize-first-letter";
@@ -58,7 +59,12 @@ class HaRelativeTime extends ReactiveElement {
     if (!this.datetime) {
       this.innerHTML = this.hass.localize("ui.components.relative_time.never");
     } else {
-      const relTime = relativeTime(new Date(this.datetime), this.hass.locale);
+      const date =
+        typeof this.datetime === "string"
+          ? parseISO(this.datetime)
+          : this.datetime;
+
+      const relTime = relativeTime(date, this.hass.locale);
       this.innerHTML = this.capitalize
         ? capitalizeFirstLetter(relTime)
         : relTime;