my code when user selects manual option calendar will be displayed my problem is when user selects date it should be highlite in calendar. this is my code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>htmlDatePicker Test Page (CFML)</title>
<script language="Javascript" type="text/javascript">

/***************************************************************************************/
var HighlightToday = true;
// use true or false to have the current day highlighted
var DisablePast = true; // use true or false to allow past dates to be selectable
var MonthNames = new Array("January","February","March","April","May","June","July","August","September","October","Novem ber","December"); // The month names in your native language can be substituted below
var now = new Date(); // Global Vars
var dest = null;
var ny = now.getFullYear(); // Today's Date
var nm = now.getMonth();
var nd = now.getDate();
var sy = 0; // currently Selected date
var sm = 0;
var sd = 0;
var y = now.getFullYear(); // Working Date
var m = now.getMonth();
var d = now.getDate();
var l = 0;
var t = 0;
var MonthLengths = new Array(31,28,31,30,31,30,31,31,30,31,30,31);

/*
Function: GetDate(control)

Arguments:
control = ID of destination control
*/
function GetDate() {

EnsureCalendarExists();
//DestroyCalendar();
// One arguments is required, the rest are optional
// First arguments must be the ID of the destination control
if(arguments[0] == null || arguments[0] == "") { // arguments not defined, so display error and quit
alert("ERROR: Destination control required in funciton call GetDate()");
return;
} else {
dest = arguments[0]; // copy argument
}
y = now.getFullYear();
m = now.getMonth();
d = now.getDate();
sm = 0;
sd = 0;
sy = 0;
var cdval = dest.value;
if(/\d{1,2}.\d{1,2}.\d{4}/.test(dest.value)) { // element contains a date, so set the shown date
var vParts = cdval.split("/"); // assume mm/dd/yyyy
sm = vParts[0] - 1;
sd = vParts[1];
sy = vParts[2];
m=sm;
d=sd;
y=sy;

}

// l = dest.offsetLeft; // + dest.offsetWidth;
// t = dest.offsetTop - 125; // Calendar is displayed 125 pixels above the destination element
// if(t<0) { t=0; } // or (somewhat) over top of it. />/>

/* Calendar is displayed 125 pixels above the destination element
or (somewhat) over top of it. />/>*/
//l = dest.offsetLeft + dest.offsetParent.offsetLeft;
//t = dest.offsetTop - 125;
//if(t < 0) t = 0; // >
// DrawCalendar();
myFunction();
}

/*
function DestoryCalendar()

Purpose: Destory any already drawn calendar so a new one can be drawn
*/
function DestroyCalendar() {
var cal = document.getElementById("dpCalendar");
if(cal != null) {
cal.innerHTML = null;
cal.style.display = "none";
}
return
}

function PrevMonth() {
m--;
if(m==-1) {
m = 11;
y--;
}
//DrawCalendar();
myFunction();
}



function NextMonth() {
m++;
if(m==12) {
m = 0;
y++;
}
//DrawCalendar();
myFunction();
}


function PreviousYear() {

if(y) {

y--;
}
//DrawCalendar();
myFunction();
}

function NextYear() {

if(y) {

y++;
}
//DrawCalendar();
myFunction();
}

function ReturnDay(day) {
cDest = document.getElementById(dest);
dest.value = (m+1)+"/"+day+"/"+y;
document.getElementById("txtDate").value = dest.value;
//DestroyCalendar();
}

function EnsureCalendarExists() {
if(document.getElementById("demo") == null) {
var eCalendar = document.createElement("div");
eCalendar.setAttribute("id", "demo");
document.body.appendChild(eCalendar);
}
}

function isLeapYear(dTest) {
var y = dTest.getYear();
var bReturn = false;

if(y % 4 == 0) {
if(y % 100 != 0) {
bReturn = true;
} else {
if (y % 400 == 0) {
bReturn = true;
}
}
}

return bReturn;
}
function myFunction()
{
//function ReturnDay(day);
//GetDate(this);
//DestroyCalendar();
var str = document.getElementById("dpCalendar");
var sCal = "<table border=0>.<tr><td class=\"cellButton\">&nbsp;<a href=\"javascript: PrevMonth();\" title=\"Previous Month\">&lt;&lt;</a>&nbsp;</td>"+
"<td class=\"cellMonth\" width=\"45%\" colspan=\"3\">&nbsp;&nbsp;&nbsp;&nbsp;"+MonthNames[m]+" &nbsp;</td>"+


"<td class=\"cellButton\"></td></tr>"+
"<td class=\"cellButton\"><a href=\"javascript: PreviousYear();\" title=\"Next Month\">&gt;&gt;</a>&nbsp;"+y+"</td>"+
"<td class=\"cellButton\"><a href=\"javascript: NextYear();\" title=\"Next Month\">&gt;&gt;</a>&nbsp;</td></tr>"+
"<tr><td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td></tr>";
var wDay = 1;
var wDate = new Date(y,m,wDay);
if(isLeapYear(wDate))
{
MonthLengths[1] = 29;
} else
{
MonthLengths[1] = 28;
}
var dayclass = "";
var isToday = false;
for(var r=1; r<7; r++)
{
sCal = sCal + "<tr>";
for(var c=0; c<7; c++)
{
var wDate = new Date(y,m,wDay);
if(wDate.getDay() == c && wDay<=MonthLengths[m])
{
if(wDate.getDate()==sd && wDate.getMonth()==sm && wDate.getFullYear()==sy) {
dayclass = "cellSelected";
isToday = true; // only matters if the selected day IS today, otherwise ignored.
} else if(wDate.getDate()==nd && wDate.getMonth()==nm && wDate.getFullYear()==ny && HighlightToday) {
dayclass = "cellToday";
isToday = true;
} else {
dayclass = "cellDay";
isToday = false;
}
if(((now > wDate) && !DisablePast) || (now <= wDate) || isToday) { // >
// user wants past dates selectable
sCal = sCal + "<td class=\""+dayclass+"\"><a href=\"javascript: ReturnDay("+wDay+");\">"+wDay+"</a></td>";
} else {
// user wants past dates to be read only
sCal = sCal + "<td class=\""+dayclass+"\">"+wDay+"</td>";
}
wDay++;
} else {
sCal = sCal + "<td class=\"unused\"></td>";
}
}
sCal = sCal + "</tr>";

}

document.getElementById("demo").innerHTML = sCal;

}
function showDate() {
document.getElementById("txtDate").value = new Date();

}
function toggleview(element1) {
showDate();
GetDate(this);
element1 = document.getElementById(element1);
if (element1.style.display == 'block' || element1.style.display == '')
element1.style.display = 'none';
else
element1.style.display = 'block';
return;
}
</script>

<style type="text/css">
/* The day of the month cell that is selected */
#dpCalendar .cellSelected {
border: 1px solid green;
background-color: #ffdddd;
color: black;
text-align: center;
}
</style>
</head>
<body>
<form name="frmMain" id="frmMain" action="#" method="get">

Automatic <input type="textbox" size="60" id="txtDate" name="date" value="">
<input type="submit">
</form>
<select id="colorselector">

<option>select</option>
<option value="red" onclick="toggleview('demo')">Automatic </option>
<option value="demo" onclick="toggleview('demo')" >Manual</option>
</select>
<br>
<br>
<br>

<div id="demo"></div>
</body>
</html>