How to display time that updates live? (see my code please)

I want to display the current time in a picture element card. I made a template sensor but it only displays correctly when HA loads, but it does not update every minute, so the time always says the same thing until I restart/reload. Either one of the following formats will display this (which I was very happy to figure out):

Monday, September 21 • 11:12 PM

But how do I get it to be “live” and up to the minute?

- platform: template
  sensors:
    local_timea:
      value_template: "{{ as_timestamp(now()) | timestamp_custom('%A, %B %-d • %-I:%M %p') }}" 
# OR
- platform: template
  sensors:
    local_timeb:
      value_template: "{{ now().strftime('%A, %B %-d • %-I:%M %p') }}"
      

And this is how I implement it in the Picture Elements card:

    cards:
      - type: picture-elements
        elements:
          - entity: sensor.local_timeb
            style:
              color: "#bfbdbf"
              font-family: Saira
              font-weight: 400
              font-size: 18px
              text-align: left
              pointer-events: none #to make this unclickable
              left: 50%
              top: 10%
            type: state-label

You’re reinventing the wheel.
Have a look here:

The problem is, that there is no entity in your template that triggers a reload. In your case it is better to use the “sensor.time” entity instead of the now() function.
For more information have a look at this:

Thanks for the quick pointers jivesinger and tobi-bo.
My problem with the various display_options on the Time & Date page is that I don’t need those formats - unless I can make one of those display like this:

Monday, September 21 • 11:12 PM

I like the sound of tobi-bo’s states("sensor.time") option but how do I use that to display the format I want? In other words, the following using timestamp gets me what I want, but without the live update:

{{ as_timestamp(now()) | timestamp_custom('%A, %B %-d • %-I:%M %p') }}

And this returns an error:

{{ states("sensor.time") | timestamp_custom('%A, %B %-d • %-I:%M %p') }}

Obviously, the second example is wrong, but I don’t know what to put after states("sensor.time") to get the format I want. I’m also suspecting that states("sensor.date") will be required as well for the date part of things?

You have to work around here, this should work:

- platform: template
  sensors:
    local_timeb:
      value_template: >-
        {% set dummy = states("sensor.time") %}
        {{ as_timestamp(now()) | timestamp_custom('%A, %B %-d • %-I:%M %p') }}

so, you “use” the sensor.time to trigger a reload every minute…

1 Like

You could also have split it up in two parts and placed them side by side (or something) in the picture card.
Have the date as one “entity” of the card and then the sensor.time as the other part.

1 Like

Thank you so much @tobi-bo - it worked just the way I hoped it would. You have no idea how excited I was when I watched one minute tick over to the next. It’s the little things in life, right?

I’ll have to look into your set dummy example to see what it’s doing. Thanks again for helping someone who was stuck in the mud.

And incidentally, I’ll add this here since I’ve seen people ask about it a few times… To remove the leading zero from the time display (2:00 instead of 02:00), add a dash before the part that doesn’t need the padded zero - in this case the hour which is ‘I’:

%-I:%M

Same works for the day of the month:

%-d

Probably obvious to most, but it wasn’t to me.

A template sensor will only update as often as any referenced sensor that the template contains.
Your initial template contained no reference to any other sensors, hence it never updated.

Your template now references a sensor which updates every minute, hence your template updates every minute.

1 Like

Perfect explanation @jivesinger. Thank you for helping me out!