diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/datepicker_controller.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/datepicker_controller.js
index a774c894..ce50416e 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/datepicker_controller.js
+++ b/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')
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_datepicker.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_datepicker.scss
index c398edb7..b81096b5 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_datepicker.scss
+++ b/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;
 }
 
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/FilterPanel.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/FilterPanel.html
index eb847d4f..99be4580 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/FilterPanel.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/FilterPanel.html
@@ -27,40 +27,37 @@
                            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="flex flex-col">
-                            <div class="pb-2 md:pb-0 md:pr-2">
-                                <input type="hidden"
-                                       data-datepicker-target="field">
-                            </div>
-                            <f:if condition="{settings.datePickerPresets}">
-                                <div class="flex flex-col divide-y divide-overlay-white mt-2">
-                                <f:for each="{settings.datePickerPresets}" as="preset">
-                                    <button type="button"
-                                            class="flex items-center justify-between w-full text-white py-2"
-                                            data-preset='{preset -> f:format.json() -> f:format.raw()}'
-                                            data-action="datepicker#selectPreset">
-                                        <span class="uppercase font-bold">{preset.label}</span>
-                                        <svg class="w-6 h-6 transform">
-                                            <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-right"></use>
-                                        </svg>
-                                    </button>
-                                </f:for>
-                                </div>
-                            </f:if>
-                            <button type="button"
-                                    class="text-white text-left text-sm mt-2"
-                                    data-action="datepicker#reset">
-                                zurücksetzen
-                            </button>
+                <div class="mt-2">
+                    <div class="flex flex-col">
+                        <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}">
+                            <div class="flex flex-col divide-y divide-overlay-white mt-2">
+                            <f:for each="{settings.datePickerPresets}" as="preset">
+                                <button type="button"
+                                        class="flex items-center justify-between w-full text-white py-2"
+                                        data-preset='{preset -> f:format.json() -> f:format.raw()}'
+                                        data-action="datepicker#selectPreset">
+                                    <span class="uppercase font-bold">{preset.label}</span>
+                                    <svg class="w-6 h-6 transform">
+                                        <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-right"></use>
+                                    </svg>
+                                </button>
+                            </f:for>
+                            </div>
+                        </f:if>
+                        <button type="button"
+                                class="text-white text-left text-sm mt-2"
+                                data-action="datepicker#reset">
+                            zurücksetzen
+                        </button>
                     </div>
                 </div>
             </div>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html
index df139fe2..ade6a613 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html
+++ b/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')}"