From b501b7f47ce284009d0c8cae56cd5ea54cce5164 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Tue, 6 Apr 2021 14:36:12 +0200 Subject: [PATCH] Change date picker (#8821) --- src/components/ha-date-input.ts | 173 ++++++++++++------ .../hui-input-datetime-entity-row.ts | 10 +- src/resources/ha-date-picker-style.js | 103 ----------- 3 files changed, 121 insertions(+), 165 deletions(-) delete mode 100644 src/resources/ha-date-picker-style.js diff --git a/src/components/ha-date-input.ts b/src/components/ha-date-input.ts index 76aaa8c689..e3342396c5 100644 --- a/src/components/ha-date-input.ts +++ b/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 = ` - - - -`; -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` + + + + `; + } + + 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; diff --git a/src/panels/lovelace/entity-rows/hui-input-datetime-entity-row.ts b/src/panels/lovelace/entity-rows/hui-input-datetime-entity-row.ts index bd3bedfed3..fbc6ce31ff 100644 --- a/src/panels/lovelace/entity-rows/hui-input-datetime-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-input-datetime-entity-row.ts @@ -63,9 +63,9 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow { + @value-changed=${this._selectedValueChanged} + > + ${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(); } diff --git a/src/resources/ha-date-picker-style.js b/src/resources/ha-date-picker-style.js deleted file mode 100644 index 185b29d453..0000000000 --- a/src/resources/ha-date-picker-style.js +++ /dev/null @@ -1,103 +0,0 @@ -const documentContainer = document.createElement("template"); -documentContainer.setAttribute("style", "display: none;"); - -documentContainer.innerHTML = ` - - - - - - - - - - - - -`; - -document.head.appendChild(documentContainer.content);