Öffnungszeiten für HTML-Formulare, z.B. Bestellformulare

Öffnungszeiten für Bestellformulare, z.B. von Restaurants.

Umsetzung in HTML

Legen wir los, den Code im Beispiel fügen wir in den Head-Bereich unserer Formular-Datei ein. Das Beispiel kann man hier ausprobiert und getestet werden.

Einbinden Bibliotheken

Wir benötigen zwei Bibliotheken, jQuery und für unsere Fehlermeldung verwenden wir „SweetAlerts„.

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

Java-Script-Code

Mit dem folgenden Java-Script-Code überprüfen wir die Öffnungszeiten. Wir erstellen zuerst die Objekte für Start- und Enddatum und ermitteln die aktuelle Zeit. Anschließend überprüfen wir, ob die aktuelle Zeit innerhalb der Öffnungszeiten liegt. Falls nicht zeigen wir mit Sweet-Alert eine Fehlermeldung an und deaktivieren alle Formularelemente.

 <script>
$(function() {
    //Startdatum, z.B. 8:30 Uhr
    let dateStart = new Date();
    dateStart.setHours(8);
    dateStart.setMinutes(30);
    console.log(dateStart);

    //Enddatum, z.B. 18:45
    let dateEnd = new Date();
    dateEnd.setHours(18);
    dateEnd.setMinutes(45);
    console.log(dateEnd);

    let dateNow = new Date();
    console.log(dateNow);

    if (!(dateNow > dateStart && dateNow < dateEnd)) {
        //Ausgabe Fehlermeldung
        Swal.fire({
            title: 'Geschlossen!',
            text: 'Wir haben geschlossen, derzeit keine Bestllungen möglich. Wir öffnen von 8:30 bis 18:45.',
            icon: 'error',
            confirmButtonText: 'Nicht schön',
            position: 'top'
        });

        let form = document.getElementsByName("DAFORM");

       //Formularelemente deaktivieren
        let elements = form[0].elements;
        for (let i = 0, len = elements.length; i < len; ++i) {
            console.log(elements[i]);
            elements[i].disabled = true;
        }
    }
});
  </script>

Der Anwender bekommt so eine Fehlermeldung angezeigt und das Formular wird deaktiviert. Der Benutzer kann den Inhalt weiterhin anschauen. Für den Produktivbetrieb sollten die Log-Anweisungen noch entfernt werden.

Umsetzung in DA-BestellFormular

Auch in unserer Software zur Erstellung von Bestellformularen kann diese Funktion einfach umgesetzt werden. Hierzu fügen wir den Code in die Kopfzeile ein:

Übernommen werden muss nur der Code für den Sweet-Alert-Teil, jQuery ist bereits eingebunden.

Download der DA-BestellFormular Beispieldatei