Add a date picker and adjust graph period in my custom energy dashboard?

[homecoops]

Is there a way to add a date picker to a custom dash? And is it possible to change the graphs so they display a calendar day?

There’s a nice date picker in the built-in energy dash, which does exactly what I want:

The default graphs in my WIP custom dash are OK, but I’d like to add this date picker, and also to have the graph display the whole day instead of the last several hours:

Thanks all

[4k3or3et]

DId you manage to figure it out? I am struggling with this one also.

[luxia]

Have you tried type: energy-date-selection?

[homecoops]

@luxia

type: energy-date-selection

Thank you for the tip - super-helpful, now I can see where this date picker lives.

It seems only to be available to “statistic” cards, though. I would like to add (and apply the selected dates) to a “history-graph” card.

Thanks, Paul

[slimak]

This is relatively simple with a custom button card. Furthermore, replacing “energy-date-selection” with a date helper makes this solution alot simpler, so I did that. My test helper entity ID is input_datetime.energy and is set as variables.helperId.

Example with 2 history graphs

type: custom:button-card
show_ripple: false
custom_fields:
  history1:
    card:
      type: history-graph
      entities:
        - entity: sensor.temperatura_salon_bccf84
      hours_to_show: "[[[ return variables.hours; ]]]"
  history2:
    card:
      type: history-graph
      entities:
        - entity: sensor.temperatura_sypialnia_597771
      hours_to_show: "[[[ return variables.hours; ]]]"
  date:
    card:
      type: entities
      entities:
        - entity: "[[[ return variables.helperId; ]]]"
          name: Starting date
variables:
  helperId: input_datetime.energy
  helperDate: "[[[ return new Date(states[variables.helperId]?.state); ]]]"
  hours: |
    [[[
      /* full days x 24 */
      const ms = Date.now() - variables.helperDate.getTime();
      const days = Math.ceil(ms/(1000*60*60*24));
      return days * 24;
    ]]]
styles:
  card:
    - pointer-events: auto
    - padding: 0px
    - overflow: visible
  grid:
    - display: block
  custom_fields:
    history1:
      - padding-bottom: 6px
      - border-bottom: 1px solid
    history2:
      - padding-top: 6px
    date:
      - margin-top: 18px

You can move the date in the helper using automation, e.g. at midnight.

[homecoops]

Thank you. As a new starter I can see that I have some learning to do!

To start with I’ll try to copy your custom button card and replace your sensors with mine and see what happens…