js日期控件

js代码

 

< SCRIPT LANGUAGE = " JavaScript " >
<!--
// 有效的时间范围 
var  date_start,date_end,g_object
var  today  =   new  Date();
var  separator = " - " ;
var  inover = false ;
// mode :时间变换的类型0-年 1-月 2-直接选择月
function  change_date(temp,mode)
... {
 var t_month,t_year
    if (mode)...{
        if(mode==1)
        t_month=parseInt(cele_date_month.value,10)+parseInt(temp,10);
        else
        t_month=parseInt(temp)
        if (t_month<cele_date_month.options(0).text) ...{
            cele_date_month.value=cele_date_month.options(cele_date_month.length-1).text;
            change_date(parseInt(cele_date_year.value,10)-1,0);
            }
        else...{
            if (t_month>cele_date_month.options(cele_date_month.length-1).text)...{
                cele_date_month.value=cele_date_month.options(0).text;
                change_date(parseInt(cele_date_year.value,10)+1,0);
                }            
            else
                ...{cele_date_month.value=t_month;
                 set_cele_date(cele_date_year.value,cele_date_month.value);                
                }
        }
    }  
    else...{
        t_year=parseInt(temp,10);
        
        if (t_year<cele_date_year.options(0).text) ...{
            cele_date_year.value=cele_date_year.options(0).text;
            set_cele_date(cele_date_year.value,1);                
            }
        else...{
            if (parseInt(t_year,10)>parseInt(cele_date_year.options(cele_date_year.length-1).text,10))...{
                cele_date_year.value=cele_date_year.options(cele_date_year.length-1).text;
                set_cele_date(cele_date_year.value,12);                
                }            
            else
                ...{cele_date_year.value=t_year;
                 set_cele_date(cele_date_year.value,cele_date_month.value);                
                }
        }
    }
    /**//*2002-02-01 MODIFY BY John */
    window.cele_date.focus();
    /**//*MODIFY END*/
}

 

// 初始化日历
function  init(d_start,d_end)
... {
     var temp_str;
     var i=0
     var j=0
     date_start=new Date(2000,7,1)
     date_end=new Date(2004,8,1)
     
     //必须要有内容（奇怪）
     /**//*2002-02-01 MODIFY BY John */
     document.writeln("<div name="cele_date" id="cele_date"  style="display:none"    style="LEFT: 69px; POSITION: absolute; TOP: 159px;Z-INDEX:99" onClick="event.cancelBubble=true;" onBlur="hilayer()" onMouseout="lostlayerfocus()">? </div>");
     /**//*MODIFY END*/
     window.cele_date.innerHTML="";
     temp_str="<table border="2" bgcolor="#D66939" bordercolor="#000000"><tr align="center"><td colspan=7 bordercolor="#D66939" οnmοuseοver="overcolor(this)">";
     temp_str+="<input type="Button" value="<<" οnclick="change_date(-1,1)" οnmοuseοver="getlayerfocus()" style="color: #FFFFFF; background-color: #A52810; font-family:宋体;font-size:10px;text-align:center;border:2 solid #A52810; cursor: hand">";//左面的箭头，#ffffff是<<显示的颜色，#A52810是背景按钮的颜色

 

     /**//*2002-02-01 MODIFY BY John */
     /**//*temp_str+="<input type="Button" value="<<" οnclick="change_date(-1,1)" >?";//左面的箭头                                */
     /**//**/
     
     temp_str+=""//年 
     temp_str+="<select name="cele_date_year" id="cele_date_year" language="javascript" οnchange="change_date(this.value,0)" οnmοuseοver="getlayerfocus()" οnblur="getlayerfocus()" style="font-size: 9pt; border: 0px #ffffff outset; background-color: #F4F8FB">"//#F4F8FB设置年下拉选择框的颜色为白色

 

     /**//*2002-02-01 MODIFY BY John */
     /**//*temp_str+="<select name="cele_date_year" id="cele_date_year" language="javascript" οnchange="change_date(this.value,0)">" */
     /**//**/

 

     for (i=2001;i<=2009;i++)
     ...{
     temp_str+="<OPTION value=""+i.toString()+"">"+i.toString()+"</OPTION>";
     }
     temp_str+="</select>";
     temp_str+=""//月
     temp_str+="<select name="cele_date_month" id="cele_date_month" language="javascript" οnchange="change_date(this.value,2)" οnmοuseοver="getlayerfocus()" οnblur="getlayerfocus()" style="font-size: 9pt; border: 0px #666666 outset; background-color: #F4F8FB">"//#F4F8FB设置月下拉选择框的颜色为白色

 

     /**//*2002-02-01 MODIFY BY WING **/
     /**//*temp_str+="<select name="cele_date_month" id="cele_date_month" language="javascript" οnchange="change_date(this.value,2)">" */
     /**//**/

 

     for (i=1;i<=12;i++)
     ...{
     temp_str+="<OPTION value=""+i.toString()+"">"+i.toString()+"</OPTION>";
     }
     temp_str+="</select>";
     temp_str+=""//右箭头
     temp_str+="<input type="Button" value=">>" οnclick="change_date(1,1)" οnmοuseοver="getlayerfocus()"  style="color: #FFFFFF; background-color: #A52810; font-family:宋体;font-size:10px;text-align:center;border:2 solid #A52810; cursor: hand">";//#FFFFFF设置月右移双箭头的颜色为白色，#A52810设置月右移双箭头的背景色

 

     /**//*2002-02-01 MODIFY BY WING ***/
     /**//*temp_str+="<input type="Button" value=">>" οnclick="change_date(1,1)">";                                                    */
     /**//**/


     //151行 #000000设置最初显示的日期数字的颜色
     temp_str+="</td></tr><tr bordercolor="#D66939"><td οnmοuseοver="overcolor(this)">"
     temp_str+="<font color=white>Su</font></td><td>";
  temp_str+="<font color=white>Mo</td><td>"; temp_str+="<font color=white>Tu</td><td>"; temp_str+="<font color=white>We</td><td>"
     temp_str+="<font color=white>Th</td><td>";temp_str+="<font color=white>Fr</td><td>"; temp_str+="<font color=white>Sa</td></tr>";
     for (i=1 ;i<=6 ;i++)
     ...{
     temp_str+="<tr bordercolor="#A52810">";
        for(j=1;j<=7;j++)...{
            temp_str+="<td name="c"+i+"_"+j+""id="c"+i+"_"+j+"" style="CURSOR: hand" style="COLOR:#ffffff" language="javascript" οnmοuseοver="overcolor(this)" οnmοuseοut="outcolor(this)" οnclick="td_click(this)">?</td>"
            }
     temp_str+="</tr>"        
     }
     temp_str+="</td></tr></table>";
     window.cele_date.innerHTML=temp_str;
}
function  set_cele_date(year,month)
... {
   var i,j,p,k
   var nd=new Date(year,month-1,1);
   event.cancelBubble=true;
   cele_date_year.value=year;
   cele_date_month.value=month;   
   k=nd.getDay()-1
   var temp;
   for (i=1;i<=6;i++)
      for(j=1;j<=7;j++)
      ...{
      eval("c"+i+"_"+j+".innerHTML=""");
      eval("c"+i+"_"+j+".bgColor="#9C2810"");//#9C2810设置数字的背景色
      eval("c"+i+"_"+j+".style.cursor="hand"");
      }
   while(month-1==nd.getMonth())
    ...{ j=(nd.getDay() +1);
      p=parseInt((nd.getDate()+k) / 7)+1;
      eval("c"+p+"_"+j+".innerHTML="+"""+nd.getDate()+""");
      if ((nd.getDate()==today.getDate())&&(cele_date_month.value==today.getMonth()+1)&&(cele_date_year.value==today.getYear()))...{
        eval("c"+p+"_"+j+".bgColor="#6B0000"");//#6B0000设置当前日期的颜色
      }
      if (nd>date_end || nd<date_start)
      ...{
      eval("c"+p+"_"+j+".bgColor="#FF9999"");
      eval("c"+p+"_"+j+".style.cursor="text"");
      }
      nd=new Date(nd.valueOf() + 86400000)
    }
}

 

// s_object：点击的对象；d_start-d_end有效的时间区段；需要存放值的控件；
function  show_cele_date(eP,d_start,d_end,t_object)
... {
window.cele_date.style.display="";
window.cele_date.style.zIndex=99
var s,cur_d
var eT = eP.offsetTop;  
var eH = eP.offsetHeight+eT;  
var dH = window.cele_date.style.pixelHeight;  
var sT = document.body.scrollTop; 
var sL = document.body.scrollLeft; 
event.cancelBubble=true;
window.cele_date.style.posLeft = event.clientX-event.offsetX+sL-5;  
window.cele_date.style.posTop = event.clientY-event.offsetY+eH+sT-5;
if (window.cele_date.style.posLeft+window.cele_date.clientWidth>document.body.clientWidth) window.cele_date.style.posLeft+=eP.offsetWidth-window.cele_date.clientWidth;
//if (window.cele_date.style.posTop+window.cele_date.clientHeight>document.body.clientHeight) window.cele_date.style.posTop-=(eP.offsetHeight+window.cele_date.clientHeight+5);
if (d_start!="")...{
    if (d_start=="today")...{
        date_start=new Date(today.getYear(),today.getMonth(),today.getDate());
    }else...{
        s=d_start.split(separator);
        date_start=new Date(s[0],s[1]-1,s[2]);
    }
}else...{
    date_start=new Date(1900,1,1);
}

 

if (d_end!="")...{
    s=d_end.split(separator);
    date_end=new Date(s[0],s[1]-1,s[2]);
}else...{
    date_end=new Date(3000,1,1);
}

 

g_object=t_object

 

cur_d=new Date()
set_cele_date(cur_d.getYear(),cur_d.getMonth()+1);
window.cele_date.style.display="block";
/**//***************2002-02-01 MODIFY BY WING ***********/
window.cele_date.focus();
/**//*MODIFY END*/
}
function  td_click(t_object)
... {
var t_d
if (parseInt(t_object.innerHTML,10)>=1 && parseInt(t_object.innerHTML,10)<=31 ) 
...{ t_d=new Date(cele_date_year.value,cele_date_month.value-1,t_object.innerHTML)
if (t_d<=date_end && t_d>=date_start)
...{
var year = cele_date_year.value;
var month = cele_date_month.value;
var day = t_object.innerHTML;
if (parseInt(month)<10) month = "0" + month;
if (parseInt(day)<10) day = "0" + day;

 

g_object.value=year+separator+month+separator+day;
window.cele_date.style.display="none";};
}

 

}
function  h_cele_date()
... {
window.cele_date.style.display="none";
}

 

function  overcolor(obj)
... {
  if (obj.style.cursor=="hand") obj.style.color = "#FFFFFF";//#FFFFFF设置鼠标经过日期数字时的颜色
  /**//*********** 2002-02-01 MODIFY BY WING *****/
  inover=true;
  window.cele_date.focus();
  /**//* MODIFY END */
}

 

function  outcolor(obj)
... {
  obj.style.color = "#dddddd";//000000设置鼠标离开日期数字后的颜色
  /**//*********** 2002-02-01 MODIFY BY WING *****/
  inover=false;
  /**//*MODIFY END */
}

function  getNow(o) ... {
    var Stamp=new Date();
    var year = Stamp.getYear();
    var month = Stamp.getMonth()+1;
    var day = Stamp.getDate();
    if(month<10)...{
 month="0"+month;
    }
    if(day<10)...{
 day="0"+day;
    }
    o.value=year+separator+month+separator+day;
}
/**/ /*********** 2002-02-01 MODIFY BY WING **ADD THREE FUNCTION TO CONTROL THE DIV FOCUS***/
function  hilayer()
... {
 if (inover==false)
 ...{
  var lay=document.all.cele_date;
  lay.style.display="none";
 }
}
function  getlayerfocus()
... {
 inover=true;
}
function  lostlayerfocus()
... {
 inover=false;
}
/**/ /****MODIFY END**/
// -->
</ SCRIPT >< script language = " javascript " >
         init();
</ script >

 页面代码：

 

< table  cellspacing ="3"  cellpadding ="5"  align ="center"  bgcolor ="#ff731f"  border ="0" >
     < tbody >
         < tr >
             < td  bgcolor ="#eeeeee"  colspan ="6" >
             < table  cellspacing ="3"  cellpadding ="5"  width ="100%"  align ="center"  bgcolor ="#ff731f"  border ="0" >
                 < tbody >
                     < tr >
                         < td  height ="10" > &nbsp; </ td >
                     </ tr >
                     < tr >
                         < td  align ="center" >
                         < h2 >< font  color ="#ffffff" > Welcome to AdTracking Report Application Management! </ font ></ h2 >
                         </ td >
                     </ tr >
                 </ tbody >
             </ table >
             < table  cellspacing ="0"  cellpadding ="0"  width ="100%"  align ="center"  bgcolor ="#ffffff"  border ="0" >
                 < form  id ="inputdate"  action ="AdReport"  method ="post"  name ="inputdate" >
                     < tbody >
                         < tr  bgcolor ="#ffffff" >
                             < td  class ="clearance"  align ="center"  width ="6%" > From:  </ td >
                             < td  width ="27%" >< input  readonly ="readonly"  maxlength ="11"  size ="15"  name ="statr_Update_Date"   />   < input  onclick ="show_cele_date(change2,'','',statr_Update_Date)"  type ="button"  name ="change22"  value ="select date"   /></ td >
                             < td  class ="clearance"  align ="center"  width ="4%" > To:  </ td >
                             < td  width ="25%" >< input  readonly ="readonly"  maxlength ="11"  size ="15"  name ="Last_Update_Date"   />   < input  onclick ="show_cele_date(change2,'','',Last_Update_Date)"  type ="button"  name ="change2"  value ="select date"   /></ td >
                         </ tr >
                     </ tbody >
                 </ form >
             </ table >
             </ td >
         </ tr >
     </ tbody >
</ table >

 

样式表：

 

<style type="text/css">


<!--
body,td,th  {...} {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #666666;
}
body  {...} {
 background-color: #333333;
 margin-left: 0px;
 margin-top: 20px;
 margin-right: 0px;
 margin-bottom: 0px;
}
--></style>