IDC资讯中心
这是对原日历控件做了改进，始之更符合中国人的习惯。改进后的代码如下面，将其存为rl.asp然后在需要调用的文件中加入<!–#include file="rl.asp" –>，在控件中的调用如下，主要为onfocus和onblur事件<input name="gcrq" type="text" id="gcrq" value="<%=date(now)%>" onfocus="createmonthview(this)" onblur="deletemonthview(this)">
rl.asp主要内容
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<script language="javascript">
<!–
//this is jsmonthview 1.0, author is chinese dengkang (2002-07-12).
//i allow your do any modify, but i dont bear any liability.
//browser: ie 4 and later
function definemonthview(thetextobject){ //the month view construct function
this.getonlyname = function( ){ //create one and only name on the document
var thename = "mv"; //prefix
var aryname = new array();
aryname[0] = "_monthview"; //the month view main bodys name postfix
aryname[1] = "_monthgrid"; //the month view day areas name postfix
aryname[2] = "_gopreviousmonth"; //the month view go previous month buttons name postfix
aryname[3] = "_gonextmonth"; //the month view go next month buttons name postfix
aryname[4] = "_yearlist"; //the month view year lists name postfix
aryname[5] = "_monthlist"; //the month view month lists name postfix
aryname[6] = "_daylist"; //keep the month view current days element name postfix
var i = -1, j = 0, maxi = 2000;
var extag = true;
while ((extag == true) && (i < maxi)){
i++;
extag = false;
for (j=0;j<aryname.length;j++){
if (document.all.item(thename + i.tostring() + aryname[j]) != null){
extag = true;
}
}
}
if (extag == false){
return(thename + i.tostring());
}else{
return("_" + thename);
}
}
var thename = this.getonlyname();
this.name = thename; //the month view name
this.source = thetextobject; //the month view act on thetextobject
this.minyear = 1970; //year list min value
//return between 1000 and 9999 and <= this.maxyear
this.maxyear = 2030; //year list max value
//return between 1000 and 9999 and >= this.minyear
this.width = 200; //the month view main bodys width
this.height = 120; //the month view main bodys height
this.dateformat = "<yyyy>-<mm>-<dd>"; //the date format
//<yy> or <yyyy> is year, <m> or <mm> is digital format month, <mmm> or <mmmmmm> is character format month, <d> or <dd> is day, other char unchanged
//this function setting year, month and day sequence
//example:
// <yyyy>-<mm>-<dd> : 2002-04-01
// <yy>.<m>.<d> : 02.4.1
// <yyyy> year <mmmmmm> month <d> day : 2002 year april month 1 day
// <m>/<d>/<yy> : 4/1/02
// <mmm> <dd>, <yyyy> : apr 01, 2002
// <mmmmmm> <d>, <yyyy> : april 1, 2002
// <dd> <mmm> <yyyy> : 01 apr 2002
// <dd>/<mm>/<yyyy> : 01/04/2002
this.unselectbgcolor = "#ffffff"; //the month view default background color
this.selectedbgcolor = "#808080"; //the selected date background color
this.selectedcolor = "#ffffff"; //the selected date front color
this.daybdwidth = "1"; //the day unit border width, unit is px
this.daybdcolor = this.unselectbgcolor; //the day unit border color,default is this.unselectbgcolor
this.todaybdcolor = "#ff0000"; //denote todays date border color
this.invalidcolor = "#808080"; //it is not current month day front color
this.validcolor = "#0000ff"; //it is current month day front color
this.weekendbgcolor = this.unselectbgcolor; //the weekend background color, default is this.unselectbgcolor
this.weekendcolor = this.validcolor; //the weekend front color, default is this.validcolor
this.yearliststyle = "font-size:12px; font-family:宋体;"; //the year lists style
this.monthliststyle = "font-size:12px; font-family:宋体;"; //the month lists style
this.monthname = new array(); //month name list, font is include this.monthliststyle
this.monthname[0] = "1月";
this.monthname[1] = "2月";
this.monthname[2] = "3月";
this.monthname[3] = "4月";
this.monthname[4] = "5月";
this.monthname[5] = "6月";
this.monthname[6] = "7月";
this.monthname[7] = "8月";
this.monthname[8] = "9月";
this.monthname[9] = "10月";
this.monthname[10] = "11月";
this.monthname[11] = "12月";
this.titlestyle = "cursor:default; color:#000000; background-color:" + this.unselectbgcolor + "; font-size:16px; font-weight:bolder; font-family:times new roman; text-align:center; vertical-align:bottom;"; //the month view title areas style
this.weekname = new array(); //week name list, font is include this.titlestyle
this.weekname[0] = "日";
this.weekname[1] = "一";
this.weekname[2] = "二";
this.weekname[3] = "三";
this.weekname[4] = "四";
this.weekname[5] = "五";
this.weekname[6] = "六";
this.footerstyle = "cursor:hand; color:#000000; background-color:" + this.unselectbgcolor + "; font-size:12px; font-family:verdana; text-align:left; vertical-align:middle;"; //the month footer areas style
this.todaytitle = "今天:"; //today tip string, font is include this.footerstyle
this.monthbtstyle = "font-family:marlett; font-size:12px;"; //the change month button style
this.previousmonthtext = "3"; //the go previous month button text
//font is include this.monthbtstyle
this.nextmonthtext = "4"; //the go next month button text
//font is include this.monthbtstyle
this.monthgridstyle = "border-width:1px; border-style:solid; border-color:#000000;"; //the month view main bodys default style
this.headerstyle = "height:32px; background-color:menu;"; //the month view header areas style
this.linebgstyle = "height:10px; background-color:" + this.unselectbgcolor + "; text-align:center; vertical-align:middle;"; //the month view title area and day area compart area background style
this.linestyle = "width:90%; height:1px; background-color:#000000;"; //the month view title area and day area compart area front style
this.daystyle = "cursor:hand; font-size:12px; font-family:verdana; text-align:center; vertical-align:middle;"; //the month view day areas style
this.overdaystyle = "this.style.textdecoration=underline;"; //the mouse over a day style
this.outdaystyle = "this.style.textdecoration=none;"; //the mouse out a day style
this.getoffsetleft = function(theobject){ //return theobjects absolute offsetleft
var absleft = 0;
var theposition="";
var tmpobject = theobject;
while (tmpobject != null){
theposition = tmpobject.position;
tmpobject.position = "static";
absleft += tmpobject.offsetleft;
tmpobject.position = theposition;
tmpobject = tmpobject.offsetparent;
}
return absleft;
}
this.getoffsettop = function(theobject){ //return theobjs absolute offsettop
var abstop = 0;
var theposition = "";
var tmpobject = theobject;
while (tmpobject != null){
theposition = tmpobject.position;
tmpobject.position = "static";
abstop += tmpobject.offsettop;
tmpobject.position = theposition;
tmpobject = tmpobject.offsetparent;
}
return abstop;
}
this.getformatyear = function(theyear){//format theyear to 4 digit
var tmpyear = theyear;
if (tmpyear < 100){
tmpyear += 1900;
if (tmpyear < 1970){
tmpyear += 100;
}
}
if (tmpyear < this.minyear){
tmpyear = this.minyear;
}
if (tmpyear > this.maxyear){
tmpyear = this.maxyear;
}
return(tmpyear);
}
this.getmonthdays = function(theyear, themonth){ //get theyear and themonth days number
var thedays = new array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var themonthday = 0, tmpyear = this.getformatyear(theyear);
themonthday = thedays[themonth];
if (themonth == 1){ //themonth is february
if(((tmpyear % 4 == 0) && (tmpyear % 100 != 0)) || (tmpyear % 400 == 0)){
themonthday++;
}
}
return(themonthday);
}
this.setdateformat = function(theyear, themonth, theday){//format a date to this.dateformat
var thedate = this.dateformat;
var tmpyear = this.getformatyear(theyear);
var tmpmonth = themonth;
if (tmpmonth < 0){
tmpmonth = 0;
}
if (tmpmonth > 11){
tmpmonth = 11;
}
var tmpday = theday;
if (tmpday < 1){
tmpday = 1;
}else{
tmpday = this.getmonthdays(tmpyear, tmpmonth);
if (theday < tmpday){
tmpday = theday;
}
}
thedate = thedate.replace(/<yyyy>/g, tmpyear.tostring());
thedate = thedate.replace(/<yy>/g, tmpyear.tostring().substr(2,2));
thedate = thedate.replace(/<mmmmmm>/g, this.monthname[tmpmonth]);
thedate = thedate.replace(/<mmm>/g, this.monthname[tmpmonth].substr(0,3));
if (themonth < 9){
thedate = thedate.replace(/<mm>/g, "0" + (tmpmonth + 1).tostring());
}else{
thedate = thedate.replace(/<mm>/g, (tmpmonth + 1).tostring());
}
thedate = thedate.replace(/<m>/g, (tmpmonth + 1).tostring());
if (theday < 10){
thedate = thedate.replace(/<dd>/g, "0" + tmpday.tostring());
}else{
thedate = thedate.replace(/<dd>/g, tmpday.tostring());
}
thedate = thedate.replace(/<d>/g, tmpday.tostring());
return(thedate);
}
this.gettextdate = function(thestring){ //convert a string to a date, if the string is not a date, return a empty string
var i = 0, tmpchar = "", find_tag = "";
var start_at = 0, end_at = 0, year_at = 0, month_at = 0, day_at = 0;
var tmp_at = 0, one_at = 0, two_at = 0, one_days = 0, two_days = 0;
var arydate = new array();
var tmpyear = -1, tmpmonth = -1, tmpday = -1;
var tmpdate = thestring.tolowercase();
var defdate = "";
end_at = tmpdate.length;
for (i=1;i<end_at;i++){
if (tmpdate.charat(i)=="0"){
tmpchar = tmpdate.charat(i-1);
if (tmpchar<"0" || tmpchar>"9"){
tmpdate = tmpdate.substr(0,i-1) + "-" + tmpdate.substr(i+1);
}
}
}
for (i=0;i<9;i++){
tmpdate = tmpdate.replace(this.monthname[i].tolowercase().substr(0,3), "-00" + (i+1).tostring() + "-");
}
for (i=9;i<12;i++){
tmpdate = tmpdate.replace(this.monthname[i].tolowercase().substr(0,3), "-0" + (i+1).tostring() + "-");
}
tmpdate = tmpdate.replace(/jan/g, "-001-");
tmpdate = tmpdate.replace(/feb/g, "-002-");
tmpdate = tmpdate.replace(/mar/g, "-003-");
tmpdate = tmpdate.replace(/apr/g, "-004-");
tmpdate = tmpdate.replace(/may/g, "-005-");
tmpdate = tmpdate.replace(/jun/g, "-006-");
tmpdate = tmpdate.replace(/jul/g, "-007-");
tmpdate = tmpdate.replace(/aug/g, "-008-");
tmpdate = tmpdate.replace(/sep/g, "-009-");
tmpdate = tmpdate.replace(/oct/g, "-010-");
tmpdate = tmpdate.replace(/nov/g, "-011-");
tmpdate = tmpdate.replace(/dec/g, "-012-");
for (i=0;i<tmpdate.length;i++){
tmpchar = tmpdate.charat(i);
if ((tmpchar<"0" || tmpchar>"9") && (tmpchar != "-")){
tmpdate = tmpdate.replace(tmpchar,"-")
}
}
while(tmpdate.indexof("–") != -1){
tmpdate = tmpdate.replace(/–/g,"-");
}
start_at = 0;
end_at = tmpdate.length-1;
while (tmpdate.charat(start_at)=="-"){
start_at++;
}
while (tmpdate.charat(end_at)=="-"){
end_at–;
}
if (start_at < end_at+1){
tmpdate = tmpdate.substring(start_at,end_at+1);
}else{
tmpdate = "";
}
arydate = tmpdate.split("-");
if (arydate.length != 3){
return(defdate);
}
for (i=0;i<3;i++){
if (parseint(arydate[i],10)<1){
arydate[i] = "1";
}
}
find_tag="000";
for (i=2;i>=0;i–){
if (arydate[i].length==3){
if (arydate[i]>="001" && arydate[i]<="012"){
tmpmonth = parseint(arydate[i],10)-1;
switch (i){
case 0:
find_tag = "100";
one_at = parseint(arydate[1],10);
two_at = parseint(arydate[2],10);
break;
case 1:
find_tag = "010";
one_at = parseint(arydate[0],10);
two_at = parseint(arydate[2],10);
break;
case 2:
find_tag = "001";
one_at = parseint(arydate[0],10);
two_at = parseint(arydate[1],10);
break;
}
}
}
}
if (find_tag!="000"){
one_days = this.getmonthdays(two_at,tmpmonth);
two_days = this.getmonthdays(one_at,tmpmonth);
if ((one_at>one_days)&&(two_at>two_days)){
return(defdate);
}
if ((one_at<=one_days)&&(two_at>two_days)){
tmpyear = this.getformatyear(two_at);
tmpday = one_at;
}
if ((one_at>one_days)&&(two_at<=two_days)){
tmpyear = this.getformatyear(one_at);
tmpday = two_at;
}
if ((one_at<=one_days)&&(two_at<=two_days)){
tmpyear = this.getformatyear(one_at);
tmpday = two_at;
tmpdate = this.dateformat;
year_at = tmpdate.indexof("<yyyy>");
if (year_at == -1){
year_at = tmpdate.indexof("<yy>");
}
day_at = tmpdate.indexof("<dd>");
if (day_at == -1){
day_at = tmpdate.indexof("<d>");
}
if (year_at >= day_at){
tmpyear = this.getformatyear(two_at);
tmpday = one_at;
}
}
return(new date(tmpyear, tmpmonth, tmpday));
}
find_tag = "000";
for (i=2;i>=0;i–){
if (parseint(arydate[i],10)>31){
tmpyear = this.getformatyear(parseint(arydate[i],10));
switch (i){
case 0:
find_tag = "100";
one_at = parseint(arydate[1],10);
two_at = parseint(arydate[2],10);
break;
case 1:
find_tag = "010";
one_at = parseint(arydate[0],10);
two_at = parseint(arydate[2],10);
break;
case 2:
find_tag = "001";
one_at = parseint(arydate[0],10);
two_at = parseint(arydate[1],10);
break;
}
}
}
if (find_tag=="000"){
tmpdate = this.dateformat;
year_at = tmpdate.indexof("<yyyy>");
if (year_at == -1){
year_at = tmpdate.indexof("<yy>");
}
month_at = tmpdate.indexof("<mmmmmm>");
if (month_at == -1){
month_at = tmpdate.indexof("<mmm>");
}
if (month_at == -1){
month_at = tmpdate.indexof("<mm>");
}
if (month_at == -1){
month_at = tmpdate.indexof("<m>");
}
day_at = tmpdate.indexof("<dd>");
if (day_at == -1){
day_at = tmpdate.indexof("<d>");
}
if ((year_at>month_at)&&(year_at>day_at)){
find_tag="001"
}
if ((year_at>month_at)&&(year_at<=day_at)){
find_tag="010";
}
if ((year_at<=month_at)&&(year_at>day_at)){
find_tag="010";
}
if ((year_at<=month_at)&&(year_at<=day_at)){
find_tag="100";
}
switch (find_tag){
case "100":
tmpyear = parseint(arydate[0],10);
one_at = parseint(arydate[1],10);
two_at = parseint(arydate[2],10);
break;
case "010":
one_at = parseint(arydate[0],10);
tmpyear = parseint(arydate[1],10);
two_at = parseint(arydate[2],10);
break;
case "001":
one_at = parseint(arydate[0],10);
two_at = parseint(arydate[1],10);
tmpyear = parseint(arydate[2],10);
break;
}
tmpyear = this.getformatyear(tmpyear);
}
if (find_tag!="000"){
if ((one_at>12)&&(two_at>12)){
return(defdate);
}
if (one_at<=12){
if (two_at > this.getmonthdays(tmpyear,one_at-1)){ return(new date(tmpyear, one_at-1, this.getmonthdays(tmpyear,one_at-1)));
}
if (two_at>12){
return(new date(tmpyear, one_at-1, two_at));
}
}
if (two_at<=12){
if (one_at > this.getmonthdays(tmpyear,two_at-1)){
return(new date(tmpyear, two_at-1, this.getmonthdays(tmpyear,two_at-1)));
}
if (one_at>12){
return(new date(tmpyear, two_at-1, one_at));
}
}
if ((one_at<=12)&&(two_at<=12)){
tmpmonth = one_at-1;
tmpday = two_at;
tmpdate = this.dateformat;
month_at = tmpdate.indexof("<mmmmmm>");
if (month_at == -1){
month_at = tmpdate.indexof("<mmm>");
}
if (month_at == -1){
month_at = tmpdate.indexof("<mm>");
}
if (month_at == -1){
month_at = tmpdate.indexof("<m>");
}
day_at = tmpdate.indexof("<dd>");
if (day_at == -1){
day_at = tmpdate.indexof("<d>");
}
if (month_at >= day_at){
tmpmonth = two_at-1;
tmpday = one_at;
}
return(new date(tmpyear, tmpmonth, tmpday));
}
}
}
this.createyearlist = function(minyear, maxyear){ //create year list
var thename = this.name;
var theyearobject = document.all.item(thename + "_yearlist");
if (theyearobject == null){
return;
}
var theyear = 0;
var theyearhtml = "<select id=\"" + thename + "_yearlist\" style=\"" + this.yearliststyle + "\" tabindex=\"-1\" onchange=\"document.jsmonthview.updatemonthgrid(this)\" onblur=\"document.jsmonthview.deletemonthgrid()\">";
for (theyear = minyear; theyear <= maxyear; theyear++){
theyearhtml += "<option value=\"" + theyear.tostring() + "\">" + theyear.tostring() + "</option>";
}
theyearhtml += "</select>";
theyearobject.outerhtml = theyearhtml;
}
this.createmonthlist = function( ){ //create month list
var thename = this.name; var themonthobject = document.all.item(thename + "_monthlist");
if (themonthobject == null){
return;
}
var themonth = 0;
var themonthhtml = "<select id=\"" + thename + "_monthlist\" style=\"" + this.monthliststyle + "\" tabindex=\"-1\" onchange=\"document.jsmonthview.updatemonthgrid(this)\" onblur=\"document.jsmonthview.deletemonthgrid()\">";
for (themonth = 0; themonth < 12; themonth++){
themonthhtml += "<option value=\"" + themonth.tostring() + "\">" + this.monthname[themonth] + "</option>";
}
themonthhtml +="</select>";
themonthobject.outerhtml = themonthhtml;
}
this.setdaylist = function(theyear, themonth, theday){ //set the month view show a date
var thename = this.name;
var thedayobject = document.all.item(thename + "_daylist");
if (thedayobject == null){
return;
}
thedayobject.value = theday.tostring();
var thefirstday = new date(theyear, themonth, 1);
var thecurrentdate = new date();
var theweek = thefirstday.getday();
if (theweek == 0){
theweek = 7;
}
var theleftday = 0;
if (themonth == 0){
theleftday = 31;
}else{
theleftday = this.getmonthdays(theyear, themonth – 1);
}
var therightday = this.getmonthdays(theyear, themonth);
var thecurrentday = theleftday – theweek + 1;
var offsetmonth = -1; //the month is previous month
var thecolor = this.invalidcolor;
var thebgcolor = this.unselectbgcolor;
var thebdcolor = thebgcolor;
var weekid = 0
var dayid = 0;
var thestyle = "";
var thedayhtml = "<table width=\"100%\" height=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">";
thedayhtml += " <tr style=\"" + this.titlestyle + "\">";
for (dayid = 0; dayid < 7; dayid++){
thedayhtml += " <td width=\"10%\">" + this.weekname[dayid] + "</td>";
}
thedayhtml += " </tr>";
thedayhtml += " <tr>";
thedayhtml += " <td colspan=\"7\" style=\"" + this.linebgstyle + "\">";
thedayhtml += " <table style=\"" + this.linestyle + "\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">";
thedayhtml += " <tr><td></td></tr>";
thedayhtml += " </table>";
thedayhtml += " </td>";
thedayhtml += " </tr>";
for (weekid = 0; weekid < 6; weekid++){
thedayhtml += " <tr style=\"" + this.daystyle + "\">";
for (dayid = 0; dayid < 7; dayid++){
if ((thecurrentday > theleftday) && (weekid < 3)){
offsetmonth++; //the month is current month;
thecurrentday = 1;
}
if ((thecurrentday > therightday) && (weekid > 3)){
offsetmonth++; //the month is next month;
thecurrentday = 1;
}
switch (offsetmonth){
case -1:
thecolor = this.invalidcolor;
break;
case 1:
thecolor = this.invalidcolor;
break;
case 0:
if ((dayid==0)||(dayid==6)){
thecolor = this.weekendcolor;
}else{
thecolor = this.validcolor;
}
break;
}
if ((dayid==0)||(dayid==6)){
thebgcolor = this.weekendbgcolor;
}else{
thebgcolor = this.unselectbgcolor;
}
thebdcolor = this.daybdcolor;
if ((thecurrentday == theday) && (offsetmonth == 0)){
thecolor = this.selectedcolor;
thebgcolor = this.selectedbgcolor;
thebdcolor = thebgcolor;
}
if ((theyear == thecurrentdate.getfullyear()) && (themonth == thecurrentdate.getmonth()) && (thecurrentday == thecurrentdate.getdate()) && (offsetmonth == 0)){
thebdcolor = this.todaybdcolor;
}
thestyle = "border:" + this.daybdwidth + "px solid " + thebdcolor + "; color:" + thecolor + "; background-color:" + thebgcolor + ";";
thedayhtml += " <td style=\"" + thestyle + "\" onmouseover=\"" + this.overdaystyle + "\" onmouseout=\"" + this.outdaystyle + "\" onmousedown=\"document.jsmonthview.createmonthgrid(" + theyear.tostring() + ", " + (themonth + offsetmonth).tostring() + ", " + thecurrentday.tostring() + ")\">";
thedayhtml += thecurrentday.tostring();
thedayhtml += " </td>";
thecurrentday++;
}
thedayhtml += " </tr>";
}
thedayhtml += " <tr style=\"" + this.footerstyle + "\" onmousedown=\"document.jsmonthview.createmonthgrid(" + thecurrentdate.getfullyear().tostring() + ", " + thecurrentdate.getmonth().tostring() + ", " + thecurrentdate.getdate().tostring() + ");\">";
thestyle = "border:" + this.daybdwidth + "px solid " + this.todaybdcolor + ";";
thedayhtml += " <td style=\"" + thestyle + "\"><br></td>";
thedayhtml += " <td colspan=\"6\"> " + this.todaytitle + " " + this.setdateformat(thecurrentdate.getfullyear(), thecurrentdate.getmonth(), thecurrentdate.getdate()) + "</td>";
thedayhtml += " </tr>";
thedayhtml += " </table>";
var themonthgrid = document.all.item(thename + "_monthgrid");
themonthgrid.innerhtml = thedayhtml;
}
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 + "_yearlist\">";
thedivhtml += " </select>";
thedivhtml += " </td>";
thedivhtml += " <td>";
thedivhtml += " <select id=\"" + thename + "_monthlist\">";
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);
//insert your code, change the month view propertiy
//example:
// document.jsmonthview.dateformat = "<mmm> <d>,<yyyy>";
document.jsmonthview.initialmonthview();
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>
