EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve datepicker rendering

Browse Source
This commit is contained in:
Björn Fromme
2022-01-11 10:08:53 +01:00
parent 46fa095725
commit 5d442a2f98
4 changed files with 34 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/datepicker_controller.js
+5 -2
View File
@@ -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 -1
View File
@@ -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 -30
View File
@@ -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>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html
+1
View File
@@ -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')}"