Add date range picker to energy period selector (#14337)

src/components/date-range-picker.ts

@@ -31,6 +31,10 @@ const Component = Vue.extend({
       type: Boolean,
       default: true,
     },
+    openingDirection: {
+      type: String,
+      default: "right",
+    },
     disabled: {
       type: Boolean,
       default: false,
@@ -66,7 +70,7 @@ const Component = Vue.extend({
       props: {
         "time-picker": this.timePicker,
         "auto-apply": this.autoApply,
-        opens: "right",
+        opens: this.openingDirection,
         "show-dropdowns": false,
         "time-picker24-hour": this.twentyfourHours,
         disabled: this.disabled,
@@ -126,9 +130,9 @@ class DateRangePickerElement extends WrappedElement {
           ${dateRangePickerStyles}
           .calendars {
             display: flex;
+            flex-wrap: nowrap !important;
           }
           .daterangepicker {
-            left: 0px !important;
             top: auto;
             box-shadow: var(--ha-card-box-shadow, none);
             background-color: var(--card-background-color);
@@ -252,6 +256,10 @@ class DateRangePickerElement extends WrappedElement {
             direction: ltr;
             text-align: left;
           }
+          .vue-daterange-picker{
+            min-width: unset !important;
+            display: block !important;
+          }
         `;
     const shadowRoot = this.shadowRoot!;
     shadowRoot.appendChild(style);