Ever since I removed the Compact Header module (deprecated) I’ve been missing the clock in the upper right corner. I loved that feature and my wife is mad it’s gone.
Since I do not use custom themes and do not want to modify every users profile setting I tried to solve it like so:
Copying the code from toolbar-clock.js into the Chrome console adds the clock every time, but when the code is added using the configuration.yaml file I get an error message most of the time (not always though).
It looks like the code runs to early, but even after playing around with whenDefined and updateComplete I just can’t get it to work reliable.
Uncaught (in promise) TypeError: Cannot read property 'shadowRoot' of null
at toolbar-clock.js:4
Just what I was looking for. Thank you. Here’s how to show the date (substitute “toLocaleTimeString” with “toLocaleDateString” and then select from options described here: Intl.DateTimeFormat() constructor - JavaScript | MDN)
And for those who may be wondering how you edit the page if the three dots are missing, note that the date and time functionally replace the three dots, so that clicking on them recovers the edit menu.
Thanks everyone that posted in this thread, this is working perfectly for me! Also for anyone as naive as myself that wants to do this remember that you have to restart HA for the changes to show up!
This works indeed, but only when accessing HA over a browser via the web URL. Anybody has an idea on how to show the clock instead of the dots when using the Companion app ?
Thanks, but this did not work for me. It behaved similarly to the old code in that it only shows up with narrow web windows and continues to work with the iOS app.
Thank you for your sharing your solutions! @FortranFour, your card-mod approach looks good, however the clock in not updating automatically as we have {{states('sensor.date_time')}} rendered only while refreshing the page.
I ended mixing both approaches. In case anyone is interested, here is my (currently working) solution:
configuration.yaml
# Load frontend themes from the themes folder
frontend:
themes: !include_dir_merge_named themes
extra_module_url:
- /local/custom_theme/time-display.js
function updateTime(icon) {
const timeString = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
if(icon) {
icon.style.setProperty('--clock-value', '"'+timeString+'"')
}
}
async function waitForElement(selector) {
while (true) {
const element = document.querySelector(selector);
if (element) {
return element;
}
await new Promise(requestAnimationFrame);
}
}
async function waitForShadowElement(root, selector) {
while (true) {
const element = root.querySelector(selector);
if (element) {
return element;
}
await new Promise(requestAnimationFrame);
}
}
customElements.whenDefined('home-assistant').then(async () => {
const ha = await waitForElement('home-assistant');
const haMain = await waitForShadowElement(ha.shadowRoot, 'home-assistant-main');
const haPanel = await waitForShadowElement(haMain.shadowRoot, 'ha-panel-lovelace');
const huiRoot = await waitForShadowElement(haPanel.shadowRoot, 'hui-root');
const assistIcon = await waitForShadowElement(huiRoot.shadowRoot, 'ha-icon-button[data-selector="ASSIST"]');
if (assistIcon) {
updateTime(assistIcon);
setInterval(updateTime, 1000, assistIcon);
}
});
To see the clock, make sure that you have selected the my_custom_clock_theme in your “Browser settings” (Click on your user → stay on the “General” tab → select the theme in the “Browser settings” section)
