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;