Tag, Monat, Jahr Select erstellen mit JavaScript

Du benötigst ein Select bei dem ein individuelles Datum nach Tag, Monat und Jahr ausgewählt werden kann? Verzichte dabei auf Libraries oder Plug-ins die deine Website verlangsamen. Nimm JavaScript.

Image by Basti93 (https://pixabay.com/photos/time-calendar-saturday-weekend-day-273857/)

In diesem Beitrag geht es darum, wie du ein bzw. mehrere Selects erstellen kannst, in denen der User ein Datum nach Tag, Monat und Jahr auswählen kann, wie es in vielen Webformularen vorkommt.

Es wird wie immer, zuallererst das HTML benötigt. Die HTML-Elemente bestehen in diesem Fall aus drei verschiedenen Selects:

<label>Tag</label>
<select id="day" name="day" value=""></select>

<label>Monat</label>
<select id="month" name="month" value=""></select>

<label>Jahr</label>
<select id="year" name="year" value=""></select>

Kommen wir im nächsten Schritt zum JavaScript: Letztendlich benötigen wir für alle drei Selects auch drei verschiedene Funktionen um die Selects befüllen zu können.

Die drei Funktionen sind nach demselben Prinzip aufgebaut. Die Variablen optionsDay, optionsMonth und optionsYear sind zunächst leer. Allerdings nur so lange bis sie durch die darauf folgende for-Schleife befüllt werden. In der Bedingung für die for-Schleife werden der Start- (var day = 1) und der Endwert (day <= 31) angegeben. Durch den Inkrement-Operator (day++) wird der Operand day um den Wert 1 erhöht bis er bei dem vorgegebenen Endwert 31 angekommen ist.

Innerhalb der for-Schleife wird nun die zuvor leere Variable optionsDay befüllt. Hierbei wird für jeden Wert zwischen dem Start- und dem Endwert ein option-Feld erzeugt. In diesem Fall also jeweils ein option-Feld für die Zahlen von 1 – 31.

In der letzten Zeile der jeweiligen Funktion werden nun die Variablen optionsDay, optionsMonth oder optionsYear ihrem „Bestimmungsort“ zugeordnet. In diesem Fall soll die Variable optionsDay innerhalb des HTML-Elements mit der id day dargestellt werden.

var optionsDay = "";

for (var day = 1 ; day <= 31; day++) {
  optionsDay += "<option>"+ day +"</option>";
}
document.getElementById("day").innerHTML = optionsDay;

Das Befüllen des Selects Monat geschieht nach genau demselben Prinzip, wie beim Select für die Tage. Der einzige logische Unterschied: Der Start- und Endwert entsprechen der Anzahl der Monate.

var optionsMonth = "";

for (var month = 1 ; month <= 12; month++) {
  optionsMonth += "<option>"+ month +"</option>";
}
document.getElementById("month").innerHTML = optionsMonth;

Beim Select Jahr verhält sich die Funktion auch nicht viel anders als wie die beim Tag oder Monat Select. Der kleine aber feine Unterschied ist der Endwert, welcher dynamisch durch das aktuelle Jahr erzeugt wird. Das aktuelle Jahr erhalten wir durch die new Date().getFullYear() Methode.

var optionsYear = "";

for (var year = 1900 ; year <= new Date().getFullYear(); year++) {
  optionsYear += "<option>"+ year +"</option>";
}
document.getElementById("year").innerHTML = optionsYear;

Ergebnis:

Zusatz

Die jeweiligen Werte für den Start- und Endwert können natürlich auch als Variable gespeichert werden. Um Codezeilen zu sparen, habe ich für dieses Beispiel darauf verzichtet. Im nächsten Schritt könnte man das Script noch insofern erweitern, dass bei dem jeweils ausgewählten Monat, auch nur die entstprechende Anzahl an Tagen die der Monat hat, angezeigt wird. Also beim Monat Februar werden nur 28 Tage zur Auswahl gestellt. Fortsetzung folgt…

Kommentar verfassen

Ich habe die Datenschutzerklärung zur Kenntnis genommen. Die abgesendeten Daten werden nur zum Zweck der Bearbeitung Deines Anliegens verarbeitet. Weitere Informationen findest Du in unserer Datenschutzerklärung.