JSP date selection box without third-party JS control __js

---------------------------------------------------------------

----------------------------------------------------------------

The code is as follows:

<% @page pageencoding= "Utf-8"%>
<title>js Date Picker </title>
<script type= "Text/javascript" >
function Hs_dateadd (interval,number,date) {
Number = parseint (number);
if (typeof (date) = = "string") {var date = new Date (Date.split ("-") [0],date.split ("-") [1],date.split ("-") [2])}
if (typeof (date) = = "Object") {var date = date}
Switch (interval) {
Case "Y": Return new Date (Date.getfullyear () +number,date.getmonth (), date.getdate ()); Break
Case "M": Return new Date (Date.getfullyear (), Date.getmonth () +number,checkdate (), Date.getfullyear (), date.getmonth () + Number,date.getdate ())); Break
Case "D": Return new Date (Date.getfullyear (), Date.getmonth (), date.getdate () +number); Break
Case "W": Return new Date (Date.getfullyear (), Date.getmonth (), 7*number+date.getdate ()); Break
}
}
function Checkdate (year,month,date) {
var enddate = ["31", "28", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"];
var returndate = "";
if (year%4==0) {enddate[1]= "29"}
if (Date>enddate[month]) {returndate = Enddate[month]}else{returndate = Date}
return returndate;
}

function Weekday (date) {
var thedate;
if (typeof (date) = = "string") {thedate = new date (Date.split ("-)") [0],date.split ("-") [1],date.split ("-") [2]);}
if (typeof (date) = = "Object" {thedate = date}
return Thedate.getday ();
}
function Hs_calender () {
var lis = "";
var style = "";
Style + + "<style type= ' text/css ' >";
Style + = ". Calender {width:170px; height:auto; font-size:12px; margin-right:14px; Background:url (calenderbg.gif) No-repeat Right Center #fff; border:1px solid #397EAE; PADDING:1PX} ";
Style + + ". Calender ul {list-style-type:none; margin:0; padding:0;}";
Style + = ". Calender. Day {background-color: #EDF5FF; height:20px;}";
Style + = ". Calender. Day Li,.calender. Date li{float:left; width:14%; height:20px; line-height:20px; Text-align:center}" ;
Style + = ". Calender li a {text-decoration:none; font-family:tahoma; font-size:11px; color: #333}";
Style + = ". Calender li a:hover {color: #f30; text-decoration:underline}";
Style + = ". Calender li a.hasarticle {font-weight:bold; color: #f60!important}";
Style + = ". Lastmonthdate,. nextmonthdate {color: #bbb; font-size:11px}";
Style + = ". Selectthisyear A,. Selectthismonth A{text-decoration:none; margin:0 2px; Color: #000; Font-weight:bold} ";
Style + = ". Calender. Lastmonth,. Calender. nextmonth{text-decoration:none; color: #000; font-size:18px; font-weight:bold; line-height:16px;} ";
Style + = ". Calender. lastmonth {float:left;} ";
Style + = ". Calender. nextmonth {float:right;} ";
Style + = ". Calenderbody {Clear:both}";
Style + = ". Calendertitle {text-align:center;height:20px; line-height:20px; Clear:both}";
Style + = ". Today {background-color: #ffffaa; border:1px solid #f60; padding:2px}";
Style + = ". Today a {color: #f30;}";
Style + = ". Calenderbottom {clear:both; border-top:1px solid #ddd; padding:3px 0; Text-align:left}";
Style + = ". Calenderbottom a {text-decoration:none; margin:2px!important; font-weight:bold; color: #000}";
Style + = ". Calenderbottom a.closecalender{float:right}";
Style + = ". Closecalenderbox {float:right; border:1px solid #000; background: #fff; font-size:9px; width:11px; height:11px ; line-height:11px; Text-align:center;overflow:hidden; Font-weight:normal!important} ";
Style + = "</style>";

var now;
if (typeof (Arguments[0]) = = "string") {
Selectdate = Arguments[0].split ("-");
var year = selectdate[0];
var month = parseint (selectdate[1]) -1+ "";
var date = selectdate[2];
now = new Date (year,month,date);
}else if (typeof (arguments[0)) = = "Object") {
now = Arguments[0];
}
var lastmonthenddate = Hs_dateadd ("D", "1", now.getfullyear () + "-" +now.getmonth () + " -01"). GetDate ();
var lastmonthdate = Weekday (Now.getfullyear () + "-" +now.getmonth () + "-01");
var thismonthlastdate = Hs_dateadd ("D", "1", now.getfullyear () + "-" + (parseint (Now.getmonth ()) +1). ToString () + "-01");
var thismonthenddate = Thismonthlastdate.getdate ();
var thismonthendday = Thismonthlastdate.getday ();
var todayobj = new Date ();
Today = Todayobj.getfullyear () + "-" +todayobj.getmonth () + "-" +todayobj.getdate ();

For (i=0. i<lastmonthdate; i++) {//Last Month ' s Date
Lis = "<li class= ' lastmonthdate ' >" +lastmonthenddate+ "</li>" + lis;
lastmonthenddate--;
}
For (I=1 i<=thismonthenddate; i++) {//current Month ' s Date

  if (today = = Now.getfullyear () + "-" +now.getmonth () + "-" +i) {
   var todaystring = Now.getfullyear () + "-" + (parseint (Now.getmonth ()) +1). ToString () + "-" +i;
   lis + + <li><a href=javascript:void (0) class= ' Today ' onclick= ' _selectthisday ' (This) ' Title= ' "+now.getfullyear () +"-"+ (parseint (Now.getmonth ()) +1) +"-+i+ "' >" +i+ "</a></li>";
  }else{
   lis + + <li><a href=javascript:void (0) onclick= ' _ Selectthisday (This) ' title= ' "+now.getfullyear () +"-"+ (parseint (Now.getmonth ()) +1) +"-"+i+" ' > "+i+" </a> </li> ";
  }
  
 
 var j=1;
 for (i=thismonthendday i<6; i++) { //Next Month ' s Date
  lis = "<li class=" Nextmonthdate ' > ' +j+ "</li>";
  j++;
 }
 lis + = style;

 var calendertitle = "<a href= ' javascript:void (0) ' class= ' nextmonth '" Onclick=hs_calender "(HS_DateAdd (' m ', 1 , ' "+now.getfullyear () +"-"+now.getmonth () +"-"+now.getdate () +" '), this) title= ' Next Month ' >&raquo;</a> ";
 calendertitle + + <a href= ' javascript:void (0) ' class= ' Lastmonth ' onclick=hs_calender (' HS_DateAdd ' (' m ',-1 , ' "+now.getfullyear () +"-"+now.getmonth () +"-"+now.getdate () +" '), this) title= ' Previous Month ' >&laquo;</a > ";
 calendertitle + + <span class= ' selectthisyear ' ><a href= ' javascript:void (0) ' onclick= ' Calenderselectyear (This) ' title= ' Click here to select other years ' > ' +now.getfullyear () + </a></span> year <span class= ' selectthismonth ' ><a href= ' javascript:void (0) ' onclick= ' Calenderselectmonth (this) ' title= ' Click here to select the other month ' > ' + (parseint (Now.getmonth ()) +1). ToString () + "</a></span> Month";

if (arguments.length>1) {
Arguments[1].parentnode.parentnode.getelementsbytagname ("ul") [1].innerhtml = lis;
arguments[1].parentnode.innerhtml = Calendertitle;

}else{
var calenderbox = style+ "<div class= ' calender ' ><div class= ' calendertitle ' >" +calendertitle+ "</div> <div class= ' calenderbody ' ><ul class= ' Day ' ><li> </li><li> one </li><li> two </li><li> three </li><li> four </li><li> five </li><li> six </li></ul> <ul class= ' date ' id= ' thismonthdate ' > ' +lis+ ' </ul></div><div class= ' Calenderbottom ' ><a href= ' javascript:void (0) ' class= ' closecalender ' onclick= ' Closecalender (this) ' >x</a><span><span ><a href=javascript:void (0) onclick= ' _selectthisday (this) ' title= ' "+todaystring+" ' >today</a></ Span></span></div></div> ";
return calenderbox;
}
}
function _selectthisday (d) {
var boxobj = D.parentnode.parentnode.parentnode.parentnode.parentnode;
BoxObj.targetObj.value = D.title;
BoxObj.parentNode.removeChild (Boxobj);
}
function Closecalender (d) {
var boxobj = D.parentnode.parentnode.parentnode;
BoxObj.parentNode.removeChild (Boxobj);
}

function Calenderselectyear (obj) {
var opt = "";
var thisyear = obj.innerhtml;
For (i=1970 i<=2020; i++) {
if (i==thisyear) {
opt + + "<option value=" +i+ "selected>" +i+ "</option>";
}else{
opt + + "<option value=" +i+ ">" +i+ "</option>";
}
}
opt = "<select onblur= ' Selectthisyear" (This) ' onchange= ' selectthisyear (this) ' style= ' font-size:11px ' > ' +opt+ ' </select> ";
Obj.parentNode.innerHTML = opt;
}

function Selectthisyear (obj) {
Hs_calender (obj.value+ "-" +obj.parentnode.parentnode.getelementsbytagname ("span") [1].getelementsbytagname ("a") [ 0].innerhtml+ "-1", obj.parentnode);
}

function Calenderselectmonth (obj) {
var opt = "";
var thismonth = obj.innerhtml;
For (I=1 i<=12; i++) {
if (i==thismonth) {
opt + + "<option value=" +i+ "selected>" +i+ "</option>";
}else{
opt + + "<option value=" +i+ ">" +i+ "</option>";
}
}
opt = "<select onblur= ' Selectthismonth" (This) ' onchange= ' Selectthismonth (this) ' style= ' font-size:11px ' > ' +opt+ ' </select> ";
Obj.parentNode.innerHTML = opt;
}
function Selectthismonth (obj) {
Hs_calender (Obj.parentNode.parentNode.getElementsByTagName ("span") [0].getelementsbytagname ("a") [0].innerhtml+] -"+obj.value+"-1 ", obj.parentnode);
}
function Hs_setdate (inputobj) {
var calenderobj = document.createelement ("span");
calenderobj.innerhtml = Hs_calender (New Date ());
CalenderObj.style.position = "absolute";
Calenderobj.targetobj = Inputobj;
InputObj.parentNode.insertBefore (calenderobj,inputobj.nextsibling);
}
</script>
<style>
Body {font-size:12px}
td {Text-align:center}
h1 {font-size:26px;}
h4 {font-size:16px;}
EM {color: #999; margin:0 10px; font-size:11px; Display:block}
</style>
<body>

<table border= "1" width= "height=" >
<tr>
<td> This is sample text </td>
<td> Example Input Box </td>
<td> text text </td>
</tr>
<tr>
<td> Example Input Box </td>
<td><input type= "text" style= "width:70px" onfocus= "hs_setdate (This)" > Text </td>
<td> here is your text </td>
</tr>
<tr>
<td> a paragraph of text </td>
<td> Example Input Box </td>
<td> text <input type= "text" style= "width:70px" onfocus= "hs_setdate (This)" > Text </td>
</tr>
</table>
<ul>
<li> it does not require other framework class support </li>
<li> support multiple Browsers </li>
<li> Click Year, Month can drop down selection </li>
</ul>
</body>