JSP date Picker __js

<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">

<meta name= "Author" content= "Jiang Hongbin" >

<title> Date Selection-by ziyue</title>

<script language= "JavaScript" type= "Text/javascript" >

Date selection

var months = new Array ("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");

var daysinmonth = new Array (31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

var days = new Array ("Day", "one", "two", "three", "four", "five", "six");

var today;

Document.writeln ("<div id= ' Calendar ' style= ' position:absolute; Z-index:1; Visibility:hidden; filter:/"Progid:DXImageTransform.Microsoft.Shadow (direction=135,color= #999999, strength=3)/" ' ></div> ") ;

function getdays (month, year)

{

The following code is to determine whether the current is a leap year

if (1 = month)

Return ((0 = year% 4) && (0!= (year% 100)) | | (0 = year% 400)? 29:28;

Else

return Daysinmonth[month];

}

function Gettoday ()

{

Get today's year, month, day

This.now = new Date ();

This.year = This.now.getFullYear ();

This.month = This.now.getMonth ();

This.day = This.now.getDate ();

}

function Getstringday (str)

{

Get the input box of year, month, day

var str=str.split ("-")

This.now = new Date (parsefloat (str[0)), parsefloat (str[1]) -1,parsefloat (str[2));

This.year = This.now.getFullYear ();

This.month = This.now.getMonth ();

This.day = This.now.getDate ();

}

function Newcalendar () {

var parseyear = parseint (Document.all.year.options[document.all.year.selectedindex].value);

var newcal = new Date (Parseyear, Document.all.Month.selectedIndex, 1);

var day =-1;

var startday = Newcal.getday ();

var daily = 0;

if ((Today.year = = Newcal.getfullyear ()) && (Today.month = = Newcal.getmonth ()))

Day = Today.day;

var tablecal = Document.all.calendar;

var intdaysinmonth =getdays (Newcal.getmonth (), newcal.getfullyear ());

for (var intweek = 1; intweek < tablecal.rows.length;intweek++)

for (var intday = 0;intday < tablecal.rows[intweek].cells.length;intday++)

{

var cell = Tablecal.rows[intweek].cells[intday];

if ((Intday = = startday) && (0 = daily))

Daily = 1;

if (day==daily)//Today, call today's class

{

Cell.style.background= ' #6699CC ';

Cell.style.color= ' #FFFFFF ';

Cell.style.fontweight= ' Bold ';

}

else if (intday==6)//Saturday

Cell.style.color= ' green ';

else if (intday==0)//Sunday

Cell.style.color= ' Red ';

if (Daily > 0) && (daily <= intdaysinmonth))

{

Cell.innertext = daily;

daily++;

}

Else

Cell.innertext = "";

}

}

function GetDate (InputBox)

{

var sdate;

This code handles mouse clicks.

if (Event.srcElement.tagName = = "TD")

if (Event.srcElement.innerText!= "")

{

Sdate = Document.all.Year.value + "-" + Document.all.Month.value + "-" + event.srcElement.innerText;

Eval ("document.all.") +inputbox). Value=sdate;

Hiddencalendar ();

}

}

function Hiddencalendar ()

{

Close Selection window

document.all.calendar.style.visibility= ' hidden ';

}

function Showcalendar (InputBox)

{

var x,y,intloop,intweeks,intdays;

var divcontent;

var year,month,day;

var o=eval ("document.all." +inputbox);

var thisyear; The real year

Thisyear=new Gettoday ();

Thisyear=thisyear.year;

Today = O.value;

if (IsDate (today))

Today = new Getstringday;

Else

Today = new Gettoday ();

Location displayed

X=o.offsetleft;

Y=o.offsettop;

while (o=o.offsetparent)

{

X+=o.offsetleft;

Y+=o.offsettop;

}

document.all.calendar.style.left=x+2;

document.all.calendar.style.top=y+20;

document.all.calendar.style.visibility= "visible";

The following starts the Output calendar table (Border-color: #9DBAF7)

divcontent= "<table border= ' 0 ' cellspacing= ' 0 ' style= ' border:1px solid #0066FF; Background-color: #EDF2FC ' > ';

divcontent+= "<tr>";

divcontent+= "<td style= ' border-bottom:1px solid #0066FF; Background-color: #C7D8FA ' > ';

Years

divcontent+= "<select name= ' year ' id= ' year ' onchange= ' Newcalendar () ' style= ' Font-family:verdana; font-size:12px ' > ';

for (intloop = thisyear-35; intloop < (thisyear + 2); intloop++)

divcontent+= "<option value=" + intloop + "" + (Today.year = intloop?) Selected ":" ") +" > "+ intloop +" </option> ";

divcontent+= "</select>";

Month

divcontent+= "<select name= ' Month ' id= ' Month ' onchange= '," Newcalendar () ' style= '; font-size:12px ' > ';

for (intloop = 0; intloop < months.length; intloop++)

divcontent+= "<option value=" + (Intloop + 1) + "" + (Today.month = intloop?) Selected ":" ") +" > "+ months[intloop] +" </option> ";

divcontent+= "</select>";

divcontent+= "</td>";

divcontent+= "<td style= ' border-bottom:1px solid #0066FF; Background-color: #C7D8FA; Font-weight:bold; Font-family:wingdings 2,wingdings,webdings; font-size:16px; padding-top:2px; Color: #4477FF; Cursor:hand ' align= ' center ' title= ' closes ' onclick= ' Javascript:hiddencalendar () ' >S</td> ';

divcontent+= "</tr>";

divcontent+= "<tr><td align= ' center ' colspan= ' 2 ' >";

divcontent+= "<table id= ' calendar ' border= ' 0 ' width= ' 100% ' >";

Week

divcontent+= "<tr>";

for (intloop = 0; intloop < days.length; intloop++)

divcontent+= "<td align= ' center ' style= ' font-size:12px ' >" + days[intloop] + "</td>";

divcontent+= "</tr>";

Days

for (intweeks = 0; intweeks < 6; intweeks++)

{

divcontent+= "<tr>";

for (intdays = 0; intdays < days.length; intdays++)

divcontent+= "<td onclick= ' GetDate (/" "+ InputBox +"/") ' style= ' Cursor:hand; border-right:1px solid #BBBBBB; border-bottom:1px solid #BBBBBB; Color: #215DC6; Font-family:verdana; font-size:12px ' align= ' center ' ></td> ';

divcontent+= "</tr>";

}

divcontent+= "</table></td></tr></table>";

Document.all.calendar.innerhtml=divcontent;

Newcalendar ();

}

function IsDate (DATESTR)

{

var Datepat =/^ (/d{4}) (/-) (/d{1,2}) (/-) (/d{1,2}) $/;

var Matcharray = Datestr.match (Datepat);

if (Matcharray = null) return false;

var month = matcharray[3];

var day = matcharray[5];

var year = matcharray[1];

if (Month < 1 | | | month >) return false;

if (Day < 1 | |/day >) return false;

if (month==4 | | month==6 | | month==9 | | month==11) && day==31) return false;

if (month = 2)

{

var isleap = (Year% 4 = 0 && (year%!= 0 | | year% 400 = 0));

if (Day > 29 | | (day==29 &&!isleap)) return false;

}

return true;

}

</script>

<style type= "Text/css" >

<!--

Td,input {

Font-family:verdana, Arial, Helvetica, Sans-serif;

font-size:12px;

}

-->

</style>

<body>

<form name= "Form1" method= "Post" action= "" >

<table width= border= "0" align= "center" cellspacing= "1" bgcolor= "#CCCCCC" >

<tr bgcolor= "#FFFFFF" >

<TD align= "Right" > Your birthday:</td>

<td><input name= "Birthday" type= "text" id= "Birthday" title= "click to select" onclick= "Javascript:showcalendar (this.id ) "Size=" >

<input type= "button" Name= "Submit" value= "select Onclick=" Javascript:showcalendar (' birthday ') "></td>

</tr>

</table>

</form>

</body>