more friendly to date input
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
#parent {
width:200px;
}
#parent2 {
position:absolute;visibility:hidden;left:180px;top:220px;width:200px;
}
.main {
width:200px;
border:1px solid black;
padding: 0px;
}
.month {
background-color:black;
font:bold 12px verdana;
color:white;
}
.daysofweek {
background-color:gray;
font:bold 12px verdana;
color:white;
}
.days {
font-size: 12px;
font-family:verdana;
color:black;
background-color: lightyellow;
padding: 2px;
}
.today{
font-weight: bold;
color: red;
}
.satsun {
background-Color:#FFCC66;
}
</style>
<script type="text/javascript" >
/***********************************************
* Basic Calendar-By Brian Gosselin at http://scriptasylum.com/bgaudiodr/
* Script featured on Dynamic Drive (http://www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
var Months=['January','February','March','April','May','June','July','August','September','October','November','December'];
function buildCal(days,type,pid,cM,brdr,cH,cDW,cD,today,satsun,more,close,ipid){
var mn=['January','February','March','April','May','June','July','August','September','October','November','December'];
var todaydate=new Date(),y=todaydate.getFullYear(),m=todaydate.getMonth()+1;
return build([brdr,cH,cDW,cD,today,satsun,days,type,y,m,ipid,pid,cM,close],more,pid);
}
function build(data,more,pcls){
var obj=document.getElementById(data[10]),y=data[8],m=data[9],today=new Date(),todaydate=new Date(),d=new Date(y,m-1,1).getDay(),md=new Date(y,m,1,-1,1,1).getDate(),ud=data[7]=='ddmmyy',i=!ud||d==0?0:7,os=ud?-6:0,t='',s=0,day,nd;
if (pcls){
t+='<div id="'+pcls+'">';
}
t+='<table class="'+data.join(' ')+'" cols="7" cellpadding="0" border="'+data[0]+'" cellspacing="0" ><tr align="center">';
if (more!=false){
t+='<td align="center" class="'+data[1]+'" onmouseup="UpDate(this,-1);" style="cursor:pointer;" ><</td>';
}
t+='<td colspan="'+(more!=false?'5':'7')+'" align="center" class="'+data[1]+'">'+Months[m-1]+' - '+y+'</td>';
if (more!=false){
t+='<td align="center" class="'+data[1]+'" onmouseup="UpDate(this,1);" style="cursor:pointer;" >></td>';
}
t+='</tr><tr align="center">';
for(;s<7;s++){
t+='<td class="'+data[2]+'">'+data[6].substr(s,1)+'</td>';
}
t+='</tr><tr align="center">';
while (i<20||(isFinite(day)&&day!=md)||i%7!=0){
day=i+os>=d&&i<md+d-os?i+1+os-d:' ';
nd=isFinite(day)?new Date(y,m-1,day,1,1,1).getDay():'?';
t+='<td '+(obj&&day!=' '?' onmouseup="Input(this);" style="cursor:pointer;" ':'')+'class="'+data[3]+(today&&today!='undefined'&&day==today.getDate()&&y==today.getFullYear()&&m-1==today.getMonth()?' '+data[4]:'')+(data[5]&&data[5]!='undefined'&&(nd==0||nd==6)?' '+data[5]:'')+'">'+day+'</td>';
if(i%7==6){
t+='</tr><tr align="center">';
}
i++;
}
t+='</tr>';
if (data[13]==true||data[13]=='true'){
t+='<tr><td align="center" class="'+data[1]+'" colspan="7" onmouseup="Close(\''+data[11]+'\');" style="cursor:pointer;">Close</td></tr>';
}
t+='</table>';
if (pcls){
t+='</div>';
}
return t;
}
function UpDate(t,bf){
while (t.nodeName.toUpperCase()!='TABLE'){
t=t.parentNode;
}
if (t.nodeName.toUpperCase()=='TABLE'){
var data=t.className.split(' '),y=data[8],m=data[9],todaydate=new Date(y,m-1+bf,1,1,1),y=todaydate.getFullYear(),m=todaydate.getMonth()+1;
t.parentNode.innerHTML=build([data[0],data[1],data[2],data[3],data[4],data[5],data[6],data[7],y,m,data[10],data[11],data[12],data[13]]);
}
}
function Input(t){
var day=t.innerHTML,data,ud,m,day;
while (t.nodeName.toUpperCase()!='TABLE'){
t=t.parentNode;
}
if (t.nodeName.toUpperCase()=='TABLE'){
data=t.className.split(' '),ud=data[7]=='ddmmyy',m=Months[data[9]-1].substring(0,3),day=day>9?day:'0'+day,obj=document.getElementById(data[10]);
obj[obj.nodeName.toUpperCase()!='INPUT'?'innerHTML':'value']=(ud?day:m)+'-'+(ud?m:day)+'-'+data[8];
}
}
function Close(id,ud){
var obj=document.getElementById(id);
if (obj){
obj.style.visibility=ud?'visible':'hidden';
}
}
function Calender(id){
var obj=document.getElementById(id);
if (obj){
Close(id,obj.style.visibility!='visible');
}
}
</script>
</head>
<body>
<span id="tst" />Date</span>
<script type="text/javascript">
document.write(buildCal('MTWTFSS','ddmmyy','parent','main',1,'month','daysofweek','days','today','satsun',false,false,'tst'));
</script>
<br /><br />
<input id="tst1" /><input type="button" name="" value="Date" onmouseup="Calender('parent2');" />
<script type="text/javascript">
document.write(buildCal('SMTWTFS','mmddyy','parent2','main',1,'month','daysofweek','days','today','satsun',true,true,'tst1'));
// parameter 0 = a string of first charactor of the days of the week. (string)
// parameter 1 = a string of 'ddmmyy' or 'mmddyy' to define the calendar format. (string)
// parameter 2 = the calendar parent DIV unique ID name. (string)
// parameter 3 = the class name of the calendar table. (string)
// parameter 4 = the class name of the calendar table border size. (numner)
// parameter 5 = the class name of the calendar month year row. (string)
// parameter 6 = the class name of the calendar day names row. (string)
// parameter 7 = the class name of the calendar days cells. (string)
// parameter 8 = (optional) the class name of the current date calendar day cell. (string. no hi-light of the current dste)
// parameter 9 = (optional) the class name of the weekend day cells. (string. no hi-light of the weekend days)
// parameter 10 = (optional) the class name of the weekend day cells. (string. no hi-light of the weekend days)
// parameter 11 = (optional) true = add month forward/back controls. (boolean. no forward/back controls)
// parameter 12 = (optional) true = add a calendar 'hide' control row. (boolean. no calendar 'hide' control row)
// parameter 13 = (optional) the unique ID name of an elemet to link the calendar to. (boolean. no link element)
// to allow depressing a day to input the date to the element.
</script>
</body>
</html>