Alternativer Datepicker für Powermail

Der Standard HTML 5 Datepicker, den Powermail für ein Datumsfeld verwendet, ist relativ unflexibel. Möchte man bestimmte Tage ausschließen, das Ausgabeformat selbst formatieren und die Auswahl mit dem aktuellen Datum beginnen lassen, braucht man eine Alternative.

Eine hübsches Skript ist easepick.
Möchte man dieses in Powermail einbinden, so sollte man als „Typ“ ein Standard Textfeld (Input) anstelle von Datum verwenden; damit ist man flexibel bei der Ausgabe des Formats.
Man benötigt also dieses Partial: powermail/Resources/Private/Partials/Form/Field/Input.html.
Als „Variablenname“ in der Flexform bietet sich „datepicker“ an.
Das Partial wird dann folgendermaßen erweitert:

{namespace vh=In2code\Powermail\ViewHelpers}

<div class="powermail_fieldwrap powermail_fieldwrap_type_input powermail_fieldwrap_{field.marker} {field.css} {settings.styles.framework.fieldAndLabelWrappingClasses}">
    <f:render partial="Form/FieldLabel" arguments="{_all}" />
    <div class="{settings.styles.framework.fieldWrappingClasses}">
        <f:form.textfield
            type="{vh:validation.fieldTypeFromValidation(field:field)}"
            property="{field.marker}"
            placeholder="{field.placeholder}"
            value="{vh:misc.prefillField(field:field, mail:mail)}"
            class="powermail_input {settings.styles.framework.fieldClasses} {vh:validation.errorClass(field:field, class:'powermail_field_error')}"
            additionalAttributes="{vh:validation.validationDataAttribute(field:field)}"
            id="powermail_field_{field.marker}" />
        <f:comment>
            bindet diesen Datepicker ein: https://easepick.com/
    	</f:comment>
        <f:if condition="{field.marker}=='datepicker'">
            <script src="typo3conf/ext/sitepackage/Resources/Public/JavaScript/easepick.min.js"></script>       	
            <script src="/fileadmin/templates/datepicker/datepicker.de.js"></script>
        </f:if>
    </div>
</div>

Das minified Skript von easepick (https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.umd.min.js)  wird in das eingene Sitepackage geholt. Die Konfigurationsdatei liegt in fileadmin, so dass sie redaktionell zugänglich ist und sieht so aus:

const datesNot = [
    '2023-12-24',
    '2023-12-25',
    '2023-12-26',
]
const picker = new easepick.create({
    element: document.getElementById('powermail_field_datepicker'),
    lang: 'de-DE',
    format:'DD.MM.YYYY',
    css: [
        'https://www.mysite.de/typo3conf/ext/sitepackage/Resources/Public/Css/easepick.min.css',
    ],
    plugins: ['LockPlugin'],
    LockPlugin: {
    	minDate: new Date(),
        filter(date, picked) {
            return datesNot.includes(date.format('YYYY-MM-DD'));
        },
    },
});

Das CSS  (https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css) wird ebenfalls im eigene Sitepackage vorgehalten. In „datesNot“ werden die auszuschließenden Tage definiert.

Hat man eine mehrsprachige Website, so kann man das Skript in fileadmin duplizieren und das Format in Zeile 8 und 9 so ändern:

lang: 'en-GB',
format:'DD/MM/YYYY',

Die Abfrage im Partial kann man über den „Titel“ des Feldes z.B. so vornehmen:

...
<f:if condition="{field.marker}=='datepicker'">
    <script src="typo3conf/ext/sitepackage/Resources/Public/JavaScript/easepick.min.js"></script>
    <f:if condition="{field.title}=='Date'">
        <f:then>
            <script src="/fileadmin/templates/datepicker/datepicker.en.js"></script>
        </f:then>
        <f:else>
            <script src="/fileadmin/templates/datepicker/datepicker.de.js"></script>
        </f:else>
    </f:if>
</f:if>
...

Wichtig ist, dass man nach jeder Änderung in der JS-Datei immer den Browsercache löschen muss, um die Änderung zu sehen.

Die easepick Website bietet sehr schöne Beispiele mit vollständigem HTML Code.