diff --git a/src/dialogs/more-info/const.ts b/src/dialogs/more-info/const.ts
index e9304a55fc..8675c499e1 100644
--- a/src/dialogs/more-info/const.ts
+++ b/src/dialogs/more-info/const.ts
@@ -34,6 +34,8 @@ export const DOMAINS_WITH_MORE_INFO = [
"configurator",
"counter",
"cover",
+ "date",
+ "datetime",
"fan",
"group",
"humidifier",
@@ -49,6 +51,7 @@ export const DOMAINS_WITH_MORE_INFO = [
"siren",
"sun",
"switch",
+ "time",
"timer",
"update",
"vacuum",
diff --git a/src/dialogs/more-info/controls/more-info-date.ts b/src/dialogs/more-info/controls/more-info-date.ts
new file mode 100644
index 0000000000..b53829b557
--- /dev/null
+++ b/src/dialogs/more-info/controls/more-info-date.ts
@@ -0,0 +1,51 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../../components/ha-date-input";
+import "../../../components/ha-time-input";
+import { setDateValue } from "../../../data/date";
+import { isUnavailableState } from "../../../data/entity";
+import type { HomeAssistant } from "../../../types";
+
+@customElement("more-info-date")
+class MoreInfoDate extends LitElement {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @property({ attribute: false }) public stateObj?: HassEntity;
+
+ protected render() {
+ if (!this.stateObj || isUnavailableState(this.stateObj.state)) {
+ return nothing;
+ }
+
+ return html`
+
+
+ `;
+ }
+
+ private _dateChanged(ev: CustomEvent<{ value: string }>): void {
+ setDateValue(this.hass!, this.stateObj!.entity_id, ev.detail.value);
+ }
+
+ static get styles(): CSSResultGroup {
+ return css`
+ :host {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ }
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "more-info-date": MoreInfoDate;
+ }
+}
diff --git a/src/dialogs/more-info/controls/more-info-datetime.ts b/src/dialogs/more-info/controls/more-info-datetime.ts
new file mode 100644
index 0000000000..b0b25f9bc9
--- /dev/null
+++ b/src/dialogs/more-info/controls/more-info-datetime.ts
@@ -0,0 +1,80 @@
+import { format } from "date-fns";
+import { HassEntity } from "home-assistant-js-websocket";
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../../components/ha-date-input";
+import "../../../components/ha-time-input";
+import { setDateTimeValue } from "../../../data/datetime";
+import { isUnavailableState } from "../../../data/entity";
+import type { HomeAssistant } from "../../../types";
+
+@customElement("more-info-datetime")
+class MoreInfoDatetime extends LitElement {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @property({ attribute: false }) public stateObj?: HassEntity;
+
+ protected render() {
+ if (!this.stateObj || isUnavailableState(this.stateObj.state)) {
+ return nothing;
+ }
+
+ const dateObj = new Date(this.stateObj.state);
+ const time = format(dateObj, "HH:mm:ss");
+ const date = format(dateObj, "yyyy-MM-dd");
+
+ return html`
+
+ `;
+ }
+
+ private _stopEventPropagation(ev: Event): void {
+ ev.stopPropagation();
+ }
+
+ private _timeChanged(ev: CustomEvent<{ value: string }>): void {
+ const dateObj = new Date(this.stateObj!.state);
+ const newTime = ev.detail.value.split(":").map(Number);
+ dateObj.setHours(newTime[0], newTime[1], newTime[2]);
+
+ setDateTimeValue(this.hass!, this.stateObj!.entity_id, dateObj);
+ }
+
+ private _dateChanged(ev: CustomEvent<{ value: string }>): void {
+ const dateObj = new Date(this.stateObj!.state);
+ const newDate = ev.detail.value.split("-").map(Number);
+ dateObj.setFullYear(newDate[0], newDate[1] - 1, newDate[2]);
+
+ setDateTimeValue(this.hass!, this.stateObj!.entity_id, dateObj);
+ }
+
+ static get styles(): CSSResultGroup {
+ return css`
+ :host {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ }
+ ha-date-input + ha-time-input {
+ margin-left: 4px;
+ }
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "more-info-datetime": MoreInfoDatetime;
+ }
+}
diff --git a/src/dialogs/more-info/controls/more-info-input_datetime.ts b/src/dialogs/more-info/controls/more-info-input_datetime.ts
index 4ced398678..68926174d8 100644
--- a/src/dialogs/more-info/controls/more-info-input_datetime.ts
+++ b/src/dialogs/more-info/controls/more-info-input_datetime.ts
@@ -22,37 +22,32 @@ class MoreInfoInputDatetime extends LitElement {
}
return html`
- ${
- this.stateObj.attributes.has_date
- ? html`
-
-
- `
- : ``
- }
- ${
- this.stateObj.attributes.has_time
- ? html`
-
- `
- : ``
- }
-
+ ${this.stateObj.attributes.has_date
+ ? html`
+
+
+ `
+ : ``}
+ ${this.stateObj.attributes.has_time
+ ? html`
+
+ `
+ : ``}
`;
}
diff --git a/src/dialogs/more-info/controls/more-info-time.ts b/src/dialogs/more-info/controls/more-info-time.ts
new file mode 100644
index 0000000000..c131f7e3de
--- /dev/null
+++ b/src/dialogs/more-info/controls/more-info-time.ts
@@ -0,0 +1,55 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../../components/ha-date-input";
+import "../../../components/ha-time-input";
+import { isUnavailableState } from "../../../data/entity";
+import { setTimeValue } from "../../../data/time";
+import type { HomeAssistant } from "../../../types";
+
+@customElement("more-info-time")
+class MoreInfoTime extends LitElement {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @property({ attribute: false }) public stateObj?: HassEntity;
+
+ protected render() {
+ if (!this.stateObj || isUnavailableState(this.stateObj.state)) {
+ return nothing;
+ }
+
+ return html`
+
+ `;
+ }
+
+ private _stopEventPropagation(ev: Event): void {
+ ev.stopPropagation();
+ }
+
+ private _timeChanged(ev: CustomEvent<{ value: string }>): void {
+ setTimeValue(this.hass!, this.stateObj!.entity_id, ev.detail.value);
+ }
+
+ static get styles(): CSSResultGroup {
+ return css`
+ :host {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ }
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "more-info-time": MoreInfoTime;
+ }
+}
diff --git a/src/dialogs/more-info/state_more_info_control.ts b/src/dialogs/more-info/state_more_info_control.ts
index 39a7d9f456..7c85f0db71 100644
--- a/src/dialogs/more-info/state_more_info_control.ts
+++ b/src/dialogs/more-info/state_more_info_control.ts
@@ -13,6 +13,8 @@ const LAZY_LOADED_MORE_INFO_CONTROL = {
configurator: () => import("./controls/more-info-configurator"),
counter: () => import("./controls/more-info-counter"),
cover: () => import("./controls/more-info-cover"),
+ date: () => import("./controls/more-info-date"),
+ datetime: () => import("./controls/more-info-datetime"),
fan: () => import("./controls/more-info-fan"),
group: () => import("./controls/more-info-group"),
humidifier: () => import("./controls/more-info-humidifier"),
@@ -27,6 +29,7 @@ const LAZY_LOADED_MORE_INFO_CONTROL = {
siren: () => import("./controls/more-info-siren"),
sun: () => import("./controls/more-info-sun"),
switch: () => import("./controls/more-info-switch"),
+ time: () => import("./controls/more-info-time"),
timer: () => import("./controls/more-info-timer"),
update: () => import("./controls/more-info-update"),
vacuum: () => import("./controls/more-info-vacuum"),