Javascript Calander

Below is the javascript copy it and run it..
/* JAVASCRIPT CALANDER
Version 1.0 Date: 24 Feb 2011
By: Anish Rana (Software Developer, Keyprompt Technologies Pvt. Ltd.)
This script create a calendar and allow user to select date from it. It is almost browser compatible. (IE, Firefox, Chrome)
How to use..
1. Add a textbox in your page and add onclick function to it.
2. Now call the function on this onclick method like
onclick="genrateCalendar(this)"
and Done...
mail : anishrana19@gmail.com
*/
function genrateCalendar(ctrl)
{
var ctrlid = document.getElementById("hideid");
if(ctrlid.value == "")
{
ctrlid.value = ctrl.id;
}
var divId = document.getElementById("dateDiv");
if(divId != null)
{
destroyCalander();
}
if(divId == null)
{
var dt = new Date();
var day = dt.getDate();
var month = dt.getMonth()+1;
var year = dt.getFullYear();
var yrmnth = month +":"+ year;
var nwDt = new Date();
nwDt.setDate(1);
nwDt.setMonth(month);
nwDt.setFullYear(year);
var firstWeekDay = nwDt.getDay();
var daysInMonth = getDaysInMonth(year, month);
var count = 0;
var tableString = "<table>";
tableString += "<tr><td style='width:30px; height:30px;'>" + month + "</td><td style='width:30px; height:30px;'>" + year + "</td>";
tableString += "<td style='width:20px; height:30px;'></td><td style='width:20px; height:30px;'></td><td style='width:20px;";
tableString += "height:30px;'></td>";
tableString += "<td style='width:30px; height:30px;'></td><td style='width:30px; height:30px;'></td>";
tableString += "<td style='width:35px; height:30px; cursor:pointer; font-size:20px; color:red; font-weight:bold; text-align:center;' ";
tableString += "onclick='destroyCalander();'>X</td>";
tableString += "</tr></table><table>";
tableString += "<tr><th>S</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th></tr>";
tableString += "<tr>";
for(var b=0; b<firstWeekDay; b++)
{
tableString += "<td></td>";
count++;
}
for(var i=1; i<(daysInMonth+1); i++)
{
if(count == 7)
{
tableString += "</tr><tr>";
count = 0;
}
if(i == day)
{
tableString += "<td yrmnth="+yrmnth+" style='color:Green; font-weight:bold; border:solid 1px Blue; text-align:center; cursor:pointer;";
tableString += "width:30px; height:30px;' onclick='return pickDate(this);' onmouseover='return setBackg(this);' onmouseout='return ";
tableString += "resetBackg(this);'>" + i + "</td>";
}
else
{
tableString += "<td yrmnth="+yrmnth+" style='border:solid 1px Blue; text-align:center; cursor:pointer; width:30px; height:30px;' ";
tableString += "onclick='return pickDate(this);' onmouseover='return setBackg(this);' onmouseout='return resetBackg(this);'>";
tableString += i + "</td>";
}
count++;
}
tableString += "</table>";
var datetable = document.createElement("div");
datetable.setAttribute("id", "dateDiv");
datetable.style.border = 'solid 1px Red';
datetable.style.left = '200px';
datetable.style.top = '100px';
datetable.style.position = 'absolute';
datetable.innerHTML = tableString;
document.body.appendChild(datetable);
}
}
function getDaysInMonth(yr, mnth)
{
return new Date(yr, mnth, 0).getDate();
}
function pickDate(ctrl)
{
var userDate = ctrl.innerHTML;
var yrmnth = ctrl.getAttribute('yrmnth').split(":");
var ctrlid = document.getElementById("hideid").value;
document.getElementById(ctrlid).value = userDate +"/" + yrmnth[0] +"/"+ yrmnth[1];
document.getElementById("hideid").value = "";
destroyCalander();
}
function setBackg(ctrl)
{
ctrl.style.background = 'Silver';
}
function resetBackg(ctrl)
{
ctrl.style.background = 'White';
}
function destroyCalander()
{
var divId = document.getElementById("dateDiv");
if(divId != null)
{
if(navigator.appName == "Microsoft Internet Explorer")
{
divId.removeNode(true);
}
else
{
divId.parentNode.removeChild(divId);
}
}
document.getElementById("hideid").value = "";
}
window.onload = function()
{
var hide = document.createElement("input");
hide.setAttribute("id", "hideid");
hide.setAttribute("type", "hidden");
hide.setAttribute("value", "");
document.body.appendChild(hide);
}
Save it as external javascript file or paste it in the head section of the page.
Now add textbox to the page like below..
<asp:TextBox ID="txtDate" runat="server" onclick="genrateCalendar(this);"></asp:TextBox><br />
<asp:TextBox ID="TextBox1" runat="server" onclick="genrateCalendar(this);"></asp:TextBox><br />
<asp:TextBox ID="TextBox2" runat="server" onclick="genrateCalendar(this);"></asp:TextBox><br />
<asp:TextBox ID="TextBox3" runat="server" onclick="genrateCalendar(this);"></asp:TextBox><br />
If using in simple HTML page then
<input type="text" id="txtDate1" onclick="genrateCalendar(this);" />
Now run the page, just click on the textbox and you will see the popup calander...
Enjoy..
Download complete code from here:-
http://cid-fd367ee904a1f99a.office.live.com/self.aspx/Javascript/CalendarUpdated.rar

Note: If downloaded code give error of web.config file then replace the web.config file. In this application 4.0 framework is used..