JavaScripts -> Kalender -> Date-Picker
Mit dem Date-Picker kann der Nutzer Ihrer Seite komfortabel ein Datum auswählen. Dieses wird dann in ein Formularfeld geschrieben.
Kompatibilität getestet:
Script-Code
<script type="text/javascript">
<!--
//Date-Picker v1.0 (c) 2003 Triple-M / http://www.htmlarsenal.de
var ccmn=new Array("Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember");
//Monatsnamen / month names
//Ab hier bitte nichts mehr verändern / Please do not change anything from here on
var cml=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var ccm,ccy,ccf,cce;
function ccml(month,year) {
if(month!=2)return cml[month-1];
else {
if((year%4)==0) {
if((year%100)==0) {
if((year%400)==0) {
return 29;
} else return 28;
} else return 29;
} else return 28;
}
}
function ccmonth(month,year) {
ccm=month;
ccy=year;
for(i=0;i<6;i++) for(j=0;j<7;j++) {
document.getElementById('cccell'+i+j).firstChild.nodeValue="";
document.getElementById('cccell'+i+j).style.fontWeight="normal";
}
document.getElementById('ccmonth').firstChild.nodeValue=ccmn[ccm-1]+" "+ccy;
var d=new Date(ccy,ccm-1,1);
var o=d.getDay();
if(o==0)o=7;
var l=ccml(ccm,ccy);
for(i=1;i<=l;i++) {
document.getElementById('cccell'+Math.floor((i+o-2)/7)+((i+o-2)%7)).firstChild.nodeValue=i;
}
}
function ccnext() {
ccm++;
if(ccm>12) {
ccy++;
ccm=1;
}
ccmonth(ccm,ccy);
}
function cclast() {
ccm--;
if(ccm<1) {
ccy--;
ccm=12;
}
ccmonth(ccm,ccy);
}
function cclz(num) {
return ((num>9)?(num):("0"+num));
}
function ccclick(row,column) {
el=eval("document."+ccf+"."+cce);
var d=new Date(ccy,ccm-1,1);
var o=d.getDay();
if(o==0)o=7;
el.value=cclz(row*7+column+2-o)+"."+cclz(ccm)+"."+ccy;
}
function calendar(form,element) {
document.write('<table class="calendar"><colgroup span="7" width="14%"><tr><th class="calendar" colspan="7" id="cchead"><a href="javascript:cclast()" class="calendar">[<<]</a> <span id="ccmonth">MONAT</span> <a href="javascript:ccnext()" class="calendar">[>>]</a></th></tr>');
document.write('<tr><th class="calendar">M</th><th class="calendar">D</th><th class="calendar">M</th><th class="calendar">D</th><th class="calendar">F</th><th class="calendar">S</th><th class="calendar">S</th></tr>');
for(i=0;i<6;i++) {
document.write("<tr>");
for(j=0;j<7;j++)document.write('<td class="calendar" id="cccell'+i+j+'" onClick="ccclick('+i+','+j+')">x</td>');
document.write("</tr>");
}
document.write("</table>");
var d=new Date();
ccmonth(d.getMonth()+1,d.getFullYear());
ccf=form;
cce=element;
}
//-->
</script>
<style type="text/css">
<!--
/* Diese Formatierungsangaben können angepasst werden / This style sheet may be adapted */
table.calendar {
width:100%;
border:2px solid #000000;
background-color:#ffffff;
empty-cells:hide;
table-layout:fixed;
border-spacing:2px;
font-family:Verdana;
}
th.calendar {
margin:2px;
background-color:#c0c0c0;
border:1px solid #000000;
color:#000000;
font-weight:bold;
text-align:center;
font-size:12px;
}
td.calendar {
margin:2px;
background-color:#ffffff;
color:#000000;
border:1px solid #000000;
font-weight:normal;
font-size:10px;
text-align:center;
cursor:pointer;
}
a.calendar {
color:#800000;
text-decoration:none;
}
-->
</style>
<!--
//Date-Picker v1.0 (c) 2003 Triple-M / http://www.htmlarsenal.de
var ccmn=new Array("Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember");
//Monatsnamen / month names
//Ab hier bitte nichts mehr verändern / Please do not change anything from here on
var cml=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var ccm,ccy,ccf,cce;
function ccml(month,year) {
if(month!=2)return cml[month-1];
else {
if((year%4)==0) {
if((year%100)==0) {
if((year%400)==0) {
return 29;
} else return 28;
} else return 29;
} else return 28;
}
}
function ccmonth(month,year) {
ccm=month;
ccy=year;
for(i=0;i<6;i++) for(j=0;j<7;j++) {
document.getElementById('cccell'+i+j).firstChild.nodeValue="";
document.getElementById('cccell'+i+j).style.fontWeight="normal";
}
document.getElementById('ccmonth').firstChild.nodeValue=ccmn[ccm-1]+" "+ccy;
var d=new Date(ccy,ccm-1,1);
var o=d.getDay();
if(o==0)o=7;
var l=ccml(ccm,ccy);
for(i=1;i<=l;i++) {
document.getElementById('cccell'+Math.floor((i+o-2)/7)+((i+o-2)%7)).firstChild.nodeValue=i;
}
}
function ccnext() {
ccm++;
if(ccm>12) {
ccy++;
ccm=1;
}
ccmonth(ccm,ccy);
}
function cclast() {
ccm--;
if(ccm<1) {
ccy--;
ccm=12;
}
ccmonth(ccm,ccy);
}
function cclz(num) {
return ((num>9)?(num):("0"+num));
}
function ccclick(row,column) {
el=eval("document."+ccf+"."+cce);
var d=new Date(ccy,ccm-1,1);
var o=d.getDay();
if(o==0)o=7;
el.value=cclz(row*7+column+2-o)+"."+cclz(ccm)+"."+ccy;
}
function calendar(form,element) {
document.write('<table class="calendar"><colgroup span="7" width="14%"><tr><th class="calendar" colspan="7" id="cchead"><a href="javascript:cclast()" class="calendar">[<<]</a> <span id="ccmonth">MONAT</span> <a href="javascript:ccnext()" class="calendar">[>>]</a></th></tr>');
document.write('<tr><th class="calendar">M</th><th class="calendar">D</th><th class="calendar">M</th><th class="calendar">D</th><th class="calendar">F</th><th class="calendar">S</th><th class="calendar">S</th></tr>');
for(i=0;i<6;i++) {
document.write("<tr>");
for(j=0;j<7;j++)document.write('<td class="calendar" id="cccell'+i+j+'" onClick="ccclick('+i+','+j+')">x</td>');
document.write("</tr>");
}
document.write("</table>");
var d=new Date();
ccmonth(d.getMonth()+1,d.getFullYear());
ccf=form;
cce=element;
}
//-->
</script>
<style type="text/css">
<!--
/* Diese Formatierungsangaben können angepasst werden / This style sheet may be adapted */
table.calendar {
width:100%;
border:2px solid #000000;
background-color:#ffffff;
empty-cells:hide;
table-layout:fixed;
border-spacing:2px;
font-family:Verdana;
}
th.calendar {
margin:2px;
background-color:#c0c0c0;
border:1px solid #000000;
color:#000000;
font-weight:bold;
text-align:center;
font-size:12px;
}
td.calendar {
margin:2px;
background-color:#ffffff;
color:#000000;
border:1px solid #000000;
font-weight:normal;
font-size:10px;
text-align:center;
cursor:pointer;
}
a.calendar {
color:#800000;
text-decoration:none;
}
-->
</style>