diff --git a/src/components/ha-selector/ha-selector-time.ts b/src/components/ha-selector/ha-selector-time.ts index f573773868..8fb0d530c0 100644 --- a/src/components/ha-selector/ha-selector-time.ts +++ b/src/components/ha-selector/ha-selector-time.ts @@ -1,12 +1,9 @@ import { customElement, html, LitElement, property } from "lit-element"; +import memoizeOne from "memoize-one"; import { fireEvent } from "../../common/dom/fire_event"; import { TimeSelector } from "../../data/selector"; import { HomeAssistant } from "../../types"; import "../paper-time-input"; - -const test = new Date().toLocaleString(); -const useAMPM = test.includes("AM") || test.includes("PM"); - @customElement("ha-selector-time") export class HaTimeSelector extends LitElement { @property() public hass!: HomeAssistant; @@ -19,16 +16,24 @@ export class HaTimeSelector extends LitElement { @property({ type: Boolean }) public disabled = false; + private _useAmPm = memoizeOne((language: string) => { + const test = new Date().toLocaleString(language); + return test.includes("AM") || test.includes("PM"); + }); + protected render() { + const useAMPM = this._useAmPm(this.hass.locale.language); + const parts = this.value?.split(":") || []; - const hours = useAMPM ? parts[0] ?? "12" : parts[0] ?? "0"; + const hours = parts[0]; return html` 12 ? Number(hours) - 12 : hours} - .min=${parts[1] ?? "00"} - .sec=${parts[2] ?? "00"} + .hour=${hours && + (useAMPM && Number(hours) > 12 ? Number(hours) - 12 : hours)} + .min=${parts[1]} + .sec=${parts[2]} .format=${useAMPM ? 12 : 24} .amPm=${useAMPM && (Number(hours) > 12 ? "PM" : "AM")} .disabled=${this.disabled} @@ -42,12 +47,16 @@ export class HaTimeSelector extends LitElement { private _timeChanged(ev) { let value = ev.target.value; - if (useAMPM) { - let hours = Number(ev.target.hour); + const useAMPM = this._useAmPm(this.hass.locale.language); + let hours = Number(ev.target.hour || 0); + if (value && useAMPM) { if (ev.target.amPm === "PM") { hours += 12; } - value = `${hours}:${ev.target.min}:${ev.target.sec}`; + value = `${hours}:${ev.target.min || "00"}:${ev.target.sec || "00"}`; + } + if (value === this.value) { + return; } fireEvent(this, "value-changed", { value, diff --git a/src/components/paper-time-input.js b/src/components/paper-time-input.js index c057b3dc36..bc4f442ba7 100644 --- a/src/components/paper-time-input.js +++ b/src/components/paper-time-input.js @@ -133,7 +133,7 @@ export class PaperTimeInput extends PolymerElement { always-float-label$="[[alwaysFloatInputLabels]]" disabled="[[disabled]]" > - : + : @@ -303,28 +303,28 @@ export class PaperTimeInput extends PolymerElement { notify: true, }, /** - * Suffix for the hour input + * Label for the hour input */ hourLabel: { type: String, value: "", }, /** - * Suffix for the min input + * Label for the min input */ minLabel: { type: String, - value: ":", + value: "", }, /** - * Suffix for the sec input + * Label for the sec input */ secLabel: { type: String, value: "", }, /** - * Suffix for the milli sec input + * Label for the milli sec input */ millisecLabel: { type: String,