Improve datepicker rendering
This commit is contained in:
Björn Fromme
+5
-2
@@ -12,6 +12,7 @@ export default class extends Controller {
|
|||||||
]
|
]
|
||||||
|
|
||||||
static values = {
|
static values = {
|
||||||
|
inline: Boolean,
|
||||||
minDate: String,
|
minDate: String,
|
||||||
dateFrom: String,
|
dateFrom: String,
|
||||||
dateTo: String,
|
dateTo: String,
|
||||||
@@ -20,12 +21,14 @@ export default class extends Controller {
|
|||||||
|
|
||||||
initialize() {
|
initialize() {
|
||||||
useDispatch(this)
|
useDispatch(this)
|
||||||
|
const inline = this.hasInlineValue ? this.inlineValue : true
|
||||||
this.picker = flatpickr(this.fieldTarget, {
|
this.picker = flatpickr(this.fieldTarget, {
|
||||||
mode: 'range',
|
mode: 'range',
|
||||||
locale: German,
|
locale: German,
|
||||||
inline: true,
|
inline,
|
||||||
minDate: this.minDateValue,
|
minDate: this.minDateValue,
|
||||||
|
altFormat: 'd.m.Y',
|
||||||
|
altInput: !inline,
|
||||||
onChange: selectedDates => {
|
onChange: selectedDates => {
|
||||||
if (selectedDates.length === 2) {
|
if (selectedDates.length === 2) {
|
||||||
this.dateFromValue = flatpickr.formatDate(selectedDates[0], 'Y-m-d')
|
this.dateFromValue = flatpickr.formatDate(selectedDates[0], 'Y-m-d')
|
||||||
|
|||||||
+1
-1
@@ -1,6 +1,6 @@
|
|||||||
@import "~flatpickr/dist/flatpickr.css";
|
@import "~flatpickr/dist/flatpickr.css";
|
||||||
|
|
||||||
.flatpickr-input {
|
[data-datepicker-inline-value="true"] .flatpickr-input {
|
||||||
@apply hidden;
|
@apply hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -27,40 +27,37 @@
|
|||||||
data="{'search-target': 'dateTo', 'mobile-search-target': 'dateTo'}"/>
|
data="{'search-target': 'dateTo', 'mobile-search-target': 'dateTo'}"/>
|
||||||
<div class="bg-brand-gradient p-4"
|
<div class="bg-brand-gradient p-4"
|
||||||
data-controller="datepicker"
|
data-controller="datepicker"
|
||||||
|
data-datepicker-inline-value="false"
|
||||||
data-datepicker-date-from-value="{filterSettings.dateFrom}"
|
data-datepicker-date-from-value="{filterSettings.dateFrom}"
|
||||||
data-datepicker-date-to-value="{filterSettings.dateTo}"
|
data-datepicker-date-to-value="{filterSettings.dateTo}"
|
||||||
data-datepicker-min-date-value="{f:format.date(date: 'now', format: 'Y-m-d')}">
|
data-datepicker-min-date-value="{f:format.date(date: 'now', format: 'Y-m-d')}">
|
||||||
<div class="relative">
|
<div class="mt-2">
|
||||||
<div class="text-white uppercase text-xl">
|
<div class="flex flex-col">
|
||||||
{ep:dateRange(dateFrom: filterSettings.dateFrom, dateTo: filterSettings.dateTo, includeLabel: 0)}
|
<div class="pb-2 md:pb-0">
|
||||||
</div>
|
<input type="text"
|
||||||
<div class="mt-2 rounded">
|
class="border-px border-white text-white text-xl p-2 w-full bg-transparent focus:border-white focus:ring-0"
|
||||||
<div class="flex flex-col">
|
data-datepicker-target="field">
|
||||||
<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>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -34,6 +34,7 @@
|
|||||||
|
|
||||||
<div class="flex-1"
|
<div class="flex-1"
|
||||||
data-controller="collapse datepicker"
|
data-controller="collapse datepicker"
|
||||||
|
data-datepicker-inline-value="true"
|
||||||
data-datepicker-date-from-value="{searchParams.dateFrom}"
|
data-datepicker-date-from-value="{searchParams.dateFrom}"
|
||||||
data-datepicker-date-to-value="{searchParams.dateTo}"
|
data-datepicker-date-to-value="{searchParams.dateTo}"
|
||||||
data-datepicker-min-date-value="{f:format.date(date: 'now', format: 'Y-m-d')}"
|
data-datepicker-min-date-value="{f:format.date(date: 'now', format: 'Y-m-d')}"
|
||||||
|
|||||||
Reference in New Issue
Block a user