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

Mit einem JavaScript ist es möglich, in einem Formular ein Datum auf Falscheingaben überprüfen zu lassen. So lassen sich versehentlich eingegebene, nicht existierende Datums-Angaben (z.B. 31. April) verhindern.

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

 

1. Schritt: JavaScript einfügen

Das nachstehende JavaScript muss in den <head> ... </head>-Bereich der Website eingefügt werden.

 

Code-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 Webseite anlegen

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

 

Code-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>

 

Fertig ist das Drop-down-Menü mit Datums-Überprüfung.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

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