Help with using an Input Datetime in Lovelace (SOLVED)

Evening all…I am using a few Input Datetime’s to record when I last cleaned some of my water treatment tanks. They work fine for the present task as they always stay set to the last cleaned date even after numerous HA restarts. I might be a bit picky though but the way they display in Lovelace UI is a little bit flaky. Note (in the below screenshot) how the actual date is confined to a very small piece of screen real estate and is close to unreadable The ‘name’.is also chopped off if a longer name is used…I adjusted that already. For example ideally Solids Settling was my first choice but that was not at all readable.

Of course by clicking the UI it all becomes clear what the date is and it can be set to a new date as required however surely this could be improved in the Lovelace UI?

To make this a little more useful for my needs I have setup a Markdown Card to display things a little better.

Apologies that they are not in the same order (I could use some help with ordering template variable results?) but this really has come hot off the press as I have only JUST NOW set this all up. I have only in the last 24 hours managed to use the Markdown Card to display template variables.

Ideally though I would like to be able to setup the date to be in the same format as the ‘States UI’ as you can see below:

Notice how the date is in the format Day (number) Month (name) Year…I would like to be able to do the same in my markdown card but at this point and after looking here and here I have drawn a blank on how to even begin to set that up. Any ideas?

Another observation though is why is the ‘name’ not able to wrap down as the ‘date’ does in the States UI? This is a similar problem that happens on the Entities Card displaying my Input Datetimes in Lovelace as I first noted above.

Anyway,Here is my present Lovelace Config for reference:

  - title: Cleaned
    cards:
      - type: entities
        title: Systems Last Cleaned
        show_header_toggle: false
        entities:
          - entity: input_datetime.only_date01 
            name: S Settling
          - entity: input_datetime.only_date11 
            name: S Settled            
          - entity: input_datetime.only_date02 
            name: FP Settling 
          - entity: input_datetime.only_date03 
            name: SH Final Bio
          - entity: input_datetime.only_date04 
            name: SH First Bio
          - entity: input_datetime.only_date10 
            name: SH Swirl            
          - entity: input_datetime.only_date05 
            name: PA Final Bio
          - entity: input_datetime.only_date06 
            name: PA First Bio
          - entity: input_datetime.only_date09 
            name: PA Swirl            
          - entity: input_datetime.only_date07 
            name: SL Clarifier
          - entity: input_datetime.only_date08 
            name: SL Screen            
      - type: markdown
        title: Last Cleaned
        content: >        
          
          {% for state in states.input_datetime -%}
          {%- if loop.first %}
          {% elif loop.last %}

          
          {% else %}

          
          {% endif -%}
          {{ state.name | capitalize }}: {{state.state_with_unit}}
          {%- endfor %}

Cheers in advance if you can offer any ideas to get me on the right track!

1 Like

but the way they display in Lovelace UI is a little bit flaky

Yes it is. Even for time only values.

Screenshot_2019-11-12%20Home%20Assistant

2 Likes

@tom_l well your time only values look more than readable?

The bottom two don’t have leading zeros on the minutes. No leading zeros are displayed for the minutes. 6:02 displays as 6:2.

3 Likes

Hmmm…my powers of observation…flaky!

PS: Is this being looked at do you think/know?

There are a few issues open.

1 Like

@tom_l After reading here…If I change to:

          {% endif -%}
          {{ state.name | capitalize }}: {{state.attributes}}
          {%- endfor %}

I now get a list of attributes available:

Solids settling: {'has_date': True, 'has_time': False, 'year': 2019, 'month': 11, 'day': 12, 'timestamp': 1573516800.0, 'friendly_name': 'Solids Settling'}

So I need to tell it to show: ‘day’ ‘month’ ‘year’

How do I do that do you think?

Hmmm…I tried:

          {% endif -%}
          {{ state.name | capitalize }}: {{state.attributes (‘day’ ‘month’ ‘year’)}}
          {%- endfor %}

and

      {% endif -%}
      {{ state.name | capitalize }}: {{state.attributes {‘day’ ‘month’ ‘year’}}}
      {%- endfor %}

Breaks the template and returns a string in both cases.

UPDATED:

So after lots of searching I found this here and in particular @petro with his very detailed explaination of the State Objects

      - type: markdown
        title: Last Cleaned
        content: >        
          
          {% for state in states.input_datetime -%}
          {%- if loop.first %}
          {% elif loop.last %}

          
          {% else %}

          
          {% endif -%}
          {{ state.name | capitalize }}:  **{{ state.attributes.day }}/{{ state.attributes.month }}/{{ state.attributes.year }}**
          {%- endfor %}

And so my Markdown card now looks like:

Which just goes to show that…If you look for long enough here you WILL find what you are looking for!

A relevant question, if I have an input_datetime that shows time only, how is it possible to edit the seconds using Lovelace?

It’s not without using custom cards or creating a new template sensor.