Replace date picker for entities card (#6899)

src/components/ha-date-input.ts

@@ -1,126 +1,69 @@
-import "@polymer/paper-input/paper-input";
+import "@vaadin/vaadin-date-picker/theme/material/vaadin-date-picker";
-import type { PaperInputElement } from "@polymer/paper-input/paper-input";
-import {
-  css,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 
-@customElement("ha-date-input")
+const VaadinDatePicker = customElements.get("vaadin-date-picker");
-export class HaDateInput extends LitElement {
-  @property() public year?: string;
 
-  @property() public month?: string;
+export class HaDateInput extends VaadinDatePicker {
+  constructor() {
+    super();
 
-  @property() public day?: string;
+    this.i18n.formatDate = this._formatISODate;
+    this.i18n.parseDate = this._parseISODate;
+  }
 
-  @property({ type: Boolean }) public disabled = false;
+  ready() {
-
+    super.ready();
-  static get styles() {
+    const styleEl = document.createElement("style");
-    return css`
+    styleEl.innerHTML = `
       :host {
-        display: block;
+        width: 12ex;
-        font-family: var(--paper-font-common-base_-_font-family);
+        margin-top: -6px;
-        -webkit-font-smoothing: var(
+        --material-body-font-size: 16px;
-          --paper-font-common-base_-_-webkit-font-smoothing
+        --_material-text-field-input-line-background-color: var(--primary-text-color);
-        );
+        --_material-text-field-input-line-opacity: 1;
-      }
+        --material-primary-color: var(--primary-text-color);
-
-      paper-input {
-        width: 30px;
-        text-align: center;
-        --paper-input-container-shared-input-style_-_-webkit-appearance: textfield;
-        --paper-input-container-input_-_-moz-appearance: textfield;
-        --paper-input-container-shared-input-style_-_appearance: textfield;
-        --paper-input-container-input-webkit-spinner_-_-webkit-appearance: none;
-        --paper-input-container-input-webkit-spinner_-_margin: 0;
-        --paper-input-container-input-webkit-spinner_-_display: none;
-      }
-
-      paper-input#year {
-        width: 50px;
-      }
-
-      .date-input-wrap {
-        display: flex;
-        flex-direction: row;
       }
     `;
+    this.shadowRoot.appendChild(styleEl);
+    this._inputElement.querySelector("[part='toggle-button']").style.display =
+      "none";
   }
 
-  protected render(): TemplateResult {
+  private _formatISODate(d) {
-    return html`
+    return [
-      <div class="date-input-wrap">
+      ("0000" + String(d.year)).slice(-4),
-        <paper-input
+      ("0" + String(d.month + 1)).slice(-2),
-          id="year"
+      ("0" + String(d.day)).slice(-2),
-          type="number"
+    ].join("-");
-          .value=${this.year}
-          @change=${this._formatYear}
-          maxlength="4"
-          max="9999"
-          min="0"
-          .disabled=${this.disabled}
-          no-label-float
-        >
-          <span suffix="" slot="suffix">-</span>
-        </paper-input>
-        <paper-input
-          id="month"
-          type="number"
-          .value=${this.month}
-          @change=${this._formatMonth}
-          maxlength="2"
-          max="12"
-          min="1"
-          .disabled=${this.disabled}
-          no-label-float
-        >
-          <span suffix="" slot="suffix">-</span>
-        </paper-input>
-        <paper-input
-          id="day"
-          type="number"
-          .value=${this.day}
-          @change=${this._formatDay}
-          maxlength="2"
-          max="31"
-          min="1"
-          .disabled=${this.disabled}
-          no-label-float
-        >
-        </paper-input>
-      </div>
-    `;
   }
 
-  private _formatYear() {
+  private _parseISODate(text) {
-    const yearElement = this.shadowRoot!.getElementById(
+    const parts = text.split("-");
-      "year"
+    const today = new Date();
-    ) as PaperInputElement;
+    let date;
-    this.year = yearElement.value!;
+    let month = today.getMonth();
+    let year = today.getFullYear();
+    if (parts.length === 3) {
+      year = parseInt(parts[0]);
+      if (parts[0].length < 3 && year >= 0) {
+        year += year < 50 ? 2000 : 1900;
+      }
+      month = parseInt(parts[1]) - 1;
+      date = parseInt(parts[2]);
+    } else if (parts.length === 2) {
+      month = parseInt(parts[0]) - 1;
+      date = parseInt(parts[1]);
+    } else if (parts.length === 1) {
+      date = parseInt(parts[0]);
     }
 
-  private _formatMonth() {
+    if (date !== undefined) {
-    const monthElement = this.shadowRoot!.getElementById(
+      return { day: date, month, year };
-      "month"
+    }
-    ) as PaperInputElement;
+    return undefined;
-    this.month = ("0" + monthElement.value!).slice(-2);
+  }
 }
 
-  private _formatDay() {
+customElements.define("ha-date-input", HaDateInput as any);
-    const dayElement = this.shadowRoot!.getElementById(
-      "day"
-    ) as PaperInputElement;
-    this.day = ("0" + dayElement.value!).slice(-2);
-  }
-
-  get value() {
-    return `${this.year}-${this.month}-${this.day}`;
-  }
-}
 
 declare global {
   interface HTMLElementTagNameMap {

src/dialogs/more-info/controls/more-info-input_datetime.js

@@ -3,7 +3,7 @@ import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "@vaadin/vaadin-date-picker/theme/material/vaadin-date-picker";
+import "../../../components/ha-date-input";
 import { attributeClassNames } from "../../../common/entity/attribute_class_names";
 import "../../../components/ha-relative-time";
 import "../../../components/paper-time-input";
@@ -14,12 +14,12 @@ class DatetimeInput extends PolymerElement {
       <div class$="[[computeClassNames(stateObj)]]">
         <template is="dom-if" if="[[doesHaveDate(stateObj)]]" restamp="">
           <div>
-            <vaadin-date-picker
+            <ha-date-input
               id="dateInput"
               on-value-changed="dateTimeChanged"
               label="Date"
               value="{{selectedDate}}"
-            ></vaadin-date-picker>
+            ></ha-date-input>
           </div>
         </template>
         <template is="dom-if" if="[[doesHaveTime(stateObj)]]" restamp="">

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

@@ -57,9 +57,7 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
           ? html`
               <ha-date-input
                 .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
-                .year=${stateObj.attributes.year}
+                .value=${`${stateObj.attributes.year}-${stateObj.attributes.month}-${stateObj.attributes.day}`}
-                .month=${("0" + stateObj.attributes.month).slice(-2)}
-                .day=${("0" + stateObj.attributes.day).slice(-2)}
                 @change=${this._selectedValueChanged}
                 @click=${this._stopEventPropagation}
               ></ha-date-input>