Align+fix date time entity rows (#16774)

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
+      <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
-        .hass=${this.hass}
-        .config=${this._config}
-        hideName="true"
-      >
         <ha-date-input
           .locale=${this.hass.locale}
-          .disabled=${isUnavailableState(stateObj.state)}
+          .disabled=${unavailable}
-          .value=${stateToIsoDateString(stateObj)}
+          .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!, this._config!.entity, ev.detail.value);
-
-    setDateValue(this.hass!, stateObj.entity_id, ev.detail.value);
   }
 }
 

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 unavailable = isUnavailableState(stateObj.state);
-    const time = format(dateObj, "HH:mm:ss");
+
-    const date = format(dateObj, "yyyy-MM-dd");
+    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
       >
+        <div>
           <ha-date-input
+            .label=${this._config.name || computeStateName(stateObj)}
             .locale=${this.hass.locale}
             .value=${date}
-          .disabled=${isUnavailableState(stateObj.state)}
+            .disabled=${unavailable}
             @value-changed=${this._dateChanged}
           >
           </ha-date-input>
           <ha-time-input
             .value=${time}
-          .disabled=${isUnavailableState(stateObj.state)}
+            .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%;
+      }
     `;
   }
 }

src/panels/lovelace/entity-rows/hui-input-datetime-entity-row.ts

@@ -61,6 +61,11 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
         .config=${this._config}
         .hideName=${stateObj.attributes.has_date &&
         stateObj.attributes.has_time}
+      >
+        <div
+          class=${stateObj.attributes.has_date && stateObj.attributes.has_time
+            ? "both"
+            : ""}
         >
           ${stateObj.attributes.has_date
             ? html`
@@ -89,6 +94,7 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
                 ></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%;
+      }
     `;
   }
 }

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
+      <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
-        .hass=${this.hass}
-        .config=${this._config}
-        hideName="true"
-      >
         <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>