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

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