diff --git a/src/panels/config/script/ha-script-picker.ts b/src/panels/config/script/ha-script-picker.ts
index 97ef655d18..73a7eaa762 100644
--- a/src/panels/config/script/ha-script-picker.ts
+++ b/src/panels/config/script/ha-script-picker.ts
@@ -11,7 +11,9 @@ import { HassEntity } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
-import { formatDateTime } from "../../../common/datetime/format_date_time";
+import { differenceInDays } from "date-fns/esm";
+import { formatShortDateTime } from "../../../common/datetime/format_date_time";
+import { relativeTime } from "../../../common/datetime/relative_time";
import { fireEvent, HASSDomEvent } from "../../../common/dom/fire_event";
import { computeStateName } from "../../../common/entity/compute_state_name";
import { navigate } from "../../../common/navigate";
@@ -99,18 +101,22 @@ class HaScriptPicker extends LitElement {
direction: "asc",
grows: true,
template: narrow
- ? (name, script: any) => html`
- ${name}
-
- ${this.hass.localize("ui.card.automation.last_triggered")}:
- ${script.attributes.last_triggered
- ? formatDateTime(
- new Date(script.attributes.last_triggered),
- this.hass.locale
- )
- : this.hass.localize("ui.components.relative_time.never")}
-
- `
+ ? (name, script: any) => {
+ const date = new Date(script.attributes.last_triggered);
+ const now = new Date();
+ const dayDifference = differenceInDays(now, date);
+ return html`
+ ${name}
+
+ ${this.hass.localize("ui.card.automation.last_triggered")}:
+ ${script.attributes.last_triggered
+ ? dayDifference > 3
+ ? formatShortDateTime(date, this.hass.locale)
+ : relativeTime(date, this.hass.locale)
+ : this.hass.localize("ui.components.relative_time.never")}
+
+ `;
+ }
: undefined,
},
};
@@ -119,11 +125,18 @@ class HaScriptPicker extends LitElement {
sortable: true,
width: "40%",
title: this.hass.localize("ui.card.automation.last_triggered"),
- template: (last_triggered) => html`
- ${last_triggered
- ? formatDateTime(new Date(last_triggered), this.hass.locale)
- : this.hass.localize("ui.components.relative_time.never")}
- `,
+ template: (last_triggered) => {
+ const date = new Date(last_triggered);
+ const now = new Date();
+ const dayDifference = differenceInDays(now, date);
+ return html`
+ ${last_triggered
+ ? dayDifference > 3
+ ? formatShortDateTime(date, this.hass.locale)
+ : relativeTime(date, this.hass.locale)
+ : this.hass.localize("ui.components.relative_time.never")}
+ `;
+ },
};
}