Align+fix date time entity rows (#16774)

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,

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
       >
-        <ha-date-input
+        <div>
-          .locale=${this.hass.locale}
+          <ha-date-input
-          .value=${date}
+            .label=${this._config.name || computeStateName(stateObj)}
-          .disabled=${isUnavailableState(stateObj.state)}
+            .locale=${this.hass.locale}
-          @value-changed=${this._dateChanged}
+            .value=${date}
-        >
+            .disabled=${unavailable}
-        </ha-date-input>
+            @value-changed=${this._dateChanged}
-        <ha-time-input
+          >
-          .value=${time}
+          </ha-date-input>
-          .disabled=${isUnavailableState(stateObj.state)}
+          <ha-time-input
-          .locale=${this.hass.locale}
+            .value=${time}
-          @value-changed=${this._timeChanged}
+            .disabled=${unavailable}
-          @click=${this._stopEventPropagation}
+            .locale=${this.hass.locale}
-        ></ha-time-input>
+            @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

@@ -62,33 +62,39 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
         .hideName=${stateObj.attributes.has_date &&
         stateObj.attributes.has_time}
       >
-        ${stateObj.attributes.has_date
+        <div
-          ? html`
+          class=${stateObj.attributes.has_date && stateObj.attributes.has_time
-              <ha-date-input
+            ? "both"
-                .label=${stateObj.attributes.has_time ? name : undefined}
+            : ""}
-                .locale=${this.hass.locale}
+        >
-                .disabled=${isUnavailableState(stateObj.state)}
+          ${stateObj.attributes.has_date
-                .value=${stateToIsoDateString(stateObj)}
+            ? html`
-                @value-changed=${this._dateChanged}
+                <ha-date-input
-              >
+                  .label=${stateObj.attributes.has_time ? name : undefined}
-              </ha-date-input>
+                  .locale=${this.hass.locale}
-            `
+                  .disabled=${isUnavailableState(stateObj.state)}
-          : ``}
+                  .value=${stateToIsoDateString(stateObj)}
-        ${stateObj.attributes.has_time
+                  @value-changed=${this._dateChanged}
-          ? html`
+                >
-              <ha-time-input
+                </ha-date-input>
-                .value=${stateObj.state === UNKNOWN
+              `
-                  ? ""
+            : ``}
-                  : stateObj.attributes.has_date
+          ${stateObj.attributes.has_time
-                  ? stateObj.state.split(" ")[1]
+            ? html`
-                  : stateObj.state}
+                <ha-time-input
-                .locale=${this.hass.locale}
+                  .value=${stateObj.state === UNKNOWN
-                .disabled=${isUnavailableState(stateObj.state)}
+                    ? ""
-                @value-changed=${this._timeChanged}
+                    : stateObj.attributes.has_date
-                @click=${this._stopEventPropagation}
+                    ? stateObj.state.split(" ")[1]
-              ></ha-time-input>
+                    : 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%;
+      }
     `;
   }
 }

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>