I would like to show hourly forecast information using custom button cards. That works fine, but formatting the time of the forecast gives errors because the JS functions are not accepted within the custom button card. But making a sensor for each forecast time solely to format it seems overkill.
Is there a way to format datetime string in the custom button card?
I am new here, so if this is the wrong place to ask this question, please let me know.
In response to Pieter more details:
I have created my own forecast overview to have more control over it (things I missed in the existing controls) Besides the current day overview, I show a 5 hour forecast (thatās where I ran into problems).
The dashboard view contains 5 custom button cards to show 5 hours of forecast, based on a template (see details of the code below).
The time is shown with
return states[entity.entity_id].attributes.forecast[variables.item].datetime;
This will return a datetime in the format 2023-01-03T22:00:00+00:00
I am not able to get it to a format like 22:00. All conversion functions are not accepted in the custom button card.
E.g. as_timestamp(states[āweather.home_hourlyā].attributes.forecast[1].datetime) | timestamp_custom(ā%H:%Mā)
or by using functions like as_local or strftime
As a workaround, I have created sensors to convert the value to the correct format. But now I need 5 sensors just for formatting.
Creating sensors solely for formatting seems not right to me (also because it is not limited to this example).
Are there options to format the date within the custom card button? Or are there better workarounds.
The code in the dashboard view:
- type: horizontal-stack
cards:
- type: custom:button-card
template: homekit_weather_detail
entity: weather.home_hourly
variables:
item: 1
- type: custom:button-card
template: homekit_weather_detail
entity: weather.home_hourly
variables:
item: 2
etc.
The button card template contains:
homekit_weather_detail:
show_state: false
show_label: true
show_icon: false
show_name: false
show_entity_picture: true
variables:
item: 0
styles:
card:
- background-color: var(--theme-sys-ha-secondary-background-color)
- border-radius: 6px
- border-style: 1px
- border-color: var(--theme-sys-elevation-surface-primary5)
- padding: 0
- margin: 0
grid:
- grid-template-areas: '"l" "i" "temp" "precip"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content min-content min-content
img_cell:
- justify-content: center
- width: 100%
entity_picture:
- width: 90%
label:
- text-align: center
- font-size: 12px
- font-weight: 300
- margin-top: 5px
custom_fields:
temp:
- text-align: center
- font-size: 10px
- font-weight: 500
precip:
- text-align: center
- font-size: 10px
- font-weight: 300
entity_picture: >
[[[
if ((states[entity.entity_id].attributes.forecast[variables.item].datetime > states["sun.sun"].attributes.next_rising) && (states[entity.entity_id].attributes.forecast[variables.item].datetime < states["sun.sun"].attributes.next_setting))
return "/local/images/weather/" + states[entity.entity_id].attributes.forecast[variables.item].condition + ".svg";
else
if (states[entity.entity_id].attributes.forecast[variables.item].condition == 'partycloudy')
return "/local/images/weather/partlycloudy-night.svg";
else
if (states[entity.entity_id].attributes.forecast[variables.item].condition == 'sunny')
return "/local/images/weather/clear-night.svg";
else
return "/local/images/weather/" + states[entity.entity_id].attributes.forecast[variables.item].condition + ".svg";
]]]
label: >
[[[
return states[entity.entity_id].attributes.forecast[variables.item].datetime;
]]]
custom_fields:
temp: >
[[[
return states[entity.entity_id].attributes.forecast[variables.item].temperature + entity.attributes.temperature_unit;
]]]
precip: >
[[[
return states[entity.entity_id].attributes.forecast[variables.item].precipitation + " " + entity.attributes.precipitation_unit;
]]]