How to retrieve HA timezone in a Lovelace card?

Development
1

I asked this in Configuration but was re-directed here. I am trying to fix a couple of custom cards that assume that the time data they are displaying (specifically sunrise and sunset) is in the time zone of the browser / app being used, vs being in the time zone of the Home Assistant instance.

By creating 2 sensors on HA that are pre-formatted as displayable times in the correct timezone, I can pick those up in the card and display them. However, this is a bit of a kludge since it requires creating these sensors. I would like to retrieve, in the Lovelace card, the timezone that the Home Assistant is using and then use that as input into the Javascript IntlDateFormat function to convert it for correct display. Is there a built-in way to retrieve the configured timezone? I have searched by couldn’t find anything about this.

Thanks!

2

Not entirely clear on what you are trying to do but you can use now() in your templating to get the system time information. For instance now().tzinfo returns the timezone string. There’s tons more information at Templating - Home Assistant that should help you. Also creating sensors to regroup or reformat information is very typical in HA. Lovelace is for output not input.

3

What I am doing is fixing Lovelace cards that display time data in the timezone of the dashboard user / device, vs. the timezone of the HA instance. It makes no sense to display the time of sunrise for a system on the US east coast in a timezone that is not US east coast!

For now, I have created my own sensor using now().tzinfo.

This is what I have come up with. next_rising and next_setting get displayed in the html output. This does require that the card be installed with a new sensor, hatimezone. It would be cleaner if that was something already built in, like an attribute of an object that encapsulates information about the HA instance.

    const sun = this.hass.states["sun.sun"];
    const hatimezone = this.hass.states["sensor.hatimezone"];

    let next_rising;
    let next_setting;

    var options = {
      hour: 'numeric', minute: 'numeric', second: 'numeric',
      hour12: true,
      timeZone: ''
    };

    options.timeZone = hatimezone.state;

    if (sun) {
        next_rising = new Intl.DateTimeFormat('default', options).format(new Date(sun.attributes.next_rising));
        next_setting = new Intl.DateTimeFormat('default', options).format(new Date(sun.attributes.next_setting)); 
      }
4

Okay. Cleaner is a relative thing.

You could put a change request into the lovelace card(s) you were/are using. You may find that the developer(s) are willing to consider your changes. Or since it’s open source you could roll your own. Or you could just say, from the UI perspective it works, and no one looks under the hood except yourself anyway. In all instances the code to create what you want goes somewhere.