Drop-down-Menü mit Überprüfung des Datums

Mit einem JavaScript ist es zum Beispiel möglich, in einem Formular ein Datum auf falsche Eingaben hin prüfen zu lassen. Somit lassen sich nicht existierende Datumsangaben (z.B. 31. April) verhindern. Damit ist es aber auch möglich, auch ein Drop-down-Menü mit Überprüfung des Datums zu erstellen.

Das dazu benötigte JavaScript, und wie du es in Folge auch in deine Website einbinden kannst, erkläre ich hier.

 

1. Schritt: JavaScript einfügen

Das folgende JavaScript musst du dabei in den head-Bereich deiner Website einfügen.

 

Beispiel:

<script language="JavaScript">
 <!--
 
 function TageBestimmen()
 {
     var Tag = document.getElementById("Tag").value;
     var Monat = document.getElementById("Monat").value;
     var Jahr = document.getElementById("Jahr").value;
 
     var TageImFebruar = 28;
 
     if((Jahr%4 == 0 && Jahr%100 !=0) || Jahr%400 == 0)
     {
         var TageImFebruar = 29;
     }
 
     var Tage = new Array(31, TageImFebruar, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
 
     document.getElementById("Tag").options.length = Tage[Monat-1];
 
     for(i = 0; i < Tage[Monat-1]; i++)
     {
         document.getElementById("Tag").options[i].innerHTML = i+1;
         document.getElementById("Tag").options[i].value = i+1;
     }
 }
 
 //-->
 </script>

 

 

2. Schritt: Drop-down-Menü in der Website anlegen

Wie genau du das Drop-down-Menü im Folgenden auf deiner Website anlegst, bleibt natürlich dir überlassen. Wichtig ist jedoch, die Funktion onchange="TageBestimmen();“ in das Drop-down-Feld einzufügen.

 

Beispiel:

<select name="Tag" id="Tag" onchange="TageBestimmen();">
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option value="5">5</option>
 <option value="6">6</option>
 <option value="7">7</option>
 <option value="8">8</option>
 <option value="9">9</option>
 <option value="10">10</option>
 <option value="11">11</option>
 <option value="12">12</option>
 <option value="13">13</option>
 <option value="14">14</option>
 <option value="15">15</option>
 <option value="16">16</option>
 <option value="17">17</option>
 <option value="18">18</option>
 <option value="19">19</option>
 <option value="20">20</option>
 <option value="21">21</option>
 <option value="22">22</option>
 <option value="23">23</option>
 <option value="24">24</option>
 <option value="25">25</option>
 <option value="26">26</option>
 <option value="27">27</option>
 <option value="28">28</option>
 <option value="29">29</option>
 <option value="30">30</option>
 <option value="31">31</option>
 </select>
 
 <select name="Monat" id="Monat" onchange="TageBestimmen();">
 <option value="1">Januar</option>
 <option value="2">Februar</option>
 <option value="3">März</option>
 <option value="4">April</option>
 <option value="5">Mai</option>
 <option value="6">Juni</option>
 <option value="7">Juli</option>
 <option value="8">August</option>
 <option value="9">September</option>
 <option value="10">Oktober</option>
 <option value="11">November</option>
 <option value="12">Dezember</option>
 </select>
 
 <select name="Jahr" id="Jahr" onchange="TageBestimmen();">
 <option value="1950">1950</option>
 <option value="1951">1951</option>
 <option value="1952">1952</option>
 <option value="1953">1953</option>
 <option value="1954">1954</option>
 <option value="1955">1955</option>
 <option value="1956">1956</option>
 <option value="1957">1957</option>
 <option value="1958">1958</option>
 <option value="1959">1959</option>
 <option value="1960">1960</option>
 <option value="1961">1961</option>
 <option value="1962">1962</option>
 <option value="1963">1963</option>
 <option value="1964">1964</option>
 <option value="1965">1965</option>
 <option value="1966">1966</option>
 <option value="1967">1967</option>
 <option value="1968">1968</option>
 <option value="1969">1969</option>
 <option value="1970">1970</option>
 <option value="1971">1971</option>
 <option value="1972">1972</option>
 <option value="1973">1973</option>
 <option value="1974">1974</option>
 <option value="1975">1975</option>
 <option value="1976">1976</option>
 <option value="1977">1977</option>
 <option value="1978">1978</option>
 <option value="1979">1979</option>
 <option value="1980">1980</option>
 <option value="1981">1981</option>
 <option value="1982">1982</option>
 <option value="1983">1983</option>
 <option value="1984">1984</option>
 <option value="1985">1985</option>
 <option value="1986">1986</option>
 <option value="1987">1987</option>
 <option value="1988">1988</option>
 <option value="1989">1989</option>
 <option value="1990">1990</option>
 <option value="1991">1991</option>
 <option value="1992">1992</option>
 <option value="1993">1993</option>
 <option value="1994">1994</option>
 <option value="1995">1995</option>
 <option value="1996">1996</option>
 <option value="1997">1997</option>
 <option value="1998">1998</option>
 <option value="1999">1999</option>
 <option value="2000">2000</option>
 <option value="2001">2001</option>
 <option value="2002">2002</option>
 <option value="2003">2003</option>
 <option value="2004">2004</option>
 <option value="2005">2005</option>
 <option value="2006">2006</option>
 <option value="2007">2007</option>
 <option value="2008">2008</option>
 <option value="2009">2009</option>
 <option value="2010">2010</option>
 </select>

 

Damit ist das Drop-down-Menü mit Überprüfung des Datums im Grunde genommen fertig. Du kannst es somit in deine Website einbauen und es dort nutzen.

Der Vollständigkeit halber sei noch erwähnt, dass dieses Script nur dann funktioniert, wenn der User auch JavaScript im Browser aktiviert hat. Hat er es nicht aktiviert, oder wird es durch ein Plugin geblockt, funktioniert das Script hingegen nicht.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.