Skip to content

Replace date picker for entities card #6899

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bramkragten merged 2 commits into from
Nov 9, 2020
Merged

Replace date picker for entities card #6899

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dc94836
Make input_datetime rows use vaadin-date-picker like the more-info-ca…
thomasloven Sep 9, 2020
8a1d3b5
Fix themed colors
thomasloven Nov 9, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
161 changes: 52 additions & 109 deletions src/components/ha-date-input.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,127 +1,70 @@
import "@polymer/paper-input/paper-input";
import type { PaperInputElement } from "@polymer/paper-input/paper-input";
import {
css,
customElement,
html,
LitElement,
property,
TemplateResult,
} from "lit-element";
import "@vaadin/vaadin-date-picker/theme/material/vaadin-date-picker";

@customElement("ha-date-input")
export class HaDateInput extends LitElement {
@property() public year?: string;
const VaadinDatePicker = customElements.get("vaadin-date-picker");

@property() public month?: string;
export class HaDateInput extends VaadinDatePicker {
constructor() {
super();

@property() public day?: string;

@property({ type: Boolean }) public disabled = false;
this.i18n.formatDate = this._formatISODate;
this.i18n.parseDate = this._parseISODate;
Comment on lines +9 to +10
Copy link
Member

@bramkragten bramkragten Sep 29, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should show the date in the format of the user language, we have functions for that: https://github.com/home-assistant/frontend/blob/dev/src/common/datetime/format_date.ts#L4

Copy link
Member

@bramkragten bramkragten Sep 29, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Something like formatDateShort(new Date(d.year, d.month, d.day), this.hass.language)

}

static get styles() {
return css`
ready() {
super.ready();
const styleEl = document.createElement("style");
styleEl.innerHTML = `
:host {
display: block;
font-family: var(--paper-font-common-base_-_font-family);
-webkit-font-smoothing: var(
--paper-font-common-base_-_-webkit-font-smoothing
);
}

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;
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";
}

protected render(): TemplateResult {
return html`
<div class="date-input-wrap">
<paper-input
id="year"
type="number"
.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() {
const yearElement = this.shadowRoot!.getElementById(
"year"
) as PaperInputElement;
this.year = yearElement.value!;
}

private _formatMonth() {
const monthElement = this.shadowRoot!.getElementById(
"month"
) as PaperInputElement;
this.month = ("0" + monthElement.value!).slice(-2);
private _formatISODate(d) {
return [
("0000" + String(d.year)).slice(-4),
("0" + String(d.month + 1)).slice(-2),
("0" + String(d.day)).slice(-2),
].join("-");
}

private _formatDay() {
const dayElement = this.shadowRoot!.getElementById(
"day"
) as PaperInputElement;
this.day = ("0" + dayElement.value!).slice(-2);
}
private _parseISODate(text) {
const parts = text.split("-");
const today = new Date();
let date;
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]);
}

get value() {
return `${this.year}-${this.month}-${this.day}`;
if (date !== undefined) {
return { day: date, month, year };
}
return undefined;
}
}

customElements.define("ha-date-input", HaDateInput as any);

declare global {
interface HTMLElementTagNameMap {
"ha-date-input": HaDateInput;
Expand Down
6 changes: 3 additions & 3 deletions src/dialogs/more-info/controls/more-info-input_datetime.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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="">
Expand Down
4 changes: 1 addition & 3 deletions src/panels/lovelace/entity-rows/hui-input-datetime-entity-row.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,7 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
? html`
<ha-date-input
.disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
.year=${stateObj.attributes.year}
.month=${("0" + stateObj.attributes.month).slice(-2)}
.day=${("0" + stateObj.attributes.day).slice(-2)}
.value=${`${stateObj.attributes.year}-${stateObj.attributes.month}-${stateObj.attributes.day}`}
@change=${this._selectedValueChanged}
@click=${this._stopEventPropagation}
></ha-date-input>
Expand Down