Date picker doest show on manual Energy strategy view

[Mariusthvdb]

Checklist

• I have updated to the latest available Home Assistant version.
• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.
• I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.

Describe the issue you are experiencing

As title: re-creating the Energy views with the manual strategy doesnt show the new floating date-picker

Describe the behavior you expected

show the date-picker

Steps to reproduce the issue

1. use yaml below

...

What version of Home Assistant Core has the issue?

2026.1.0bx

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue?

any

Which operating system are you using to run this browser?

Tahoe 26.1

State of relevant entities

Problem-relevant frontend configuration

views:
  - title: Utiliteiten
    path: utiliteiten
    icon: mdi:view-dashboard-variant
    strategy:
      type: energy-overview
      collection_key: energy_dashboard

  - title: Verbruik
    path: Verbruik
    icon: mdi:lightning-bolt
    strategy:
      type: energy
      collection_key: energy_dashboard

  - title: Vermogen
    path: vermogen
    icon: mdi:flash
    strategy:
      type: power
      collection_key: energy_dashboard_now

  - title: Gas
    path: gas
    icon: mdi:gas-burner
    strategy:
      type: gas
      collection_key: energy_dashboard

  - title: Water
    path: water
    icon: mdi:water
    strategy:
      type: water
      collection_key: energy_dashboard

JavaScript errors shown in your browser console/inspector

Additional information

No response

[silamon]

You need to use the date picker card: https://www.home-assistant.io/dashboards/energy/#energy-date-picker

[Mariusthvdb]

wait are you saying that is not included in the strategy at all?
fwiw, I did test

views:
  - title: Utiliteiten
    path: utiliteiten
    icon: mdi:view-dashboard-variant
    strategy:
      type: energy-overview
      collection_key: energy_dashboard
    sections:
      - cards:
          - type: energy-date-selection

but that still doesnt show the date-picker

adding it to another view makes the picker show, but not as a floating bar at the bottom

since

frontend/src/panels/energy/ha-panel-energy.ts

Line 55 in 209abf4

show_period_selector: true,

shows

show_period_selector: true

I did test that also, but again, no luck

[dcapslock]

The difference is that it is the energy panel that is using show_period_selector: true for each of the view strategies but not the view strategy itself so adding that srategy config it while using as a strategy outside of energy panel does nothing. I can understand why the panel needs to be the one showing a floating date selector. However the method makes using the strategies indepently confusing and problematic in that they can't get an energy-date-selection card.

[dcapslock]

I suppose that although these are strategies, they are strategies for the energy panel and not general lovelace strategies 🤔 They did work up until the energy-date-selection being removed from the stratgies and put into the energy panel. It would be good if a way could be found to have the energy-date-selection to be part of the strategy if not used in energy panel. Of course in this case it would not be floating but as per standard view.

[dcapslock]

but that still doesnt show the date-picker

Yes, this won't work as the sections of the strategy will override the sections of the base config. If the strategy code merged the config, rather than just using spread operator, this would work, so perhaps this is possible overall update to strategies in that config is merged, and which order.

[dcapslock]

Following on from above, as header is not part of the energy stragegies, it can be placed in Dashboard config along with view strategy. As it is header probably needs some more tweaking and perhaps can be easily floated as it is header and not in the main container.

EDIT: Added energy sidebar view showing adding energy-date-selection via badge and custom:hui-element hack.

views:
  - title: Overview
    path: overview
    icon: mdi:star-box-multiple-outline
    strategy:
      type: energy-overview
      collection_key: energy_dashboard
    header:
      card:
        type: energy-date-selection
        collection_key: energy_dashboard
  - title: Electricity
    path: electricity
    icon: mdi:home-lightning-bolt-outline
    strategy:
      type: energy
      collection_key: energy_dashboard
    badges:
      - type: custom:hui-element
        card_type: energy-date-selection

[dcapslock]

And finally to get something like the energy panel, use the following card-mod-view-yaml theme.

Note: while this could be floated to the bottom, the direction of the calendar cannot be configured by config, nor can we add the attribute that controls this in any way (perhaps this should be a card-mod feature 🤔 ), so that is why I left floated up top, which then means no need to then correct the header space which is nicely there for the floating selection.

Now of course this is all academic but available depening on where this issue goes...

EDIT: Need to work out the energy view which is sidebar and of course different. 🫤
EDIT2: OK, you can hack in energy-date-selection via badge and custom:hui-element. I have edited last comment to show this and updated theme card-mod. I have not bothered about css duplication for now.

  card-mod-view-yaml: |
    hui-sections-view $:
      hui-view-header $: |
        .type-energy-date-selection {
          /* taken from energy panel for .period-selector class, with adjustments as noted */
          height: 36px; /* Added - adjust height as needed */
          position: fixed;
          z-index: 4;
          top: calc(var(--header-height) + var(--ha-space-1)); /* replaces bottom position used in energy panel */
          left: max(
                  var(--mdc-drawer-width, 0px),
                  var(--safe-area-inset-left, 0px)
                );
          right: var(--safe-area-inset-right, 0);
          inset-inline-start: max(
                  var(--mdc-drawer-width, 0px),
                  var(--safe-area-inset-left, 0px)
                );
          inset-inline-end: var(--safe-area-inset-right, 0);
          margin: 0 auto;
          max-width: calc(min(450px, 100% - var(--ha-space-4)));
          box-sizing: border-box;
          padding-left: 0 !important; /* adjusted from energy panel css */
          padding-right: 0;
          padding-inline-start: var(--ha-space-4);
          padding-inline-end: 0;
          --ha-card-box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
                  0px 6px 10px 0px rgba(0, 0, 0, 0.14),
                  0px 1px 18px 0px rgba(0, 0, 0, 0.12);
          --ha-card-border-color: var(--divider-color);
          --ha-card-border-width: var(--ha-card-border-width, 1px);
        }
    hui-sidebar-view $:
      hui-view-badges $:
        hui-element $: |
          .type-energy-date-selection {
            height: 36px; /* Adjust height as needed */
            position: fixed;
            z-index: 4;
            top: calc(var(--header-height) + var(--ha-space-1));
            left: max(
                    var(--mdc-drawer-width, 0px),
                    var(--safe-area-inset-left, 0px)
                  );
            right: var(--safe-area-inset-right, 0);
            inset-inline-start: max(
                    var(--mdc-drawer-width, 0px),
                    var(--safe-area-inset-left, 0px)
                  );
            inset-inline-end: var(--safe-area-inset-right, 0);
            margin: 0 auto;
            max-width: calc(min(450px, 100% - var(--ha-space-4)));
            box-sizing: border-box;
            padding-left: 0 !important;
            padding-right: 0;
            padding-inline-start: var(--ha-space-4);
            padding-inline-end: 0;
            --ha-card-box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
                    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
                    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
            --ha-card-border-color: var(--divider-color);
            --ha-card-border-width: var(--ha-card-border-width, 1px);
          }

[Mariusthvdb]

right, easy peasy ;)

believe this shows we should be getting:

• the date-picker back inside the energy strategy, and use that config option show_period_selector: true
• a floating bar option for any other view too, not being limited to the energy panels.

btw, the header-card option works, and even picks up modifications, (which the builtin picker does not), but as you can see it doesnt play nice on the sidebar panels:

the hui-element badge is even more of an outlier. it works, but shows truly ugly out of the box, and would need a lot of tweaking

[Mariusthvdb]

makes me realize we should ideally also be getting the download data button in the menu bar on an energy strategy.......

which now is also lost in the manual strategy views

[piitaya]

The current strategy architecture does not support all UI components, as seen with the exclusion of the top bar date picker. The strategy framework is too limiting for our current requirements (e.g., overflow menus, sticky cards). We intend to refactor this logic, even for manual dashboards, but it will not be for this release for sure.

[dcapslock]

@piitaya I understand the architecture does not allow for these sort of components. However taking the energy-date-selection away from the energy strategies is a regression. Is there a way to have the strategy know how it is loaded, and if from the energy panel not load the energy-date-selection but load otherwise? This would be a good stopgap while the architecture is worked out, as I guess that only the energy-date-selection in enery strategies is primarily affected at ths stage.

[dcapslock]

Idea for stopgap. The energy panel is using the strategy config flag to show the energy-date-selection. Rename the flag to indicate whether the panel should render the energy-date-selection or the strategy. Then reinstate the card in the strategy if the panel did not generate the strategy as the flag would not exist (or manual strategy users set an appropriate value of the flag).

[karwosts]

What's the point of using the strategy manually if it's just the same as the dashboard? I never would have guessed people were doing that.