Ö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.
vielen dank
hat sehr sehr groß geholfen