import { LitElement, css, html } from "lit"; import { customElement, state } from "lit/decorators"; import { formatDateTimeWithSeconds } from "../../../../src/common/datetime/format_date_time"; import "../../../../src/components/ha-card"; import "../../../../src/components/ha-control-select"; import "../../../../src/components/ha-list"; import type { FrontendLocaleData } from "../../../../src/data/translation"; import { DateFormat, FirstWeekday, NumberFormat, TimeFormat, TimeZone, } from "../../../../src/data/translation"; import { demoConfig } from "../../../../src/fake_data/demo_config"; import { translationMetadata } from "../../../../src/resources/translations-metadata"; import { timeOptions } from "../../data/date-options"; @customElement("demo-date-time-date-time-seconds") export class DemoDateTimeDateTimeSeconds extends LitElement { @state() private selection?: string = "now"; @state() private date: Date = new Date(); handleValueChanged(e: CustomEvent) { this.selection = e.detail.value as string; this.date = new Date(); if (this.selection !== "now") { const [hours, minutes, seconds] = this.selection.split(":").map(Number); this.date.setHours(hours); this.date.setMinutes(minutes); this.date.setSeconds(seconds); } } protected render() { const defaultLocale: FrontendLocaleData = { language: "en", number_format: NumberFormat.language, time_format: TimeFormat.language, date_format: DateFormat.language, first_weekday: FirstWeekday.language, time_zone: TimeZone.local, }; return html`
Language
Default (lang)
12 Hours
24 Hours
${Object.entries(translationMetadata.translations).map( ([key, value]) => html`
${value.nativeName}
${formatDateTimeWithSeconds( this.date, { ...defaultLocale, language: key, time_format: TimeFormat.language, }, demoConfig )}
${formatDateTimeWithSeconds( this.date, { ...defaultLocale, language: key, time_format: TimeFormat.am_pm, }, demoConfig )}
${formatDateTimeWithSeconds( this.date, { ...defaultLocale, language: key, time_format: TimeFormat.twenty_four, }, demoConfig )}
` )}
`; } static styles = css` ha-control-select { max-width: 800px; margin: 12px auto; } .header { font-weight: bold; } .center { text-align: center; } .container { max-width: 900px; margin: 12px auto; display: flex; align-items: center; justify-content: space-evenly; } .container > div { flex-grow: 1; width: 20%; } `; } declare global { interface HTMLElementTagNameMap { "demo-date-time-date-time-seconds": DemoDateTimeDateTimeSeconds; } }