Add Date as name of card

Configuration Frontend
1

Hi, I’m trying to add a simple date to the name of a card.
I’ve added in config.yaml:

sensor:
- platform: time_date
    display_options:
      - 'time'
      - 'date'
      - 'date_time'
      - 'date_time_utc'
      - 'date_time_iso'
      - 'time_date'
      - 'time_utc'
      - 'beat'

and I’ve added this card to Lovelace:

type: entity
entity: sensor.time
icon: false;
style: |
  :host {
    text-align: center;
  }
  :header {
  visibility: none;
  padding: 1px;
  margin: 0px;
  }
  .value {
  font-size: 48px !important;
  font-weight: larger;
  padding: 12px;
  height: 90px !important;
  vertical-align: text-top;
  text-shadow: 
    1px 0px 3px #444, 0px 1px 3px #eee;
  text-shadow: 0 1px 3px #000, 
               1px 1px 3px #111;
  }
theme: synthwave
name: [ current date to be shown here]  reading from {{sensor.date}}

So i just need to have the Date as the name/title of the card…

I’ve tried to put the sensor.date into a variable and to be shown as name: but did not succeded
Also I’ve tried to show directly the sensor.date as the name but got [object Object]

Any help is really appreciated.
B.

2

Please try something like this, not sure if this will work.

'{{ now().timestamp() | timestamp_custom(''%I:%M%p %a %h %d %Y '') }}'
3

Hi, welcome to the community.
You cannot do template the way you want in lovelace, try using the config-template-card.
That card opens up possibilities to lovelace customization.
Have fun.

4

Hi, sorry for the late reply,
I have tried @sheminasalam option but unfortunately no result. the code can’t be interpreted correctly by Lovelace and is displayed as string.

@JTPublic, thanks for pointing me in that dirrection, it looks like the config-template-card is what I need and I try to wrap my mind around the code.
At a first glance looks like it is a bit difficult to add what I want but I am positive that it can be done.
So I’ll dig further :slight_smile:

Thank you again for your advices and support !
I’ll post back the result (if it works)

B.

5

This may help you started :slight_smile:

       - type: 'custom:config-template-card'
        entities: 
          - sensor.time
          - sensor.date
        card:
          type: entity
          theme: synthwave
          entity: sensor.time  
          name: "${ states['sensor.date'].state }"
          icon: false;
          style: |
            :host {
              text-align: center;
            }
            :header {
            visibility: none;
            padding: 1px;
            margin: 0px;
            }
            .value {
            font-size: 48px !important;
            font-weight: larger;
            padding: 12px;
            height: 90px !important;
            vertical-align: text-top;
            text-shadow: 
              1px 0px 3px #444, 0px 1px 3px #eee;
            text-shadow: 0 1px 3px #000, 
                         1px 1px 3px #111;
            }

image
image1151×270 49.3 KB

1 Like
6

Yes that’s exactly what i wanted to acheive

up until now i managed to make this card:

type: 'custom:config-template-card'
variables:
  DATA: 'states[''sensor.date''].state'
entities:
  - sensor.time
card:
  type: entities
  entities:
    - entity: sensor.time
      icon: false;
      name: '${DATA}'
      style: |
        #div.info{
        font-size: 48px !important;
        font-weight: larger;
        text-align: left;    
        padding: 5px;
        }
         .hui-generic-entity-row, .text-content {
        font-size: 48px !important;
        font-weight: larger;
        padding: 10px;
        height: 30px !important;
        text-align: center;
        text-shadow: 
        1px 0px 3px #444, 0px 1px 3px #111;

        }

with this result:

image
image844×922 119 KB

Thank you, I will use your example.

B.