Native js-Calendar Plugin

<!doctype html>


<meta charset= "Utf-8" >
<title> Calendar Controls </title>
<style type= "Text/css" >
#calendar {width:142px; padding:5px; height:198px; background: #FCF;-webkit-user-select:none; position:absolute;}
#calendar Div.week span, #calendar span.date{width:14px; font-size:12px; height:20px; text-align:center; line-height : 20px; border:1px solid #ccc; margin:2px; Float:left;}
#calendar span.date{background: #fff; cursor:pointer;}
#calendar div.week{clear:both; overflow:hidden;}
#calendar div.week span{Font-weight:bold;}
#calendar h6{margin:0; padding:0; font-size:14px; line-height:20px; text-align:center; position:relative; overflow: Hidden height:20px;}
#prev, #next {width:45px; text-align:center; position:absolute; color:blue; cursor:pointer;}
#prev {left:0;}
#next {right:0;}
</style>

<body>
<input type= "text" value= "Please enter ..." id= "INPUT1" >
</body>

<script>
Input1.onfocus=function () {
Createcalendar (this);
}
Input1.onfocus=new Function ("This;calendar (This)");
function Createcalendar (ele) {
var obj=offset (ele);
var l=obj.left;
var t=obj.top;
var ocalendar=document.getelementbyid (' Calendar ');
if (Ocalendar) return;
Ocalendar=document.createelement (' div ');
ocalendar.style.top=t+ ' px ';
ocalendar.style.left=l+ele.offsetwidth+5+ ' px ';
ocalendar.id= "Calendar";
var otitle=document.createelement (' h6 ');
Ocalendar.appendchild (Otitle);
Otitle.classname= "title";
Create on prev button
var oprev=document.createelement (' span ');
Oprev.id= "Prev";
Oprev.innerhtml= "Prev";
Otitle.appendchild (Oprev);
Oprev.onclick=function () {Activecalendar (--month);}
Create Intermediate Titlecontent
var otitlecontent=document.createelement (' span ');
Otitlecontent.id= "Titlecontent";
Otitle.appendchild (otitlecontent);
var d=new Date;
var year=d.getfullyear ();
var month=d.getmonth ();
var m=month;
otitlecontent.innerhtml=year+ "Year" + (month+1) + "Month"
Create Next button
var onext=document.createelement (' span ');
Onext.id= "Next";
Onext.innerhtml= "Next";
Onext.onclick=function () {Activecalendar (++month);}
Otitle.appendchild (Onext);
Create a week's navigation bar
var aweek=["Day", "one", "two", "three", "four", "five", "six";
var oweek=document.createelement (' div ');
Oweek.classname= "Week";
Ocalendar.appendchild (Oweek);


for (Var i=0;i<7;i++) {
var ospan=document.createelement (' span ');
Ospan.innerhtml=aweek[i];
Oweek.appendchild (Ospan);
}
Container for creating dates
var odatecontent=document.createelement (' div ');
Odatecontent.id= "Datecontent";
Ocalendar.appendchild (odatecontent);
Document.body.appendChild (Ocalendar);
Activecalendar (month);
function Activecalendar (month) {
Odatecontent.innerhtml= "";
var d1=new Date (year,month,1);
var diff=1-d1.getday ();
Month=d1.getmonth ();
if (diff==1) diff=-6;
D1.setdate (diff);

Otitlecontent.innerhtml=d1.getfullyear () + "year" + (D1.getmonth () +2) + "Month"
for (Var i=0;i<42;i++) {
var ospan=document.createelement (' span ');
Ospan.classname= "Date";
var currentdate=d1.getdate ();
Ospan.innerhtml=currentdate;
Ospan.curdate=d1.getfullyear () + "-" + (D1.getmonth () +1) + "-" +currentdate;
if (D1.getmonth ()!=month) {
Ospan.style.backgroundcolor= "#ccc";
}
Ospan.onclick=function () {
Ele.value=this.curdate;
Document.body.removeChild (Ocalendar);
Ocalendar=null

}
D1.setdate (++currentdate);
Odatecontent.appendchild (Ospan);
}
}
}

function offset (ele) {
var l=ele.offsetleft;
var t=ele.offsettop;
var p=ele.offsetparent;
while (p) {
if (Window.navigator.userAgent.indexOf ("MSIE 8") >-1) {
L+=p.offsetleft;
T+=p.offsettop;
}else{
L+=p.offsetleft+p.clientleft;
T+=p.offsettop+p.clienttop;
}
P=p.offsetparent;
}
return {left:l,top:t}
}

</script>