JavaScript
DropDown-Feld mit Überprüfung des Datums
- Details
- Veröffentlicht am Dienstag, 03. Februar 2009 12:15
- Geschrieben von Jan Pionzewski
In vielen Registrierungs-Formularen finden man auch die Option, sein Geburtsdatum mit angeben zu können. Damit Ihre Besucher dort nicht versehentlich (oder wissentlich) falsche Angaben machen können - in Form eines ungültigen Datums zum Beispiel - kann man ein kleines JavaScript verwenden, welches automatisch überprüft, ob das angegebene Datum existiert oder nicht. So werden Falschangaben wie z.B. der 31. April vermieden. Aber auch mit Schaltjahren kommt dieses Script zurecht, denn den 29. Februar gibt es ja bekanntlich nur alle vier Jahre.
Lesen Sie in diesem Artikel, wie Sie ein entsprechendes DropDown-Feld erstellen.
1. Schritt: JavaScript einfügen
Im <head>...</head>-Bereich Ihrer Webseite müssen Sie folgendes JavaScript 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: DropDown-Feld in der Webseite anlegen
Wie genau Sie das DropDown-Feld auf Ihrer Webseite anlegen, bleibt natürlich Ihnen überlassen. Wichtig ist, die Funktion onchange="TageBestimmen(); in das DropDown-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>
Fertig ist das DropDown-Feld mit Datums-Überprüfung.
