Improve datepicker rendering

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/datepicker_controller.js

@@ -12,6 +12,7 @@ export default class extends Controller {
     ]
 
     static values = {
+        inline: Boolean,
         minDate: String,
         dateFrom: String,
         dateTo: String,
@@ -20,12 +21,14 @@ export default class extends Controller {
 
     initialize() {
         useDispatch(this)
-
+        const inline = this.hasInlineValue ? this.inlineValue : true
         this.picker = flatpickr(this.fieldTarget, {
             mode: 'range',
             locale: German,
-            inline: true,
+            inline,
             minDate: this.minDateValue,
+            altFormat: 'd.m.Y',
+            altInput: !inline,
             onChange: selectedDates => {
                 if (selectedDates.length === 2) {
                     this.dateFromValue = flatpickr.formatDate(selectedDates[0], 'Y-m-d')

public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_datepicker.scss

@@ -1,6 +1,6 @@
 @import "~flatpickr/dist/flatpickr.css";
 
-.flatpickr-input {
+[data-datepicker-inline-value="true"] .flatpickr-input {
     @apply hidden;
 }
 

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/FilterPanel.html

@@ -27,17 +27,15 @@
                            data="{'search-target': 'dateTo', 'mobile-search-target': 'dateTo'}"/>
             <div class="bg-brand-gradient p-4"
                  data-controller="datepicker"
+                 data-datepicker-inline-value="false"
                  data-datepicker-date-from-value="{filterSettings.dateFrom}"
                  data-datepicker-date-to-value="{filterSettings.dateTo}"
                  data-datepicker-min-date-value="{f:format.date(date: 'now', format: 'Y-m-d')}">
-                <div class="relative">
-                    <div class="text-white uppercase text-xl">
-                        {ep:dateRange(dateFrom: filterSettings.dateFrom, dateTo: filterSettings.dateTo, includeLabel: 0)}
-                    </div>
-                    <div class="mt-2  rounded">
+                <div class="mt-2">
                     <div class="flex flex-col">
-                            <div class="pb-2 md:pb-0 md:pr-2">
-                                <input type="hidden"
+                        <div class="pb-2 md:pb-0">
+                            <input type="text"
+                                   class="border-px border-white text-white text-xl p-2 w-full bg-transparent focus:border-white focus:ring-0"
                                    data-datepicker-target="field">
                         </div>
                         <f:if condition="{settings.datePickerPresets}">
@@ -65,7 +63,6 @@
             </div>
         </div>
     </div>
-    </div>
 
     <div class="mb-4"
          data-controller="collapse"

public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html

@@ -34,6 +34,7 @@
 
                                 <div class="flex-1"
                                      data-controller="collapse datepicker"
+                                     data-datepicker-inline-value="true"
                                      data-datepicker-date-from-value="{searchParams.dateFrom}"
                                      data-datepicker-date-to-value="{searchParams.dateTo}"
                                      data-datepicker-min-date-value="{f:format.date(date: 'now', format: 'Y-m-d')}"