Question about JS in custom:button card and dates

Configuration Frontend
1

Hello all,

I am trying to figure out how to properly write this, but I either get errors (bad formatting) or not a result.

Maybe anyone here with more knowledge can help me? What I am trying to do with my custom:button card is to have one icon, and then I have 2 rows that will have one icon and one date IF the date listed in the helper is AFTER today’s date.

So if I put a date into hjemmekontor helper (homeoffice) there should pop up a icon and a date, once that date passes, it should disappear.

Anyways, here is the part that won’t give me a result, and I will paste the complete code too (I have tried two different ways, that’s why “ferie” and “hjemmekontor” under custom fields are different…

custom_fields:
  ferie: |
    [[[
      var dato = states['input_datetime.helper_dato_for_hjemmekontor'].date
      if (dato > 'now().date()')
      return `<ha-icon icon="mdi:beach" style="width: 25px; height: 25px; color: white;"> </ha-icon> ${states['input_datetime.helper_dato_for_hjemmekontor'].state} </span>`
    ]]]
  hjemmekontor: |
    [[[
      if (states['input_datetime.helper_dato_for_hjemmekontor'].state > 'now().date()')              
      return `<ha-icon icon="mdi:office-building" style="width: 25px; height: 25px; color: white;"> </ha-icon> ${states['input_datetime.helper_dato_for_hjemmekontor'].state}  </span>`
    ]]]

Complete code:

type: custom:button-card
name: Kalender
icon: mdi:calendar
show_state: false
show_name: false
size: 20px
styles:
  grid:
    - grid-template-areas: '"i" "ferie" "hjemmekontor"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content
  custom_fields:
    ferie:
      - align-self: start
      - justify-self: center
    hjemmekontor:
      - align-self: start
      - justify-self: center
custom_fields:
  ferie: |
    [[[
      var dato = states['input_datetime.helper_dato_for_hjemmekontor'].date
      if (dato > 'now().date()')
      return `<ha-icon icon="mdi:beach" style="width: 25px; height: 25px; color: white;"> </ha-icon> ${states['input_datetime.helper_dato_for_hjemmekontor'].state} </span>`
    ]]]
  hjemmekontor: |
    [[[
      if (states['input_datetime.helper_dato_for_hjemmekontor'].state > 'now().date()')              
      return `<ha-icon icon="mdi:office-building" style="width: 25px; height: 25px; color: white;"> </ha-icon> ${states['input_datetime.helper_dato_for_hjemmekontor'].state}  </span>`
    ]]]
2

  1. .date doesn’t exist on the state object. It doesn’t have a date attribute either. So you have to work with the timestamp attribute or the attributes that make up the date; year, month, day.

  2. now().date() does not exist in JS. That is a Jinja Template Only object.

  3. Google is your friend for JS. Simply google todays date JS and the first hit will tell you how to do it. And google “how to create date from string”.

var today = new Date();
var item = states['input_datetime.helper_dato_for_hjemmekontor'].attributes;
var dato = new Date(`${item.year}-${item.month}-${item.day}`)
if (dato > today)
  return `<ha-icon icon="mdi:beach" style="width: 25px; height: 25px; color: white;"> </ha-icon> ${item.state} </span>`
3

That worked like a charm. Thank you so much. Finally it worked :grinning_face_with_smiling_eyes:

I have a custom sensor formatting the date and giving me the number of day and name of month. I used that to try to figure out this, so I never gave it a thought that this would not work with Javascript. We learn something new every day.

I didn’t google that much as I didn’t know what to google, but I used the github page for the custom button to try to find an example that looked like it would fit for me. The issue then was as you mentioned, now(date).date() that I always used did not work.

But thank you for your help Petro, your example worked perfectly :partying_face:

4

As follow up question, would you know if it’s possible for the label to be synchronously(?) updated with the time?

eg.

var now = new Date().toJSON().slice(11, 19)

would return the (Greenwich) time to the second. eg. 11:48:21

The value would only be updated/changed if the page was refreshed.

Is it possible for the value to update without the page being refreshed?

Thanks

5

That’s not possible on just the UI unless a custom card can perform the updates for you.

1 Like