Login

Lisa_33 · 14.03.2024, 08:26

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

***rzscout*** · 14.03.2024, 15:40

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

Lisa_33 · 14.03.2024, 17:18

Hallo rzscout,

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

LG
Lisa

***rzscout*** · 15.03.2024, 16:40

Kein Problem - wenn du weitere Fragen hast, dann einfach ins Forum stellen ;-)

Login
Benutzername:
Passwort:	Passwort vergessen?
	Merken