非常好用的日期选择器建议入精华《二》

4。calendar.js
var gdCtrl = new Object();
var goSelectTag = new Array();
var gcGray = "#808080";
var gcToggle = "#ffff00";
var gcBG = "#99CCFF";
var previousObject = null;

var gdCurDate = new Date();
var giYear = gdCurDate.getFullYear();
var giMonth = gdCurDate.getMonth()+1;
var giDay = gdCurDate.getDate();

var gCalMode = "";
var gCalDefDate = "";

var CAL_MODE_NOBLANK = "2";

function fSetDate(iYear, iMonth, iDay){
  //VicPopCal.style.visibility = "hidden";
  if ((iYear == 0) && (iMonth == 0) && (iDay == 0)){
      gdCtrl.value = "";
  }else{
      iMonth = iMonth + 100 + "";
      iMonth = iMonth.substring(1);
      iDay   = iDay + 100 + "";
      iDay   = iDay.substring(1);
      gdCtrl.value = iYear+"-"+iMonth+"-"+iDay;
  }
  
  for (i in goSelectTag)
      goSelectTag[i].style.visibility = "visible";
  goSelectTag.length = 0;
  
  window.returnValue=gdCtrl.value;
  window.close();
}

function HiddenDiv()
{
    var i;
  VicPopCal.style.visibility = "hidden";
  for (i in goSelectTag)
      goSelectTag[i].style.visibility = "visible";
  goSelectTag.length = 0;

}
function fSetSelected(aCell){
  var iOffset = 0;
  var iYear = parseInt(tbSelYear.value);
  var iMonth = parseInt(tbSelMonth.value);
  
  aCell.bgColor = gcBG;
  with (aCell.children["cellText"]){
      var iDay = parseInt(innerText);
      if (color==gcGray)
        iOffset = (Victor<10)?-1:1;

    /*** below temp patch by maxiang ***/
    if( color == gcGray ){
        iOffset = (iDay < 15 )?1:-1;
    }
    /*** above temp patch by maxiang ***/

    iMonth += iOffset;
    if (iMonth<1) {
        iYear--;
        iMonth = 12;
    }else if (iMonth>12){
        iYear++;
        iMonth = 1;
    }
  }
  fSetDate(iYear, iMonth, iDay);
}

function Point(iX, iY){
    this.x = iX;
    this.y = iY;
}

function fBuildCal(iYear, iMonth) {
  var aMonth=new Array();
  for(i=1;i<7;i++)
      aMonth[i]=new Array(i);
  
  var dCalDate=new Date(iYear, iMonth-1, 1);
  var iDayOfFirst=dCalDate.getDay();
  var iDaysInMonth=new Date(iYear, iMonth, 0).getDate();
  var iOffsetLast=new Date(iYear, iMonth-1, 0).getDate()-iDayOfFirst+1;
  var iDate = 1;
  var iNext = 1;

  for (d = 0; d < 7; d++)
    aMonth[1][d] = (d<iDayOfFirst)?-(iOffsetLast+d):iDate++;
  for (w = 2; w < 7; w++)
      for (d = 0; d < 7; d++)
        aMonth[w][d] = (iDate<=iDaysInMonth)?iDate++:-(iNext++);
  return aMonth;
}

function fDrawCal(iYear, iMonth, iCellHeight, sDateTextSize) {
  var WeekDay = new Array("日","一","二","三","四","五","六");
  var styleTD = " bgcolor=@#"+gcBG+"@# bordercolor=@#"+gcBG+"@# valign=@#middle@# align=@#center@# height=@#"+iCellHeight+"@# style=@#font-size:12px; ";

  with (document) {
    write("<tr>");
    for(i=0; i<7; i++)
        write("<td "+styleTD+" color:#990099@# >" + WeekDay[i] + "</td>");
    write("</tr>");

      for (w = 1; w < 7; w++) {
        write("<tr>");
        for (d = 0; d < 7; d++) {
            write("<td id=calCell "+styleTD+"cursor:hand;@# onMouseOver=@#this.bgColor=gcToggle@# onMouseOut=@#this.bgColor=gcBG@# onclick=@#fSetSelected(this)@#>");
            write("<font id=cellText ><b> </b></font>");
            write("</td>")
        }
        write("</tr>");
    }
  }
}

function fUpdateCal(iYear, iMonth) {
  myMonth = fBuildCal(iYear, iMonth);
  var i = 0;
  for (w = 0; w < 6; w++)
    for (d = 0; d < 7; d++)
        with (cellText[(7*w)+d]) {
            Victor = i++;
            if (myMonth[w+1][d]<0) {
                color = gcGray;
                innerText = -myMonth[w+1][d];
            }else{
                // Modified by maxiang for we need
                // Saturday displayed in blue font color.
                //color = ((d==0)||(d==6))?"red":"black";
                if( d == 0 ){
                    color = "red";
                }else if( d == 6 ){
                    color = "blue";
                }else{
                    color = "black";
                }
                // End of above maxiang
                innerText = myMonth[w+1][d];
            }
        }
}

function fSetYearMon(iYear, iMon){
  tbSelMonth.options[iMon-1].selected = true;
  for (i = 0; i < tbSelYear.length; i++)
    if (tbSelYear.options[i].value == iYear)
        tbSelYear.options[i].selected = true;
  fUpdateCal(iYear, iMon);
}

function fPrevMonth(){
  var iMon = tbSelMonth.value;
  var iYear = tbSelYear.value;
  
  if (--iMon<1) {
      iMon = 12;
      iYear--;
  }
  
  fSetYearMon(iYear, iMon);
}

function fNextMonth(){
  var iMon = tbSelMonth.value;
  var iYear = tbSelYear.value;
  
  if (++iMon>12) {
      iMon = 1;
      iYear++;
  }
  
  fSetYearMon(iYear, iMon);
}

function fToggleTags(){
  with (document.all.tags("SELECT")){
     for (i=0; i<length; i++)
         if ((item(i).Victor!="Won")&&fTagInBound(item(i))){
             item(i).style.visibility = "hidden";
             goSelectTag[goSelectTag.length] = item(i);
         }
  }
}

function fTagInBound(aTag){
  with (VicPopCal.style){
      var l = parseInt(left);
      var t = parseInt(top);
      var r = l+parseInt(width);
      var b = t+parseInt(height);
    var ptLT = fGetXY(aTag);
    return !((ptLT.x>r)||(ptLT.x+aTag.offsetWidth<l)||(ptLT.y>b)||(ptLT.y+aTag.offsetHeight<t));
  }
}

function fGetXY(aTag){
  var oTmp = aTag;
  var pt = new Point(0,0);
  do {
      pt.x += oTmp.offsetLeft;
      pt.y += oTmp.offsetTop;
      oTmp = oTmp.offsetParent;
  } while(oTmp.tagName!="BODY");
  return pt;
}

// Main: popCtrl is the widget beyond which you want this calendar to appear;
//       dateCtrl is the widget into which you want to put the selected date.
// i.e.: <input type="text" name="dc" style="text-align:center" readonly><INPUT type="button" value="V" onclick="fPopCalendar(dc,dc);return false">
function fPopCalendar(popCtrl, dateCtrl, mode, defDate){
    gCalMode = mode;
    gCalDefDate = defDate;
    
  if (popCtrl == previousObject){
          if (VicPopCal.style.visibility == "visible"){
          //HiddenDiv();
          return true;
      }
      
  }
  previousObject = popCtrl;
  gdCtrl = dateCtrl;
  fSetYearMon(giYear, giMonth);
  var point = fGetXY(popCtrl);

    if( gCalMode == CAL_MODE_NOBLANK ){
        document.all.CAL_B_BLANK.style.visibility = "hidden";    
    }else{
        document.all.CAL_B_BLANK.style.visibility = "visible";
    }    

  with (VicPopCal.style) {
      left = point.x;
    top  = point.y+popCtrl.offsetHeight;
    width = VicPopCal.offsetWidth;
    height = VicPopCal.offsetHeight;
    fToggleTags(point);     
    visibility = @#visible@#;
  }
}

var gMonths = new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");

with (document) {
write("<Div id=@#VicPopCal@# style=@#OVERFLOW:hidden;POSITION:absolute;VISIBILITY:hidden;border:0px ridge;width:100%;height:100%;top:0;left:0;z-index:100;overflow:hidden@#>");
write("<table border=@#0@# bgcolor=@##3366CC@#>");
write("<TR>");
write("<td valign=@#middle@# align=@#center@#><input type=@#button@# name=@#PrevMonth@# value=@#<@# style=@#height:20;width:20;FONT:bold@# onClick=@#fPrevMonth()@#>");
write(" <SELECT name=@#tbSelYear@# onChange=@#fUpdateCal(tbSelYear.value, tbSelMonth.value)@# Victor=@#Won@#>");
for(i=1930;i<2006;i++)
    write("<OPTION value=@#"+i+"@#>"+i+"年</OPTION>");
write("</SELECT>");
write(" <select name=@#tbSelMonth@# onChange=@#fUpdateCal(tbSelYear.value, tbSelMonth.value)@# Victor=@#Won@#>");
for (i=0; i<12; i++)
    write("<option value=@#"+(i+1)+"@#>"+gMonths[i]+"</option>");
write("</SELECT>");
write(" <input type=@#button@# name=@#PrevMonth@# value=@#>@# style=@#height:20;width:20;FONT:bold@# onclick=@#fNextMonth()@#>");
write("</td>");
write("</TR><TR>");
write("<td align=@#center@#>");
write("<DIV style=@#background-color:#000066@#><table width=@#100%@# border=@#0@#>");
fDrawCal(giYear, giMonth, 8, @#12@#);
write("</table></DIV>");
write("</td>");
write("</TR><TR><TD align=@#center@#>");
write("<TABLE width=@#100%@#><TR><TD align=@#center@#>");
write("<B ID=\"CAL_B_BLANK\" style=@#color:"+gcBG+"; visibility:visible; cursor:hand; font-size:12px@# onclick=@#fSetDate(0,0,0)@# onMouseOver=@#this.style.color=gcToggle@# onMouseOut=@#this.style.color=gcBG@#>清空</B>");
write("</td><td algin=@#center@#>");
write("<B style=@#color:"+gcBG+";cursor:hand; font-size:12px@# onclick=@#fSetDate(giYear,giMonth,giDay)@# onMouseOver=@#this.style.color=gcToggle@# onMouseOut=@#this.style.color=gcBG@#>选择: "+giYear+"/"+giMonth+"/"+giDay+"</B>");
write("</td></tr></table>");
write("</TD></TR>");
write("</TABLE></Div>");
}
5。cele_date.js
//有效的时间范围
var date_start,date_end,g_object
var today = new Date();

//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);                
                }
        }
    }
}

//初始化日历
function init(d_start,d_end)
{
      var temp_str;
     var i=0
     var j=0
     date_start=new Date(1995,1,1)
     date_end=new Date(2010,12,31)
     
     //必须要有内容（奇怪）
     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;\">  </div>");
     
     
     window.cele_date.innerHTML="";
     temp_str="<table border=\"1\" bgcolor=\"#87C2FE\" bordercolor=\"white\"><tr><td colspan=7>";
     temp_str+="<input type=\"Button\" value=\"<<\" onclick=\"change_date(-1,1)\" > ";//左面的箭头
     temp_str+=""//年
     temp_str+="<select name=\"cele_date_year\" id=\"cele_date_year\" language=\"javascript\" onchange=\"change_date(this.value,0)\">"
     for (i=1995;i<=2010;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\" onchange=\"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=\">>\" onclick=\"change_date(1,1)\" >";
     temp_str+="</td></tr><tr><td>"
     temp_str+="<font color=red>Su</font></td><td>";temp_str+="Mo</td><td>"; temp_str+="Tu</td><td>"; temp_str+="We</td><td>"
     temp_str+="Th</td><td>";temp_str+="Fr</td><td>"; temp_str+="Sa</td></tr>";
     for (i=1 ;i<=6 ;i++)
     {
     temp_str+="<tr>";
        for(j=1;j<=7;j++){
            temp_str+="<td name=\"c"+i+"_"+j+"\"id=\"c"+i+"_"+j+"\" style=\"CURSOR: hand\" style=\"COLOR:#000000\" language=\"javascript\" onmouseover=\"overcolor(this)\" onmouseout=\"outcolor(this)\" onclick=\"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=\"#87C2FE\"");
      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=\"#00ff00\"");
      }
      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("-");
        date_start=new Date(s[0],s[1]-1,s[2]);
    }
}else{
    date_start=new Date(1900,1,1);
}

if (d_end!=""){
    if (d_end=="today"){
        date_end=new Date(today.getYear(),today.getMonth(),today.getDate());
    }else{
        s=d_end.split("-");
        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";
}
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+"-"+month+"-"+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";
}

function outcolor(obj)
{
  obj.style.color = "#000000";
}


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+"-"+month+"-"+day;
}
6。fPopUpCalendarDlg.js


function fPopUpCalendarDlg(ctrlobj)
{
    showx = event.screenX - event.offsetX - 4 - 10 ; // + deltaX;
    showy = event.screenY - event.offsetY -168; // + deltaY;
    newWINwidth = 210 + 4 + 18;

    retval = window.showModalDialog("Calendar.htm", "", "dialogWidth:197px; dialogHeight:210px; dialogLeft:"+showx+"px; dialogTop:"+showy+"px; status:no; directories:yes;scrollbars:no;Resizable=no; "  );
    if( retval != null ){
        ctrlobj.value = retval;
    }else{
        //alert("canceled");
    }
}


结束

演示： http://www.cnaspol.com/selectdate/selectdate.html

原文转自：http://www.ltesting.net