diff --git a/src/panels/lovelace/components/hui-generic-entity-row.ts b/src/panels/lovelace/components/hui-generic-entity-row.ts
index 3d1c1e0d0c..347457cb3a 100644
--- a/src/panels/lovelace/components/hui-generic-entity-row.ts
+++ b/src/panels/lovelace/components/hui-generic-entity-row.ts
@@ -85,7 +85,7 @@ class HuiGenericEntityRow extends LitElement {
         tabindex=${ifDefined(pointer ? "0" : undefined)}
       ></state-badge>
       ${!this.hideName
-        ? html` <div
+        ? html`<div
             class="info ${classMap({
               pointer,
               "text-content": !hasSecondary,
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 d3874c3fe4..9cbec26d87 100644
--- a/src/panels/lovelace/entity-rows/hui-date-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-date-entity-row.ts
@@ -2,7 +2,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 { setDateValue, stateToIsoDateString } from "../../../data/date";
+import { setDateValue } from "../../../data/date";
 import type { HomeAssistant } from "../../../types";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import "../components/hui-generic-entity-row";
@@ -41,16 +41,14 @@ class HuiDateEntityRow extends LitElement implements LovelaceRow {
       `;
     }
 
+    const unavailable = isUnavailableState(stateObj.state);
+
     return html`
-      <hui-generic-entity-row
-        .hass=${this.hass}
-        .config=${this._config}
-        hideName="true"
-      >
+      <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
         <ha-date-input
           .locale=${this.hass.locale}
-          .disabled=${isUnavailableState(stateObj.state)}
-          .value=${stateToIsoDateString(stateObj)}
+          .disabled=${unavailable}
+          .value=${unavailable ? "" : stateObj.state}
           @value-changed=${this._dateChanged}
         >
         </ha-date-input>
@@ -59,9 +57,7 @@ class HuiDateEntityRow extends LitElement implements LovelaceRow {
   }
 
   private _dateChanged(ev: CustomEvent<{ value: string }>): void {
-    const stateObj = this.hass!.states[this._config!.entity];
-
-    setDateValue(this.hass!, stateObj.entity_id, 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 bf6b2845e8..e4aecd4cbf 100644
--- a/src/panels/lovelace/entity-rows/hui-datetime-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-datetime-entity-row.ts
@@ -18,6 +18,7 @@ import "../components/hui-generic-entity-row";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
 import type { EntityConfig, LovelaceRow } from "./types";
 import "../../../components/ha-time-input";
+import { computeStateName } from "../../../common/entity/compute_state_name";
 
 @customElement("hui-datetime-entity-row")
 class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
@@ -51,30 +52,35 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
       `;
     }
 
-    const dateObj = new Date(stateObj.state);
-    const time = format(dateObj, "HH:mm:ss");
-    const date = format(dateObj, "yyyy-MM-dd");
+    const unavailable = isUnavailableState(stateObj.state);
+
+    const dateObj = unavailable ? undefined : new Date(stateObj.state);
+    const time = dateObj ? format(dateObj, "HH:mm:ss") : "";
+    const date = dateObj ? format(dateObj, "yyyy-MM-dd") : "";
 
     return html`
       <hui-generic-entity-row
         .hass=${this.hass}
         .config=${this._config}
-        hideName="true"
+        hideName
       >
-        <ha-date-input
-          .locale=${this.hass.locale}
-          .value=${date}
-          .disabled=${isUnavailableState(stateObj.state)}
-          @value-changed=${this._dateChanged}
-        >
-        </ha-date-input>
-        <ha-time-input
-          .value=${time}
-          .disabled=${isUnavailableState(stateObj.state)}
-          .locale=${this.hass.locale}
-          @value-changed=${this._timeChanged}
-          @click=${this._stopEventPropagation}
-        ></ha-time-input>
+        <div>
+          <ha-date-input
+            .label=${this._config.name || computeStateName(stateObj)}
+            .locale=${this.hass.locale}
+            .value=${date}
+            .disabled=${unavailable}
+            @value-changed=${this._dateChanged}
+          >
+          </ha-date-input>
+          <ha-time-input
+            .value=${time}
+            .disabled=${unavailable}
+            .locale=${this.hass.locale}
+            @value-changed=${this._timeChanged}
+            @click=${this._stopEventPropagation}
+          ></ha-time-input>
+        </div>
       </hui-generic-entity-row>
     `;
   }
@@ -103,12 +109,17 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
 
   static get styles(): CSSResultGroup {
     return css`
-      ha-date-input + ha-time-input {
+      ha-time-input {
         margin-left: 4px;
         margin-inline-start: 4px;
         margin-inline-end: initial;
         direction: var(--direction);
       }
+      div {
+        display: flex;
+        justify-content: flex-end;
+        width: 100%;
+      }
     `;
   }
 }
diff --git a/src/panels/lovelace/entity-rows/hui-input-datetime-entity-row.ts b/src/panels/lovelace/entity-rows/hui-input-datetime-entity-row.ts
index bd595bd4f7..287ea60886 100644
--- a/src/panels/lovelace/entity-rows/hui-input-datetime-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-input-datetime-entity-row.ts
@@ -62,33 +62,39 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
         .hideName=${stateObj.attributes.has_date &&
         stateObj.attributes.has_time}
       >
-        ${stateObj.attributes.has_date
-          ? html`
-              <ha-date-input
-                .label=${stateObj.attributes.has_time ? name : undefined}
-                .locale=${this.hass.locale}
-                .disabled=${isUnavailableState(stateObj.state)}
-                .value=${stateToIsoDateString(stateObj)}
-                @value-changed=${this._dateChanged}
-              >
-              </ha-date-input>
-            `
-          : ``}
-        ${stateObj.attributes.has_time
-          ? html`
-              <ha-time-input
-                .value=${stateObj.state === UNKNOWN
-                  ? ""
-                  : stateObj.attributes.has_date
-                  ? stateObj.state.split(" ")[1]
-                  : stateObj.state}
-                .locale=${this.hass.locale}
-                .disabled=${isUnavailableState(stateObj.state)}
-                @value-changed=${this._timeChanged}
-                @click=${this._stopEventPropagation}
-              ></ha-time-input>
-            `
-          : ``}
+        <div
+          class=${stateObj.attributes.has_date && stateObj.attributes.has_time
+            ? "both"
+            : ""}
+        >
+          ${stateObj.attributes.has_date
+            ? html`
+                <ha-date-input
+                  .label=${stateObj.attributes.has_time ? name : undefined}
+                  .locale=${this.hass.locale}
+                  .disabled=${isUnavailableState(stateObj.state)}
+                  .value=${stateToIsoDateString(stateObj)}
+                  @value-changed=${this._dateChanged}
+                >
+                </ha-date-input>
+              `
+            : ``}
+          ${stateObj.attributes.has_time
+            ? html`
+                <ha-time-input
+                  .value=${stateObj.state === UNKNOWN
+                    ? ""
+                    : stateObj.attributes.has_date
+                    ? stateObj.state.split(" ")[1]
+                    : stateObj.state}
+                  .locale=${this.hass.locale}
+                  .disabled=${isUnavailableState(stateObj.state)}
+                  @value-changed=${this._timeChanged}
+                  @click=${this._stopEventPropagation}
+                ></ha-time-input>
+              `
+            : ``}
+        </div>
       </hui-generic-entity-row>
     `;
   }
@@ -126,6 +132,11 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
         margin-inline-end: initial;
         direction: var(--direction);
       }
+      div.both {
+        display: flex;
+        justify-content: flex-end;
+        width: 100%;
+      }
     `;
   }
 }
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 f6fceb3829..66cf5c68b1 100644
--- a/src/panels/lovelace/entity-rows/hui-time-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-time-entity-row.ts
@@ -42,16 +42,14 @@ class HuiTimeEntityRow extends LitElement implements LovelaceRow {
       `;
     }
 
+    const unavailable = isUnavailableState(stateObj.state);
+
     return html`
-      <hui-generic-entity-row
-        .hass=${this.hass}
-        .config=${this._config}
-        hideName="true"
-      >
+      <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
         <ha-time-input
-          .value=${stateObj.state}
+          .value=${unavailable ? "" : stateObj.state}
           .locale=${this.hass.locale}
-          .disabled=${isUnavailableState(stateObj.state)}
+          .disabled=${unavailable}
           @value-changed=${this._timeChanged}
           @click=${this._stopEventPropagation}
         ></ha-time-input>