⌚🌍 Home Assistant time display plugin

Over the holidays I wrote a Home Assistant plugin to handle digital time display in Lovelace. Home Assistant currently does not have a native way of displaying a digital time. There are a few notable third-party plugins to do this but I found them unmaintained or lacking feature’s I desired.

While working on my SaaS business some 9 years ago, the application logic revolved around time display and dealing with time zones from which I learnt a few things:

An important aspect when managing computer time is the underlying time zone information.

This is normally some type of database that contains information about the world’s time zones, including details such as daylight saving time rules, historical changes, and geographical boundaries. It helps computers accurately convert and display time across different time zones, ensuring consistency and accuracy.

Some of the challenges in dealing with time zones is the periodic changes in daylight saving time (DST) rules. Many regions observe DST, which involves shifting the clocks forward or backward by one hour during certain periods of the year. Tzdata plays a crucial role in providing the necessary information to correctly account for these changes.

Time zone boundaries across the world

ICANN - primarily responsible for managing the domain name system (DNS). Impacts time-related functions on the Internet. ICANN plays a role in maintaining NTP infrastructure and standards, more importantly backs Paul Eggert who has maintained tzdata since 2005.

Fortunately, there is no need to roll your own time logic. There exists libraries within the JS ecosystem that allow you to handle time correctly with proper logic of time zones. I have previously leveraged moment.js but I found day.js equally good. They both offer dist bundles to handle time zones.

Back to my plugin, one feature was to allows users to configure to any time zone. It’s important it worked for all 350+ IANA zones and including their aliases. Some of Home Assistant plugins didn’t offer this at all.

Another feature was style customizability, all good plugins come with a degree of this but at cost of increased development time. It was the holidays after all and I didn’t want to spend too much time devoted on this.

Features that I wanted

1. CSS styling (No default styling applied - Let the user decide what it looks like)
2. All time zones
3. Any combination of date formats
4. Display multiple time instances (called ‘moments’)

Configuring the plugin

type: custom:better-moment-card
...
moment:

  - format: HH:mm:ss # Displays local time e.g. 17:00:01

  - format: HH:mm:ss # Displays time in Brussels e.g. 18:00:01 
    timezone: Europe/Brussels

  - format: HH:mm
    timezone: Asia/Riyadh # Displays time in Riyadh 
	 style: "font-weight:bold;" # Optional: Let the user style it how they want
    template: | # Optional: Let the user change the innerHtml of the element
	   Hello! It's {{moment}}  # Hello, it's xx:xx etc

Since this was my first HA plugin. I peaked at other plugins to understand practices because the docs were a bit lackluster in areas.

This made things easier for me. I spent about an evening on the main features and the next morning implementing time zones and a fair amount of time on the docs.

Improving

Locales is complicated science like tzdata. But in short, it is the display of time/date according to location and cultural customs. This is something I’d like to work on next if I see demand, but for myself and the majority of users I think it covers most use cases.

I’d like an option to display any combination of time formats inside template: i.e. template: Hello, the year is {{ format:YYYY }} and the hour is {{{format: HH}}}

If you’d like to try it out, read the install guide on it’s Github page. I have also submitted it to HACS for approval for easier installation.