IDC资讯中心
this.createmonthgrid = function(theyear, themonth, theday){ //refresh the month view to the date, main action is run this.setdaylist() and set this.source.value
var thetextobject = this.source;
if (thetextobject == null){
return;
}
var thename = this.name;
var theyearobject = document.all.item(thename + "_yearlist");
var themonthobject = document.all.item(thename + "_monthlist");
var tmpyear = theyear;
var tmpmonth = themonth;
var tmpday = 1;
if (tmpmonth < 0){
tmpyear–;
tmpmonth = 11;
}
if (tmpmonth > 11){
tmpyear++;
tmpmonth = 0;
}
if (tmpyear < this.minyear){
tmpyear = this.minyear;
}
if (tmpyear > this.maxyear){
tmpyear = this.maxyear;
}
if (theday < 1){
tmpday = 1;
}else{
tmpday = this.getmonthdays(tmpyear, tmpmonth);
if (theday < tmpday){
tmpday = theday;
}
}
theyearobject.value = tmpyear;
themonthobject.value = tmpmonth;
this.setdaylist(tmpyear, tmpmonth, tmpday);
thetextobject.value = this.setdateformat(tmpyear, tmpmonth, tmpday);
thetextobject.select();
}
this.updatemonthgrid = function(theobject){ //run this.createmonthgrid() by theobject
var thetextobject = this.source;
if (thetextobject == null){
return;
}
var thename = this.name;
var theyearobject = document.all.item(thename + "_yearlist");
var themonthobject = document.all.item(thename + "_monthlist");
var thedayobject = document.all.item(thename + "_daylist");
var tmpname = theobject.id.substr(theobject.id.lastindexof("_"));
switch (tmpname){
case "_gopreviousmonth": //go previous month button
theobject.disabled = true;
this.createmonthgrid(parseint(theyearobject.value, 10), parseint(themonthobject.value, 10) – 1, parseint(thedayobject.value, 10));
theobject.disabled = false;
break;
case "_gonextmonth": //go next month button
theobject.disabled = true;
this.createmonthgrid(parseint(theyearobject.value, 10), parseint(themonthobject.value, 10) + 1, parseint(thedayobject.value, 10));
theobject.disabled = false;
break;
case "_yearlist": //year list
this.createmonthgrid(parseint(theyearobject.value, 10), parseint(themonthobject.value, 10), parseint(thedayobject.value, 10));
break;
case "_monthlist": //month list
this.createmonthgrid(parseint(theyearobject.value, 10), parseint(themonthobject.value, 10), parseint(thedayobject.value, 10));
break;
default:
return;
}
}
this.deletemonthgrid = function( ){ //check document focus, if blur this.source then delete this
var thename = this.name;
var thedivobject = document.all.item(thename + "_monthview");
if (thedivobject == null){
return;
}
var tmpobject = document.activeelement;
while (tmpobject != null){
if (tmpobject == this.source){
return;
}
//if (tmpobject.id == thename + "_monthview"){
// return;
//}
//if (tmpobject.id == thename + "_monthgrid"){
// return;
//}
if (tmpobject.id == thename + "_gopreviousmonth"){
return;
}
if (tmpobject.id == thename + "_gonextmonth"){
return;
}
if (tmpobject.id == thename + "_yearlist"){
return;
}
if (tmpobject.id == thename + "_monthlist"){
return;
}
if (tmpobject.id == thename + "_daylist"){
return;
}
tmpobject = tmpobject.parentelement;
}
if (tmpobject == null){ //delete the month view
thedivobject.outerhtml = "";
var thedate = new date(this.gettextdate(this.source.value));
if (isnan(thedate)){
this.source.value = "";
}else{
this.source.value = this.setdateformat(thedate.getfullyear(), thedate.getmonth(), thedate.getdate());
}
this.source = null;
}
}
this.initialmonthview = function( ){
var thename = this.name;
var thevalue = this.source.value;
var thecurrentdate = new date(this.gettextdate(thevalue));
if (isnan(thecurrentdate)){
thecurrentdate = new date();
}
var thedivhtml = "<div id=\"" + thename + "_monthview\" onblur=\"document.jsmonthview.deletemonthgrid();\">";
thedivhtml += " <table width=\"" + this.width.tostring() + "\" height=\"" + this.height.tostring() + "\" style=\"" + this.monthgridstyle + "\" cellpadding=\"0\" cellspacing=\"0\">";
thedivhtml += " <tr>";
thedivhtml += " <td align=\"center\" valign=\"top\">";
thedivhtml += " <table width=\"100%\" height=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">";
thedivhtml += " <tr align=\"center\" style=\"" + this.headerstyle + "\">";
thedivhtml += " <td>";
thedivhtml += " <input type=\"button\" tabindex=\"-1\" style=\"" + this.monthbtstyle + "\" id=\"" + thename + "_gopreviousmonth\" value=\"" + this.previousmonthtext + "\" onclick=\"document.jsmonthview.updatemonthgrid(this)\" onblur=\"document.jsmonthview.deletemonthgrid()\">";
thedivhtml += " </td>";
thedivhtml += " <td>";
thedivhtml += " <select id=\"" + thename + "_monthlist\">";
thedivhtml += " </select>";
thedivhtml += " </td>";
thedivhtml += " <td>";
thedivhtml += " <select id=\"" + thename + "_yearlist\">";
thedivhtml += " </select>";
thedivhtml += " <input type=\"hidden\" id=\"" + thename + "_daylist\" value=\"1\">";
thedivhtml += " </td>";
thedivhtml += " <td>";
thedivhtml += " <input type=\"button\" tabindex=\"-1\" style=\"" + this.monthbtstyle + "\" id=\"" + thename + "_gonextmonth\" value=\"" + this.nextmonthtext + "\" onclick=\"document.jsmonthview.updatemonthgrid(this)\" onblur=\"document.jsmonthview.deletemonthgrid()\">";
thedivhtml += " </td>";
thedivhtml += " </tr>";
thedivhtml += " <tr>";
thedivhtml += " <td colspan=\"4\" bgcolor=\"" + this.unselectbgcolor + "\">";
thedivhtml += " <div id=\"" + thename + "_monthgrid\"><br></div>";
thedivhtml += " </td>";
thedivhtml += " </tr>";
thedivhtml += " </table>";
thedivhtml += " </td>";
thedivhtml += " </tr>";
thedivhtml += " </table>";
thedivhtml += "</div>";
document.body.insertadjacenthtml("beforeend", thedivhtml);
thedivobject = document.all.item(thename + "_monthview");
thedivobject.style.position = "absolute";
thedivobject.style.posleft = this.getoffsetleft(this.source);
thedivobject.style.postop = this.getoffsettop(this.source) + this.source.offsetheight;
this.createyearlist(this.minyear, this.maxyear);
this.createmonthlist();
this.createmonthgrid(thecurrentdate.getfullyear(), thecurrentdate.getmonth(), thecurrentdate.getdate());
}
}
function createmonthview(thetextobject){ //the month view create interface, fire at elements onfocus event
if (thetextobject.readonly == true){
return;
}
if (document.jsmonthview != null){
if (document.jsmonthview.source == thetextobject){
return;
}else{
document.jsmonthview.deletemonthgrid();
}
}
document.jsmonthview = new definemonthview(thetextobject);
//begin insert your code, change the month view propertiy
//for example:
document.jsmonthview.dateformat = "<yyyy>年<m>月<d>日";
document.jsmonthview.todayliststyle = "font-family:verdana; font-size:12px; color:#000000;";
document.jsmonthview.todaytitle = "今天:"
document.jsmonthview.monthliststyle = "font-family:宋体; font-size:12px; color:#000000;";
document.jsmonthview.monthname[0] = "一月";
document.jsmonthview.monthname[1] = "二月";
document.jsmonthview.monthname[2] = "三月";
document.jsmonthview.monthname[3] = "四月";
document.jsmonthview.monthname[4] = "五月";
document.jsmonthview.monthname[5] = "六月";
document.jsmonthview.monthname[6] = "七月";
document.jsmonthview.monthname[7] = "八月";
document.jsmonthview.monthname[8] = "九月";
document.jsmonthview.monthname[9] = "十月";
document.jsmonthview.monthname[10] = "十一月";
document.jsmonthview.monthname[11] = "十二月";
document.jsmonthview.weekliststyle = "font-family:宋体; font-size:16px; color:#000000;";
document.jsmonthview.weekname[0] = "日";
document.jsmonthview.weekname[1] = "一";
document.jsmonthview.weekname[2] = "二";
document.jsmonthview.weekname[3] = "三";
document.jsmonthview.weekname[4] = "四";
document.jsmonthview.weekname[5] = "五";
document.jsmonthview.weekname[6] = "六";
//end insert, and then execute initialmonthview() method
document.jsmonthview.initialmonthview();
//insert your other code, these code do not touch the month view
thetextobject.select();
}
function deletemonthview(thetextobject){ //the month view delete interface, fire at elements onblur event
if (document.jsmonthview == null){
return;
}
document.jsmonthview.deletemonthgrid();
if (document.jsmonthview.source == null){
document.jsmonthview = null;
}
}
//–>
</script>
</head>
<body bgcolor="#ffffff" text="#000000">
<form name="form1" method="post" action="">
<input type="text" name="textfield" value="example 1"
onfocus="createmonthview(this)"
onblur="deletemonthview(this)">
<input type="button" name="textfield2" value="example 2"
onfocus="createmonthview(this)"
onblur="deletemonthview(this)">
<input type="button" name="button" value="show all elements" onclick="showallelements(document.forms[0])">
<script language="javascript">
function showallelements(theform){
var i=0,html_str;
html_str = "<table border=1><tr><td>type</td><td>name</td><td>id</td><td>value</td></tr>";
for (i=0;i<theform.elements.length;i++){
html_str += "<tr>";
html_str += "<td>" + theform.elements[i].type + "</td>";
html_str += "<td>" + theform.elements[i].name + "</td>";
html_str += "<td>" + theform.elements[i].id + "</td>";
html_str += "<td>" + theform.elements[i].value + "</td>";
html_str += "</tr>";
}
debug.innerhtml = html_str + "</table>";
}
</script>
</form>
<div id="debug">
setp 1.copy or link the heads script block to destination page;<br>
step 2.set the destination elements onfocus="createmonthview(this)";<br>
step 3.set the destination elements onblur="deletemonthview(this)";<br>
step 4.runing. the destination elements value is the date.<br>
</div>
</body>
</html>
