Warning: Requires Card-Mod 4 beta, as it applies CSS on section level.
edit: Card-Mod 4 is out of beta, be sure to update to it to use this.
I used some hacks to get the energy date picker card into the toolbar in the past.
But this didn’t work reliable over time, and I started to use multiple time pickers on the same dashboard to look at daily ranges at top and monthly / yearly ranges further down the dashboard using multiple energy collection_key values.
So I needed some way to keep different date pickers pinned to the screen based on scroll position.
With card-mod 4 I finally managed to keep the date picker of the current section pinned to the top of the screen.
Thanks a lot to @dcapslock for the help. 
See this video demo:
This makes it easy to change the date, without the need to scroll to top for the date picker all the time.
You might need to adjust the colors / shadows to match your theme.
YAML code of a minimized sample dashboard page:
type: sections
sections:
- type: grid
card_mod:
style: |
:host {
.card:has(hui-card hui-energy-date-selection-card.sticky-header) {
position: sticky;
top: 64px;
z-index: 1;
}
}
cards:
- type: energy-date-selection
card_mod:
class: sticky-header
style: |
ha-card {
background: #c4c1da44;
backdrop-filter: blur(6px);
margin: 0 auto 0 auto;
max-width: 450px;
box-shadow: inset 0 -1px 0px #ffffff30, 0px 5px 5px 0px #00000030;
}
collection_key: energy_custom_daily
layout_options:
grid_columns: 24
grid_rows: 0.8
- type: energy-sankey
collection_key: energy_custom_daily
group_by_floor: false
group_by_area: false
layout: horizontal
layout_options:
grid_columns: 8
grid_rows: 12
card_mod:
style: |
ha-card {
width: 100% !important;
--chart-max-height: 750px;
}
column_span: 2
- type: grid
card_mod:
style: |
:host {
.card:has(hui-card hui-energy-date-selection-card.sticky-header) {
position: sticky;
top: 64px;
z-index: 1;
}
}
cards:
- type: heading
icon: ""
heading_style: title
grid_options:
columns: full
rows: 0.2
- type: energy-date-selection
card_mod:
class: sticky-header
style: |
ha-card {
background: #c4c1da44;
backdrop-filter: blur(6px);
margin: 0 auto 0 auto;
max-width: 450px;
box-shadow: inset 0 -1px 0px #ffffff30, 0px 5px 5px 0px #00000030;
}
collection_key: energy_custom_yearly
layout_options:
grid_columns: 12
grid_rows: 0.8
- type: energy-sankey
collection_key: energy_custom_yearly
group_by_floor: false
group_by_area: false
layout: horizontal
layout_options:
grid_columns: 8
grid_rows: 12
card_mod:
style: |
ha-card {
width: 100% !important;
--chart-max-height: 750px;
}
column_span: 3
max_columns: 2
cards: []
dense_section_placement: false
icon: ""
