diff --git a/src/dialogs/more-info/controls/more-info-date.ts b/src/dialogs/more-info/controls/more-info-date.ts
index b53829b557..6d489fe22f 100644
--- a/src/dialogs/more-info/controls/more-info-date.ts
+++ b/src/dialogs/more-info/controls/more-info-date.ts
@@ -4,7 +4,7 @@ import { customElement, property } from "lit/decorators";
 import "../../../components/ha-date-input";
 import "../../../components/ha-time-input";
 import { setDateValue } from "../../../data/date";
-import { isUnavailableState } from "../../../data/entity";
+import { isUnavailableState, UNAVAILABLE } from "../../../data/entity";
 import type { HomeAssistant } from "../../../types";
 
 @customElement("more-info-date")
@@ -14,15 +14,17 @@ class MoreInfoDate extends LitElement {
   @property({ attribute: false }) public stateObj?: HassEntity;
 
   protected render() {
-    if (!this.stateObj || isUnavailableState(this.stateObj.state)) {
+    if (!this.stateObj || this.stateObj.state === UNAVAILABLE) {
       return nothing;
     }
 
     return html`
       <ha-date-input
         .locale=${this.hass.locale}
-        .value=${this.stateObj.state}
-        .disabled=${isUnavailableState(this.stateObj.state)}
+        .value=${isUnavailableState(this.stateObj.state)
+          ? undefined
+          : this.stateObj.state}
+        .disabled=${this.stateObj.state === UNAVAILABLE}
         @value-changed=${this._dateChanged}
       >
       </ha-date-input>
@@ -30,7 +32,9 @@ class MoreInfoDate extends LitElement {
   }
 
   private _dateChanged(ev: CustomEvent<{ value: string }>): void {
-    setDateValue(this.hass!, this.stateObj!.entity_id, ev.detail.value);
+    if (ev.detail.value) {
+      setDateValue(this.hass!, this.stateObj!.entity_id, ev.detail.value);
+    }
   }
 
   static get styles(): CSSResultGroup {
diff --git a/src/dialogs/more-info/controls/more-info-datetime.ts b/src/dialogs/more-info/controls/more-info-datetime.ts
index b0b25f9bc9..85d7f44bd3 100644
--- a/src/dialogs/more-info/controls/more-info-datetime.ts
+++ b/src/dialogs/more-info/controls/more-info-datetime.ts
@@ -5,7 +5,7 @@ import { customElement, property } from "lit/decorators";
 import "../../../components/ha-date-input";
 import "../../../components/ha-time-input";
 import { setDateTimeValue } from "../../../data/datetime";
-import { isUnavailableState } from "../../../data/entity";
+import { isUnavailableState, UNAVAILABLE } from "../../../data/entity";
 import type { HomeAssistant } from "../../../types";
 
 @customElement("more-info-datetime")
@@ -15,25 +15,27 @@ class MoreInfoDatetime extends LitElement {
   @property({ attribute: false }) public stateObj?: HassEntity;
 
   protected render() {
-    if (!this.stateObj || isUnavailableState(this.stateObj.state)) {
+    if (!this.stateObj || this.stateObj.state === UNAVAILABLE) {
       return nothing;
     }
 
-    const dateObj = new Date(this.stateObj.state);
-    const time = format(dateObj, "HH:mm:ss");
-    const date = format(dateObj, "yyyy-MM-dd");
+    const dateObj = isUnavailableState(this.stateObj.state)
+      ? undefined
+      : new Date(this.stateObj.state);
+    const time = dateObj ? format(dateObj, "HH:mm:ss") : undefined;
+    const date = dateObj ? format(dateObj, "yyyy-MM-dd") : undefined;
 
     return html`<ha-date-input
         .locale=${this.hass.locale}
         .value=${date}
-        .disabled=${isUnavailableState(this.stateObj.state)}
+        .disabled=${this.stateObj.state === UNAVAILABLE}
         @value-changed=${this._dateChanged}
       >
       </ha-date-input>
       <ha-time-input
         .value=${time}
         .locale=${this.hass.locale}
-        .disabled=${isUnavailableState(this.stateObj.state)}
+        .disabled=${this.stateObj.state === UNAVAILABLE}
         @value-changed=${this._timeChanged}
         @click=${this._stopEventPropagation}
       ></ha-time-input>`;
@@ -44,19 +46,23 @@ class MoreInfoDatetime extends LitElement {
   }
 
   private _timeChanged(ev: CustomEvent<{ value: string }>): void {
-    const dateObj = new Date(this.stateObj!.state);
-    const newTime = ev.detail.value.split(":").map(Number);
-    dateObj.setHours(newTime[0], newTime[1], newTime[2]);
+    if (ev.detail.value) {
+      const dateObj = new Date(this.stateObj!.state);
+      const newTime = ev.detail.value.split(":").map(Number);
+      dateObj.setHours(newTime[0], newTime[1], newTime[2]);
 
-    setDateTimeValue(this.hass!, this.stateObj!.entity_id, dateObj);
+      setDateTimeValue(this.hass!, this.stateObj!.entity_id, dateObj);
+    }
   }
 
   private _dateChanged(ev: CustomEvent<{ value: string }>): void {
-    const dateObj = new Date(this.stateObj!.state);
-    const newDate = ev.detail.value.split("-").map(Number);
-    dateObj.setFullYear(newDate[0], newDate[1] - 1, newDate[2]);
+    if (ev.detail.value) {
+      const dateObj = new Date(this.stateObj!.state);
+      const newDate = ev.detail.value.split("-").map(Number);
+      dateObj.setFullYear(newDate[0], newDate[1] - 1, newDate[2]);
 
-    setDateTimeValue(this.hass!, this.stateObj!.entity_id, dateObj);
+      setDateTimeValue(this.hass!, this.stateObj!.entity_id, dateObj);
+    }
   }
 
   static get styles(): CSSResultGroup {
diff --git a/src/dialogs/more-info/controls/more-info-time.ts b/src/dialogs/more-info/controls/more-info-time.ts
index c131f7e3de..8e5a99bc34 100644
--- a/src/dialogs/more-info/controls/more-info-time.ts
+++ b/src/dialogs/more-info/controls/more-info-time.ts
@@ -3,7 +3,7 @@ import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../components/ha-date-input";
 import "../../../components/ha-time-input";
-import { isUnavailableState } from "../../../data/entity";
+import { isUnavailableState, UNAVAILABLE } from "../../../data/entity";
 import { setTimeValue } from "../../../data/time";
 import type { HomeAssistant } from "../../../types";
 
@@ -14,15 +14,17 @@ class MoreInfoTime extends LitElement {
   @property({ attribute: false }) public stateObj?: HassEntity;
 
   protected render() {
-    if (!this.stateObj || isUnavailableState(this.stateObj.state)) {
+    if (!this.stateObj || this.stateObj.state === UNAVAILABLE) {
       return nothing;
     }
 
     return html`
       <ha-time-input
-        .value=${this.stateObj.state}
+        .value=${isUnavailableState(this.stateObj.state)
+          ? undefined
+          : this.stateObj.state}
         .locale=${this.hass.locale}
-        .disabled=${isUnavailableState(this.stateObj.state)}
+        .disabled=${this.stateObj.state === UNAVAILABLE}
         @value-changed=${this._timeChanged}
         @click=${this._stopEventPropagation}
       ></ha-time-input>
@@ -34,7 +36,9 @@ class MoreInfoTime extends LitElement {
   }
 
   private _timeChanged(ev: CustomEvent<{ value: string }>): void {
-    setTimeValue(this.hass!, this.stateObj!.entity_id, ev.detail.value);
+    if (ev.detail.value) {
+      setTimeValue(this.hass!, this.stateObj!.entity_id, ev.detail.value);
+    }
   }
 
   static get styles(): CSSResultGroup {
diff --git a/src/panels/lovelace/entity-rows/hui-date-entity-row.ts b/src/panels/lovelace/entity-rows/hui-date-entity-row.ts
index 9cbec26d87..82a8286db1 100644
--- a/src/panels/lovelace/entity-rows/hui-date-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-date-entity-row.ts
@@ -1,7 +1,7 @@
 import { html, LitElement, nothing, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../components/ha-date-input";
-import { isUnavailableState } from "../../../data/entity";
+import { isUnavailableState, UNAVAILABLE } from "../../../data/entity";
 import { setDateValue } from "../../../data/date";
 import type { HomeAssistant } from "../../../types";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
@@ -41,14 +41,16 @@ class HuiDateEntityRow extends LitElement implements LovelaceRow {
       `;
     }
 
-    const unavailable = isUnavailableState(stateObj.state);
+    const unavailable = stateObj.state === UNAVAILABLE;
 
     return html`
       <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
         <ha-date-input
           .locale=${this.hass.locale}
           .disabled=${unavailable}
-          .value=${unavailable ? "" : stateObj.state}
+          .value=${isUnavailableState(stateObj.state)
+            ? undefined
+            : stateObj.state}
           @value-changed=${this._dateChanged}
         >
         </ha-date-input>
@@ -57,7 +59,9 @@ class HuiDateEntityRow extends LitElement implements LovelaceRow {
   }
 
   private _dateChanged(ev: CustomEvent<{ value: string }>): void {
-    setDateValue(this.hass!, this._config!.entity, ev.detail.value);
+    if (ev.detail.value) {
+      setDateValue(this.hass!, this._config!.entity, ev.detail.value);
+    }
   }
 }
 
diff --git a/src/panels/lovelace/entity-rows/hui-datetime-entity-row.ts b/src/panels/lovelace/entity-rows/hui-datetime-entity-row.ts
index e4aecd4cbf..b215f51121 100644
--- a/src/panels/lovelace/entity-rows/hui-datetime-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-datetime-entity-row.ts
@@ -10,7 +10,7 @@ import {
 import { customElement, property, state } from "lit/decorators";
 import "../../../components/ha-date-input";
 import { format } from "date-fns";
-import { isUnavailableState } from "../../../data/entity";
+import { isUnavailableState, UNAVAILABLE } from "../../../data/entity";
 import { setDateTimeValue } from "../../../data/datetime";
 import type { HomeAssistant } from "../../../types";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
@@ -52,11 +52,13 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
       `;
     }
 
-    const unavailable = isUnavailableState(stateObj.state);
+    const unavailable = stateObj.state === UNAVAILABLE;
 
-    const dateObj = unavailable ? undefined : new Date(stateObj.state);
-    const time = dateObj ? format(dateObj, "HH:mm:ss") : "";
-    const date = dateObj ? format(dateObj, "yyyy-MM-dd") : "";
+    const dateObj = isUnavailableState(stateObj.state)
+      ? undefined
+      : new Date(stateObj.state);
+    const time = dateObj ? format(dateObj, "HH:mm:ss") : undefined;
+    const date = dateObj ? format(dateObj, "yyyy-MM-dd") : undefined;
 
     return html`
       <hui-generic-entity-row
@@ -90,21 +92,25 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
   }
 
   private _timeChanged(ev: CustomEvent<{ value: string }>): void {
-    const stateObj = this.hass!.states[this._config!.entity];
-    const dateObj = new Date(stateObj.state);
-    const newTime = ev.detail.value.split(":").map(Number);
-    dateObj.setHours(newTime[0], newTime[1], newTime[2]);
+    if (ev.detail.value) {
+      const stateObj = this.hass!.states[this._config!.entity];
+      const dateObj = new Date(stateObj.state);
+      const newTime = ev.detail.value.split(":").map(Number);
+      dateObj.setHours(newTime[0], newTime[1], newTime[2]);
 
-    setDateTimeValue(this.hass!, stateObj.entity_id, dateObj);
+      setDateTimeValue(this.hass!, stateObj.entity_id, dateObj);
+    }
   }
 
   private _dateChanged(ev: CustomEvent<{ value: string }>): void {
-    const stateObj = this.hass!.states[this._config!.entity];
-    const dateObj = new Date(stateObj.state);
-    const newDate = ev.detail.value.split("-").map(Number);
-    dateObj.setFullYear(newDate[0], newDate[1] - 1, newDate[2]);
+    if (ev.detail.value) {
+      const stateObj = this.hass!.states[this._config!.entity];
+      const dateObj = new Date(stateObj.state);
+      const newDate = ev.detail.value.split("-").map(Number);
+      dateObj.setFullYear(newDate[0], newDate[1] - 1, newDate[2]);
 
-    setDateTimeValue(this.hass!, stateObj.entity_id, dateObj);
+      setDateTimeValue(this.hass!, stateObj.entity_id, dateObj);
+    }
   }
 
   static get styles(): CSSResultGroup {
diff --git a/src/panels/lovelace/entity-rows/hui-time-entity-row.ts b/src/panels/lovelace/entity-rows/hui-time-entity-row.ts
index 66cf5c68b1..932fe99f66 100644
--- a/src/panels/lovelace/entity-rows/hui-time-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-time-entity-row.ts
@@ -1,7 +1,7 @@
 import { html, LitElement, nothing, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../components/ha-date-input";
-import { isUnavailableState } from "../../../data/entity";
+import { isUnavailableState, UNAVAILABLE } from "../../../data/entity";
 import { setTimeValue } from "../../../data/time";
 import type { HomeAssistant } from "../../../types";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
@@ -42,12 +42,14 @@ class HuiTimeEntityRow extends LitElement implements LovelaceRow {
       `;
     }
 
-    const unavailable = isUnavailableState(stateObj.state);
+    const unavailable = stateObj.state === UNAVAILABLE;
 
     return html`
       <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
         <ha-time-input
-          .value=${unavailable ? "" : stateObj.state}
+          .value=${isUnavailableState(stateObj.state)
+            ? undefined
+            : stateObj.state}
           .locale=${this.hass.locale}
           .disabled=${unavailable}
           @value-changed=${this._timeChanged}
@@ -62,8 +64,10 @@ class HuiTimeEntityRow extends LitElement implements LovelaceRow {
   }
 
   private _timeChanged(ev: CustomEvent<{ value: string }>): void {
-    const stateObj = this.hass!.states[this._config!.entity];
-    setTimeValue(this.hass!, stateObj.entity_id, ev.detail.value);
+    if (ev.detail.value) {
+      const stateObj = this.hass!.states[this._config!.entity];
+      setTimeValue(this.hass!, stateObj.entity_id, ev.detail.value);
+    }
   }
 }