2 Datumsfelder mit Werten vorbelegen

[m-werk]

Hallo Leute,

ich suche jetzt noch folgende Möglichkeit:
Ich habe 2 Datumsfelder: Datum1 und Datum2.

Ich möchte gerne, dass das Feld Datum1 mit dem aktuellen Tag vorbelegt ist, aktuell steht nur TT.MM.YYYY im Feld, erst wenn ich auf den Datepicker klicke, ist das aktuelle Datum vorhanden.
Im 2 Datumsfeld möchte ich jendes Datumstehen haben, 3 Tage nach Datumsfeld 1.
Also wenn im 1. Datumsfeld 14.06.2024 steht, soll im 2 Datumsfeld 17.06.2024 stehen, also immer +3 vom 1. Datumsfeld.

Geht sowas?

[Spooky]

Das kannst du mit dem loadFormField Hook umsetzen.

[m-werk]

Hallo, perfekt gegangen. Danke.

Eine Frage hätte ich aber doch noch: Es wird mir beim Start der Seite das Datum richtig angezeigt. ABER wie bekomme ich noch folgendes hin: Wenn ich im Datumsfeld 1 ein anderes Datum z.B. 12.07.2024 auswähle das im Datumsfeld 2 automatisch gleich der 15.07.2024 erscheint.

Aktuell hab ich folgenden Code:

class LoadFormFieldListener
{
    public function __invoke(Widget $widget, string $formId, array $formData, Form $form): Widget
    {
        
        $timestamp = time();
        
        if ($widget->name == "arrivalDate") {
            $widget->value = date("d.m.Y", $timestamp);
        }
        
        if ($widget->name == "departureDate") {
            $widget->value = date("d.m.Y", strtotime("+3 days"));
        }
        return $widget;
    }
} 

Und auch mein JavaScript greift hier nicht:

<script>
    function updateDepartureDate() {
        const arrivalDateInput = document.getElementById('ctrl_12');
        const departureDateInput = document.getElementById('ctrl_13');
        
        // Wenn ein Datum im Ankunftsdatum ausgewählt wurde
        if (arrivalDateInput.value) {
            // Berechne das Datum, das drei Tage nach dem Ankunftsdatum liegt
            const arrivalTimestamp = Date.parse(arrivalDateInput.value);
            const threeDaysLaterTimestamp = arrivalTimestamp + (3 * 24 * 60 * 60 * 1000); // Drei Tage in Millisekunden
            
            // Setze das Abreisedatum auf das berechnete Datum
            departureDateInput.value = new Date(threeDaysLaterTimestamp).toISOString().substr(0, 10);
        }
    }
</script>

[Spooky]

Das musst du mit JavasScript machen. Den einzelnen Feldern gibst du dafür aber am besten eindeutige CSS IDs oder Klassen.

[m-werk]

das heißt, ich kann den Hook vergessen und mach alles über Javascript?

[Spooky]

Nein, du willst ja, dass das Feld mit einem bestimmten Datum vorbelegt ist, oder nicht? Zumindest war das deine ursprüngliche Anforderung.

[m-werk]

Ok, das mit Javascript hab ich doch versucht (siehe Code weiter oben). Dieser greift aber nicht!

[Spooky]

Dann musst du das debuggen

[m-werk]

hab ich gemacht, da kommt aber keine Meldung. (Hab den Debugmodus im BE aktiviert).

Jetzt hab ich den Code angepasst auf den Feldname. Funktioniert auch nicht!

<script>
    function updateDepartureDate() {
        
        const arrivalDateInput = document.getElementsByName("arrivalDate");
        const departureDateInput = document.getElementsByName("departureDate");
        
        if (arrivalDateInput.value) {
            const arrivalTimestamp = Date.parse(arrivalDateInput.value);
            const threeDaysLaterTimestamp = arrivalTimestamp + (4 * 24 * 60 * 60 * 1000);
            
            departureDateInput.value = new Date(threeDaysLaterTimestamp).toISOString().substr(0, 10);
        }
    }
</script>

[Spooky]

hab ich gemacht, da kommt aber keine Meldung. (Hab den Debugmodus im BE aktiviert).

JavaScript Fehler siehst du in der Browser Konsole, der Debug-Modus hilft dir da nicht. "debuggen" heißt außerdem mehr als nur Fehler anzeigen - es kann ja sein, dass dein Code keinen Fehler verursacht, aber dennoch nicht funktioniert.

Funktioniert auch nicht!

Du musst so lange daran arbeiten, bis es funktioniert.

[zonky]

Du kannst ein paar Konsolenausgaben einstreuen, ob überhaupt was passiert bzw. was Du wo an Werten erhältst - z. B.

<script>
    function updateDepartureDate() {
console.log('bin geladen...');

        const arrivalDateInput = document.getElementsByName("arrivalDate");
        const departureDateInput = document.getElementsByName("departureDate");
        
console.log(arrivalDateInput.value);

        if (arrivalDateInput.value) {
            const arrivalTimestamp = Date.parse(arrivalDateInput.value);
            const threeDaysLaterTimestamp = arrivalTimestamp + (4 * 24 * 60 * 60 * 1000);
            
            departureDateInput.value = new Date(threeDaysLaterTimestamp).toISOString().substr(0, 10);
        }
    }
</script>

[m-werk]

So, nun hab ich einiges probiert. Aber irgendwie hackt es.

Ich bekomme in der Konsole folgende Fehlermeldung, die vom Scropt kommt: Ungültiges Datum
Und das verseh ich nicht. Im HTML wird das Datum so dargestellt bei Value: 2024-10-04 (bei beiden Feldern) Ich weiß wirklich nicht mehr weiter!

<script>
jQuery(function($) {
  $(document).ready(function() {
    $('.arrivalDate').change(function() {
      const originalDate = new Date($('.arrivalDate').val());
      if (!isNaN(originalDate.getTime())) {
        const newDate = new Date(originalDate);
        newDate.setDate(originalDate.getDate() + 3);
        $('.departureDate').val(newDate.toISOString().split('T')[0]);
      } else {
        console.error('Ungültiges Datum');
      }
    });
  });
});
</script>

[m-werk]

Yes, ich hab's gelöst. Danke console.log

Die Felder hab ich mit

'.arrivalDateInput'

auslesen wollen, das hat nicht funktoniert obwohl ich dem Inputfeld diese Klasse gegeben habe. Aber ich vermute, da im html mehrere Klassen für dieses Feld waren, hat das nicht funktoniert (meine Vermutung)

Jetzt bin ich eben auf den Namen des Inputfeldes mit

'input[name="arrivalDate"]'

gegangen, und jetzt funktioniert alles.

Danke für die Hilfe und Infos.

[zonky]

https://github.com/hofff/contao-cale...d/tree/contao5 wäre ggf. auch eine Variante gewesen

[m-werk]

https://github.com/hofff/contao-cale...d/tree/contao5 wäre ggf. auch eine Variante gewesen

Ich wollte mir heute diese Version ansehen, aber im Contao-Manager kann ich zwar die gleiche Version sehen, aber leider nur für Contao Core ~4.9

Und wenn ich auf diesem Link mir die composer.json ansehe, steht dort schon "contao/core-bundle": "^5.1"

Anscheinend ist diese Version noch nicht unter die Extension von Contao gewandert!

[Spooky]

Du müsstest dev-contao5 requiren.

Aber kann diese Extension überhaupt diese Anforderung? (Defaults von Formularfelder onchange mit bestimmter Logik ändern.)

[zonky]

Aber kann diese Extension überhaupt diese Anforderung? (Defaults von Formularfelder onchange mit bestimmter Logik ändern.)

sollte https://flatpickr.js.org/events/#hooks

[Spooky]

Das müsstest du ja ohnehin wieder selbst implementieren.

[m-werk]

Ich möchte mir diese Extension nur mal ansehen. Mit dev-contao5 hat's funktioniert. Danke.

Ich hab sowieso mein jQuery erweitern müssen, denn es kam nochwas dazu.