Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Formular mit Datum und Uhrzeit
#1
Hallo an Alle,

ich brauche mal wieder eure Hilfe...

In einem Formular wähle ich über "input type=date" ein Datum aus.
Jetzt soll ein Dropdown erscheinen, in dem alle Uhrzeiten angezeigt werden, die für einen bestimmten
Wochentag in der Datenbank hinterlegt sind.

Habe jetzt schon alles mögliche versucht mit "datepicker" und "chained select", komme aber nicht weiter.

Vielleicht bin ich hier im Javascript-Forum falsch, aber der Versuch ist es wert.
Wäre euch echt dankbar für jeden Tipp.

LG
Lisa
Zitieren
#2
Hi Lisa:4_33,
geht klar - hier ist mein Vorschlag:

Code:
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamische Auswahl Uhrzeit</title>
    <script>
        let datum;
        document.addEventListener("DOMContentLoaded", init);
        function init() {
            datum = document.querySelector("#datum");
            datum.addEventListener("change", checkDatum);
        }
        function checkDatum() {
            let myDateObj = new Date(datum.value);
            let myDay = myDateObj.getDay();
            switch(myDay) {
                case 1:
                createInput(['10 Uhr', '11 Uhr', '12 Uhr']);
                break;
                case 2:
                createInput(['10 Uhr', '11 Uhr', '12 Uhr']);
                break;
                case 3:
                createInput(['10 Uhr', '11 Uhr', '12 Uhr']);
                break;
                case 4:
                createInput(['10 Uhr', '11 Uhr', '12 Uhr']);
                break;
                case 5:
                createInput(['10 Uhr', '11 Uhr']);
                break;
                case 6:
                createInput(['10 Uhr']);
                break;
                case 0:
                default:
                    createInput(["Keine Termin möglich"]);
            }
        }
        function createInput($myArray) {
            if(document.querySelector('#uhrzeit')) {
                while(document.querySelector('#uhrzeit').firstChild) {
                    document.querySelector('#uhrzeit').firstChild.remove();
                }
                $myArray.forEach(item => {
                    let newElem = document.createElement('option');
                    newElem.textContent = item;
                    document.querySelector('#uhrzeit').appendChild(newElem);
                });
            } else {
                newSelect = document.createElement('select');
                newSelect.size = "1";
                newSelect.setAttribute('id', 'uhrzeit');
                document.body.appendChild(newSelect);
                $myArray.forEach(item => {
                    let newElem = document.createElement('option');
                    newElem.textContent = item;
                    document.querySelector('#uhrzeit').appendChild(newElem);
                });
            }
        }
    </script>
</head>
<body>
    <input type="date" name="datum" id="datum">   
</body>
</html>

Das Select-Element wird erstellt wenn keines vorhanden ist und wenn ein Datum geändert wird, werden die Uhrzeiten die man auswählen kann geändert. Dabei werden erst alles option-Elemente entfernt und dann durch neue option-Elemente ersetzt.

Viele Grüße rzscout
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" Angel
Zitieren
#3
Hallo rzscout,

das ist ja suuuper!
Vielen lieben Dank. Ich denke dass ich damit weiter komme.

LG
Lisa
Zitieren
#4
Kein Problem - wenn du weitere Fragen hast, dann einfach ins Forum stellen ;-)
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" Angel
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen:
1 Gast/Gäste