diff --git a/src/components/ha-date-input.ts b/src/components/ha-date-input.ts new file mode 100644 index 0000000000..4157d70af9 --- /dev/null +++ b/src/components/ha-date-input.ts @@ -0,0 +1,126 @@ +import { + html, + css, + LitElement, + TemplateResult, + property, + customElement, +} from "lit-element"; + +import "@polymer/paper-input/paper-input"; +// tslint:disable-next-line:no-duplicate-imports +import { PaperInputElement } from "@polymer/paper-input/paper-input"; + +@customElement("ha-date-input") +export class HaDateInput extends LitElement { + @property() public year?: string; + @property() public month?: string; + @property() public day?: string; + @property({ type: Boolean }) public disabled = false; + + static get styles() { + return css` + :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-input_-_-moz-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; + } + `; + } + + protected render(): TemplateResult { + return html` +