Energy Period Selector Plus

🎯 Goal

The main goal of this card is to expand the functionality and customizability of the official Energy Date Picker Card from Home Assistant.

The goal is to deliver a card that fits in the overall design of the Energy Dashboard, while providing more features.

🙏 Attribution & Credits

This project is a continuation and enhancement of the original work by @flixlix. The original developer created an amazing foundation for this card, but after nearly 2 years of inactivity, we decided to continue development to fix critical issues and add new features.

We want to give massive credit and thanks to @flixlix for their incredible work and inspiration! 🙌

The original repository provided the solid foundation that made this enhanced version possible. Without their excellent initial implementation, this project wouldn't exist.

🚀 What's New & Fixed

New Features

• Layout Modes - Choose between standard and compact layouts
• Header Integration - Optimized compact mode perfect for header usage
• Enhanced UI Editor - Added layout mode selection to the configuration interface
• Improved Responsiveness - Better behaviour on different screen sizes
• Better Theme Integration - Proper color theming throughout

Code Quality Improvements

• Cleaner CSS - Removed redundant and conflicting styles
• Better TypeScript - Improved type safety and code organization
• Simplified Configuration - Removed unused options and simplified the API
• Enhanced Documentation - Comprehensive examples and usage guides

✨ Features

• UI Editor - Easy configuration through Home Assistant's interface
• Flexible Layout Modes - Standard card layout or compact header integration
• Customizable Buttons - Show/hide and style Compare, Today, and Period buttons
• Entity Synchronization - Sync dates with Home Assistant entities
• Theme Integration - Properly respects Home Assistant's theming system
• Responsive Design - Works great on all screen sizes

Installation

Installing via HACS (recommended)

or

1. Go to HACS->Integrations
2. Add this repo(https://github.com/talKitron/energy-period-selector-plus) into your HACS custom repositories
3. Search for Energy Period Selector Plus Map and Download it
4. Restart your HomeAssistant

Manual Install

1. Download and copy energy-period-selector-plus.js from the latest release into your config/www directory.

2. Add the resource reference as described below.

Add resource reference

If you configure Dashboards via YAML, add a reference to energy-period-selector-plus.js inside your configuration.yaml:

resources:
  - url: /local/energy-period-selector-plus.js
    type: module

Else, if you prefer the graphical editor, use the menu to add the resource:

1. Make sure advanced mode is enabled in your user profile (click on your user name to get there)
2. Navigate to Settings -> Dashboards
3. Click three dot icon
4. Select Resources
5. Hit (+ ADD RESOURCE) icon
6. Enter URL /local/energy-period-selector-plus.js and select type "JavaScript Module". (Use /hacsfiles/energy-period-selector-plus/energy-period-selector-plus.js and select "JavaScript Module" for HACS install if HACS didn't do it already)

Using the card

To configure this card, only the type is required, making it very easy to get started.

In addition to that, I developed a UI Editor, making it even easier to change the card according to your preferences. 🥳

The UI Editor looks like this:

Options

Card options

Name	Type	Default	Description
type	string	required	custom:energy-period-selector-plus.
layout_mode	string	standard	Layout mode for the card. Supported values are standard (default card layout) and compact (optimized for headers).
card_background	boolean	false	If set to true, a card will be added to the background of the card.
title	string	undefined	If set, a title will be added to the card.
today_button_type	boolean	true	If set to true, a button will be added to select today.
prev_next_buttons	boolean	true	If set to true, buttons will be added to control the previous and next period.
compare_button_type	string	undefined	If set, a button will be added to toggle the compare mode. Supported values are icon and text.
period_buttons	array	undefined	If set, only buttons inside this array will be displayed. Supported values are day, week, month, year and custom. Order of your array will be applied.
custom_period_label	string	undefined	If set, the label of the custom period button will be changed to this value. Otherwise will be synced to your HA language (If not, consider submitting a PR, adding your language to the localize function.)
sync_entity	string	undefined	If set, the card will sync its selected date with the specified Home Assistant entity (e.g., input_datetime.solar_chart_date). Use this or the range options below, not both.
sync_direction	string	both	Controls the sync direction for sync_entity. Supported values are to-entity, from-entity, and both.
sync_start_entity	string	undefined	If set, the card will sync the currently selected period start date to this Home Assistant input_datetime entity. Use this (and optionally sync_end_entity) or sync_entity, not both.
sync_end_entity	string	undefined	If set, the card will sync the currently selected period end date to this Home Assistant input_datetime entity. Use with sync_start_entity for range sync; do not use together with sync_entity.

Sync options: Use either single-date sync (sync_entity + sync_direction) or range sync (sync_start_entity and/or sync_end_entity). Configuring both at once is invalid and the card will show a configuration error until one set is cleared.

Example Configurations

type: custom:energy-period-selector-plus
card_background: true

---

type: custom:energy-period-selector-plus
card_background: true
title: No Previous or Next Controls
prev_next_buttons: false

---

type: custom:energy-period-selector-plus
card_background: true
title: No Today Button
today_button_type: false

---

type: custom:energy-period-selector-plus
card_background: true
title: Text Compare Button
compare_button_type: text

---

type: custom:energy-period-selector-plus
card_background: true
title: Icon Compare Button
compare_button_type: icon

---

type: custom:energy-period-selector-plus
card_background: true
title: No Week Button
period_buttons:
  - day
  - month
  - year

---

type: custom:energy-period-selector-plus
card_background: true
title: Custom Period Picker
period_buttons:
  - day
  - week
  - month
  - year
  - custom

---

type: custom:energy-period-selector-plus
card_background: true
title: Custom Period Picker
period_buttons:
  - day
  - week
  - month
  - year
  - custom
custom_period_label: </|\>

---

type: custom:energy-period-selector-plus
layout_mode: compact
card_background: false
title: Compact Layout for Headers
period_buttons: [day, week, month, year]
compare_button_type: text

---

# Perfect for header_cards configuration
type: custom:energy-period-selector-plus
layout_mode: compact
card_background: false
period_buttons: [day, week, month, year]
compare_button_type: icon
sync_entity: input_datetime.solar_chart_date

---

🏠 Header Integration

The compact layout mode is specifically designed for header integration in Home Assistant. Here's how to use it:

Basic Header Setup

header_cards:
  justify_content: null
  cards:
    - type: vertical-stack
      cards:
        - type: custom:energy-period-selector-plus
          layout_mode: compact
          card_background: false
          period_buttons: [day, week, month, year]
          compare_button_type: text
          sync_entity: input_datetime.solar_chart_date

Advanced Header Configuration

header_cards:
  justify_content: null
  cards:
    - type: vertical-stack
      cards:
        - type: custom:energy-period-selector-plus
          layout_mode: compact
          card_background: false
          period_buttons: [day, week, month, year, custom]
          compare_button_type: icon
          today_button_type: text
          sync_entity: input_datetime.solar_chart_date
          sync_direction: both

🔄 Migration from Original

If you're upgrading from the original version, here's what you need to know:

What's Fixed

• Period buttons now work correctly - This was the main issue in the original
• Arrow buttons stay aligned - No more misalignment after a few seconds
• Better theme integration - Colors now properly respect your HA theme
• Improved stability - No more dynamic styling conflicts

Real world Demo