Change date picker (#8821)

src/components/ha-date-input.ts

@@ -1,62 +1,61 @@
-import "@vaadin/vaadin-date-picker/theme/material/vaadin-date-picker";
+import "@vaadin/vaadin-date-picker/theme/material/vaadin-date-picker-light";
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  PropertyValues,
+  query,
+} from "lit-element";
+import "@polymer/paper-input/paper-input";
+import { fireEvent } from "../common/dom/fire_event";
+import { mdiCalendar } from "@mdi/js";
+import "./ha-svg-icon";
 
-const VaadinDatePicker = customElements.get("vaadin-date-picker");
-
-const documentContainer = document.createElement("template");
-documentContainer.setAttribute("style", "display: none;");
-documentContainer.innerHTML = `
-  <dom-module id="ha-date-input-styles" theme-for="vaadin-text-field">
-    <template>
-      <style>
-      [part="input-field"] {
-        top: 2px;
-        height: 30px;
-        color: var(--primary-text-color);
-      }
-      [part="value"] {
-        text-align: center;
-      }
-      </style>
-    </template>
-  </dom-module>
-`;
-document.head.appendChild(documentContainer.content);
-
-export class HaDateInput extends VaadinDatePicker {
-  constructor() {
-    super();
-
-    this.i18n.formatDate = this._formatISODate;
-    this.i18n.parseDate = this._parseISODate;
-  }
-
-  ready() {
-    super.ready();
-    const styleEl = document.createElement("style");
-    styleEl.innerHTML = `
-      :host {
-        width: 12ex;
-        margin-top: -6px;
-        --material-body-font-size: 16px;
-        --_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);
-      }
-    `;
-    this.shadowRoot.appendChild(styleEl);
-    this._inputElement.querySelector("[part='toggle-button']").style.display =
-      "none";
-  }
-
-  private _formatISODate(d) {
+const i18n = {
+  monthNames: [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ],
+  weekdays: [
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ],
+  weekdaysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+  firstDayOfWeek: 0,
+  week: "Week",
+  calendar: "Calendar",
+  clear: "Clear",
+  today: "Today",
+  cancel: "Cancel",
+  formatTitle: (monthName, fullYear) => {
+    return monthName + " " + fullYear;
+  },
+  formatDate: (d: { day: number; month: number; year: number }) => {
     return [
       ("0000" + String(d.year)).slice(-4),
       ("0" + String(d.month + 1)).slice(-2),
       ("0" + String(d.day)).slice(-2),
     ].join("-");
-  }
-
-  private _parseISODate(text) {
+  },
+  parseDate: (text: string) => {
     const parts = text.split("-");
     const today = new Date();
     let date;
@@ -80,11 +79,73 @@ export class HaDateInput extends VaadinDatePicker {
       return { day: date, month, year };
     }
     return undefined;
+  },
+};
+@customElement("ha-date-input")
+export class HaDateInput extends LitElement {
+  @property() public value?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property() public label?: string;
+
+  @query("vaadin-date-picker-light", true) private _datePicker;
+
+  private _inited = false;
+
+  updated(changedProps: PropertyValues) {
+    if (changedProps.has("value")) {
+      this._datePicker.value = this.value;
+      this._inited = true;
+    }
+  }
+
+  render() {
+    return html`<vaadin-date-picker-light
+      .disabled=${this.disabled}
+      @value-changed=${this._valueChanged}
+      attr-for-value="value"
+      .i18n=${i18n}
+    >
+      <paper-input .label=${this.label} no-label-float>
+        <ha-svg-icon slot="suffix" .path=${mdiCalendar}></ha-svg-icon>
+      </paper-input>
+    </vaadin-date-picker-light>`;
+  }
+
+  private _valueChanged(ev: CustomEvent) {
+    if (
+      !this.value ||
+      (this._inited && !this._compareStringDates(ev.detail.value, this.value))
+    ) {
+      fireEvent(this, "value-changed", { value: ev.detail.value });
+    }
+  }
+
+  private _compareStringDates(a: string, b: string): boolean {
+    const aParts = a.split("-");
+    const bParts = b.split("-");
+    let i = 0;
+    for (const aPart of aParts) {
+      if (Number(aPart) !== Number(bParts[i])) {
+        return false;
+      }
+      i++;
+    }
+    return true;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      paper-input {
+        width: 110px;
+      }
+      ha-svg-icon {
+        color: var(--secondary-text-color);
+      }
+    `;
   }
 }
-
-customElements.define("ha-date-input", HaDateInput as any);
-
 declare global {
   interface HTMLElementTagNameMap {
     "ha-date-input": HaDateInput;

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

@@ -63,9 +63,9 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
               <ha-date-input
                 .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
                 .value=${`${stateObj.attributes.year}-${stateObj.attributes.month}-${stateObj.attributes.day}`}
-                @change=${this._selectedValueChanged}
-                @click=${this._stopEventPropagation}
-              ></ha-date-input>
+                @value-changed=${this._selectedValueChanged}
+              >
+              </ha-date-input>
               ${stateObj.attributes.has_time ? "," : ""}
             `
           : ``}
@@ -103,9 +103,7 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
 
     const date = this._dateInputEl ? this._dateInputEl.value : undefined;
 
-    if (time !== stateObj.state) {
-      setInputDateTimeValue(this.hass!, stateObj.entity_id, time, date);
-    }
+    setInputDateTimeValue(this.hass!, stateObj.entity_id, time, date);
 
     ev.target.blur();
   }

src/resources/ha-date-picker-style.js

@@ -1,103 +0,0 @@
-const documentContainer = document.createElement("template");
-documentContainer.setAttribute("style", "display: none;");
-
-documentContainer.innerHTML = `
-<dom-module id="ha-date-picker-text-field-styles" theme-for="vaadin-text-field">
-  <template>
-    <style>
-      :host {
-        padding: 8px 0 11px 0;
-        margin: 0;
-      }
-
-      [part~="label"] {
-        top: 6px;
-        font-size: var(--paper-font-subhead_-_font-size);
-        color: var(--paper-input-container-color, var(--secondary-text-color));
-      }
-
-      :host([focused]) [part~="label"] {
-        color: var(--paper-input-container-focus-color, var(--primary-color));
-      }
-
-      [part~="input-field"] {
-        color: var(--primary-text-color);
-        top: 3px;
-      }
-
-      [part~="input-field"]::before, [part~="input-field"]::after {
-        background-color: var(--paper-input-container-color, var(--secondary-text-color));
-        opacity: 1;
-      }
-
-      :host([focused]) [part~="input-field"]::before, :host([focused]) [part~="input-field"]::after {
-        background-color: var(--paper-input-container-focus-color, var(--primary-color));
-      }
-
-      [part~="value"] {
-        font-size: var(--paper-font-subhead_-_font-size);
-        height: 24px;
-        padding-top: 4px;
-        padding-bottom: 0;
-      }
-    </style>
-  </template>
-</dom-module>
-<dom-module id="ha-date-picker-button-styles" theme-for="vaadin-button">
-  <template>
-    <style>
-      :host([part~="today-button"]) [part~="button"]::before {
-        content: "⦿";
-        color: var(--primary-color);
-      }
-
-      [part~="button"] {
-        font-family: inherit;
-        font-size: var(--paper-font-subhead_-_font-size);
-        border: none;
-        background: transparent;
-        cursor: pointer;
-        min-height: var(--paper-item-min-height, 48px);
-        padding: 0px 16px;
-        color: inherit;
-      }
-
-      [part~="button"]:focus {
-        outline: none;
-      }
-    </style>
-  </template>
-</dom-module>
-<dom-module id="ha-date-picker-overlay-styles" theme-for="vaadin-date-picker-overlay">
-  <template>
-    <style include="vaadin-date-picker-overlay-default-theme">
-      [part~="toolbar"] {
-        padding: 0.3em;
-        background-color: var(--secondary-background-color);
-      }
-
-      [part="years"] {
-        background-color: var(--secondary-text-color);
-        --material-body-text-color: var(--primary-background-color);
-      }
-
-      [part="overlay"] {
-        background-color: var(--primary-background-color);
-        --material-body-text-color: var(--secondary-text-color);
-      }
-
-    </style>
-  </template>
-</dom-module>
-<dom-module id="ha-date-picker-month-styles" theme-for="vaadin-month-calendar">
-  <template>
-    <style include="vaadin-month-calendar-default-theme">
-      [part="date"][today] {
-        color: var(--primary-color);
-      }
-    </style>
-  </template>
-</dom-module>
-`;
-
-document.head.appendChild(documentContainer.content);