4个很不错的日历代码

样式一:

<Script LANGUAGE="JavaScript">
 var months = new Array("一", "二", "三","四", "五", "六", "七", "八", "九","十", "十一", "十二");
 var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31,30, 31, 30, 31);
 var days = new Array("日","一", "二", "三","四", "五", "六");
 var classTemp;
 var today=new getToday();
 var year=today.year;
 var month=today.month;
 var newCal; 
 function getDays(month, year) {
  if (1 == month) return ((0 == year % 4) && (0 != (year % 100))) ||(0 == year % 400) ? 29 : 28;
  else return daysInMonth[month];
 }
 function getToday() {
  this.now = new Date();
  this.year = this.now.getFullYear();
  this.month = this.now.getMonth();
  this.day = this.now.getDate();
 }
 function Calendar() {
  newCal = new Date(year,month,1);
  today = new getToday();   
  var day = -1;
  var startDay = newCal.getDay();
  var endDay=getDays(newCal.getMonth(), newCal.getFullYear());
  var daily = 0;
  if ((today.year == newCal.getFullYear()) &&(today.month == newCal.getMonth()))
  {
   day = today.day;
  }
  var caltable = document.all.caltable.tBodies.calendar;
  var intDaysInMonth =getDays(newCal.getMonth(), newCal.getFullYear());
  for (var intWeek = 0; intWeek < caltable.rows.length;intWeek++)
   for (var intDay = 0;intDay < caltable.rows[intWeek].cells.length;intDay++)
   {
    var cell = caltable.rows[intWeek].cells[intDay];
    var montemp=(newCal.getMonth()+1)<10?("0"+(newCal.getMonth()+1)):(newCal.getMonth()+1);         
    if ((intDay == startDay) && (0 == daily)){ daily = 1;}
    var daytemp=daily<10?("0"+daily):(daily);
    var d="<"+newCal.getFullYear()+"-"+montemp+"-"+daytemp+">";
    if(day==daily) cell.className="DayNow";
    else if(intDay==6) cell.className = "DaySat";
    else if (intDay==0) cell.className ="DaySun";
    else cell.className="Day";
    if ((daily > 0) && (daily <= intDaysInMonth))
    {
     cell.innerText = daily;
     daily++;
    } else
    {
     cell.className="CalendarTD";
     cell.innerText = "";
    }
  }
  document.all.year.value=year;
  document.all.month.value=month+1;
 }
 function subMonth()
 {
  if ((month-1)<0)
  {
   month=11;
   year=year-1;
  } else
  {
   month=month-1;
  }
  Calendar();
 }
 function addMonth()
 {
  if((month+1)>11)
  {
   month=0;
   year=year+1;
  } else
  {
   month=month+1;
  }
  Calendar();
 }
 function setDate() 
 {
  if (document.all.month.value<1||document.all.month.value>12)
  {
   alert("月的有效范围在1-12之间!");
   return;
  }
  year=Math.ceil(document.all.year.value);
  month=Math.ceil(document.all.month.value-1);
  Calendar();
 }
</Script>
<Script>
function buttonOver()
{
 var obj = window.event.srcElement;
 obj.runtimeStyle.cssText = "background-color:#FFFFFF";
// obj.className="Hover";
}
function buttonOut()
{
 var obj = window.event.srcElement;
 window.setTimeout(function(){obj.runtimeStyle.cssText = "";},300);
}
</Script>
<Style>
Input {font-family: verdana;font-size: 9pt;text-decoration: none;background-color: #FFFFFF;height: 20px;border: 1px solid #666666;color:#000000;}
.Calendar {font-family: verdana;text-decoration: none;width: 170;background-color: #C0D0E8;font-size: 9pt;border:0px dotted #1C6FA5;}
.CalendarTD {font-family: verdana;font-size: 7pt;color: #000000;background-color:#f6f6f6;height: 20px;width:11%;text-align: center;}
.Title {font-family: verdana;font-size: 11pt;font-weight: normal;height: 24px;text-align: center;color: #333333;text-decoration: none;background-color: #A4B9D7;border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-bottom-style:1px;border-top-color: #999999;border-right-color: #999999;border-bottom-color: #999999;border-left-color: #999999;}
.Day {font-family: verdana;font-size: 7pt;color:#243F65;background-color: #E5E9F2;height: 20px;width:11%;text-align: center;}
.DaySat {font-family: verdana;font-size: 7pt;color:#FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 12%;}
.DaySun {font-family: verdana;font-size: 7pt;color: #FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 12%;}
.DayNow {font-family: verdana;font-size: 7pt;font-weight: bold;color: #000000;background-color: #FFFFFF;height: 20px;text-align: center;}
.DayTitle {font-family: verdana;font-size: 9pt;color: #000000;background-color: #C0D0E8;height: 20px;width:11%;text-align: center;}
.DaySatTitle {font-family: verdana;font-size: 9pt;color:#FF0000;text-decoration: none;background-color:#C0D0E8;text-align: center;height: 20px;width: 12%;}
.DaySunTitle {font-family: verdana;font-size: 9pt;color: #FF0000;text-decoration: none;background-color: #C0D0E8;text-align: center;height: 20px;width: 12%;}
.DayButton {font-family: Webdings;font-size: 9pt;font-weight: bold;color: #243F65;cursor:hand;text-decoration: none;}
</Style>
<table border="0" cellpadding="0" cellspacing="1" class="Calendar" id="caltable">
<thead>
     <tr align="center" valign="middle"> 
  <td colspan="7" class="Title">
   <a href="javaScript:subMonth();" title="上一月" Class="DayButton">3</a> <input name="year" type="text" size="4" maxlength="4" onkeydown="if (event.keyCode==13){setDate()}" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')"  onpaste="this.value=this.value.replace(/[^0-9]/g,'')"> 年 <input name="month" type="text" size="1" maxlength="2" onkeydown="if (event.keyCode==13){setDate()}" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')"  onpaste="this.value=this.value.replace(/[^0-9]/g,'')"> 月 <a href="JavaScript:addMonth();" title="下一月" Class="DayButton">4</a>
  </td>
 </tr>
 <tr align="center" valign="middle"> 
  <Script LANGUAGE="JavaScript">  
   document.write("<TD class=DaySunTitle id=diary >" + days[0] + "</TD>"); 
   for (var intLoop = 1; intLoop < days.length-1;intLoop++) 
    document.write("<TD class=DayTitle id=diary>" + days[intLoop] + "</TD>"); 
    document.write("<TD class=DaySatTitle id=diary>" + days[intLoop] + "</TD>"); 
  </Script>
 </TR> 
</thead>
<TBODY border=1 cellspacing="0" cellpadding="0" ID="calendar" ALIGN=CENTER ONCLICK="getDiary()">
 <Script LANGUAGE="JavaScript">
  for (var intWeeks = 0; intWeeks < 6; intWeeks++)
  {
   document.write("<TR style='cursor:hand'>");
   for (var intDays = 0; intDays < days.length;intDays++) document.write("<TD class=CalendarTD onMouseover='buttonOver();' onMouseOut='buttonOut();'></TD>");
   document.write("</TR>");
  } 
 </Script>
</TBODY>
</TABLE>
<Script  LANGUAGE="JavaScript">
 Calendar();
</Script>

样式二:

<script language=javascript>
var DS_x,DS_y;
function dateSelector()  //构造dateSelector对象，用来实现一个日历形式的日期输入框。
{
  var myDate=new Date();
  this.year=myDate.getFullYear();  //定义year属性，年份，默认值为当前系统年份。
  this.month=myDate.getMonth()+1;  //定义month属性，月份，默认值为当前系统月份。
  this.date=myDate.getDate();  //定义date属性，日，默认值为当前系统的日。
  this.inputName='';  //定义inputName属性，即输入框的name，默认值为空。注意：在同一页中出现多个日期输入框，不能有重复的name！
  this.display=display;  //定义display方法，用来显示日期输入框。
}
function display()  //定义dateSelector的display方法，它将实现一个日历形式的日期选择框。
{
  var week=new Array('日','一','二','三','四','五','六');
  document.write("<style type=text/css>");
  document.write("  .ds_font td,span  { font: normal 12px 宋体; color: #000000; }");
  document.write("  .ds_border  { border: 1px solid #000000; cursor: hand; background-color: #DDDDDD }");
  document.write("  .ds_border2  { border: 1px solid #000000; cursor: hand; background-color: #DDDDDD }");
  document.write("</style>");
  document.write("<input style='text-align:center;' id='DS_"+this.inputName+"' name='"+this.inputName+"' value='"+this.year+"-"+this.month+"-"+this.date+"' title=双击可进行编缉 ondblclick='this.readOnly=false;this.focus()' onblur='this.readOnly=true' readonly>");
  document.write("<button style='width:60px;height:18px;font-size:12px;margin:1px;border:1px solid #A4B3C8;background-color:#DFE7EF;' type=button onclick=this.nextSibling.style.display='block' onfocus=this.blur()>选择日期</button>");
  document.write("<div style='position:absolute;display:none;text-align:center;width:0px;height:0px;overflow:visible' onselectstart='return false;'>");
  document.write("  <div style='position:absolute;left:-60px;top:20px;width:142px;height:165px;background-color:#F6F6F6;border:1px solid #245B7D;' class=ds_font>");
  document.write("    <table cellpadding=0 cellspacing=1 width=140 height=20 bgcolor=#CEDAE7 onmousedown='DS_x=event.x-parentNode.style.pixelLeft;DS_y=event.y-parentNode.style.pixelTop;setCapture();' onmouseup='releaseCapture();' onmousemove='dsMove(this.parentNode)' style='cursor:move;'>");
  document.write("      <tr align=center>");
  document.write("        <td width=12% onmouseover=this.className='ds_border' onmouseout=this.className='' onclick=subYear(this) title='减小年份'><<</td>");
  document.write("        <td width=12% onmouseover=this.className='ds_border' onmouseout=this.className='' onclick=subMonth(this) title='减小月份'><</td>");
  document.write("        <td width=52%><b>"+this.year+"</b><b>年</b><b>"+this.month+"</b><b>月</b></td>");
  document.write("        <td width=12% onmouseover=this.className='ds_border' onmouseout=this.className='' onclick=addMonth(this) title='增加月份'>></td>");
  document.write("        <td width=12% onmouseover=this.className='ds_border' onmouseout=this.className='' onclick=addYear(this) title='增加年份'>>></td>");
  document.write("      </tr>");
  document.write("    </table>");
  document.write("    <table cellpadding=0 cellspacing=0 width=140 height=20 onmousedown='DS_x=event.x-parentNode.style.pixelLeft;DS_y=event.y-parentNode.style.pixelTop;setCapture();' onmouseup='releaseCapture();' onmousemove='dsMove(this.parentNode)' style='cursor:move;'>");
  document.write("      <tr align=center>");
  for(i=0;i<7;i++)
 document.write("      <td>"+week[i]+"</td>");
  document.write("      </tr>");
  document.write("    </table>");
  document.write("    <table cellpadding=0 cellspacing=2 width=140 bgcolor=#EEEEEE>");
  for(i=0;i<6;i++)
  {
    document.write("    <tr align=center>");
 for(j=0;j<7;j++)
      document.write("    <td width=10% height=16 onmouseover=if(this.innerText!=''&&this.className!='ds_border2')this.className='ds_border' onmouseout=if(this.className!='ds_border2')this.className='' onclick=getvalue(this,document.all('DS_"+this.inputName+"'))></td>");
    document.write("    </tr>");
  }
  document.write("    </table>");
  document.write("    <span style=cursor:hand onclick=this.parentNode.parentNode.style.display='none'>【关闭】</span>");
  document.write("  </div>");
  document.write("</div>");
  dateShow(document.all("DS_"+this.inputName).nextSibling.nextSibling.childNodes[0].childNodes[2],this.year,this.month)
}
function subYear(obj)  //减小年份
{
  var myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes;
  myObj[0].innerHTML=eval(myObj[0].innerHTML)-1;
  dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML),eval(myObj[2].innerHTML))
}
function addYear(obj)  //增加年份
{
  var myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes;
  myObj[0].innerHTML=eval(myObj[0].innerHTML)+1;
  dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML),eval(myObj[2].innerHTML))
}
function subMonth(obj)  //减小月份
{
  var myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes;
  var month=eval(myObj[2].innerHTML)-1;
  if(month==0)
  {
    month=12;
    subYear(obj);
  }
  myObj[2].innerHTML=month;
  dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML),eval(myObj[2].innerHTML))
}
function addMonth(obj)  //增加月份
{
  var myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes;
  var month=eval(myObj[2].innerHTML)+1;
  if(month==13)
  {
    month=1;
    addYear(obj);
  }
  myObj[2].innerHTML=month;
  dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML),eval(myObj[2].innerHTML))
}
function dateShow(obj,year,month)  //显示各月份的日
{
  var myDate=new Date(year,month-1,1);
  var today=new Date();
  var day=myDate.getDay();
  var selectDate=obj.parentNode.parentNode.previousSibling.previousSibling.value.split('-');
  var length;
  switch(month)
  {
    case 1:
    case 3:
    case 5:
    case 7:
    case 8:
    case 10:
    case 12:
      length=31;
      break;
    case 4:
    case 6:
    case 9:
    case 11:
      length=30;
      break;
    case 2:
      if((year%4==0)&&(year%100!=0)||(year%400==0))
        length=29;
      else
        length=28;
  }
  for(i=0;i<obj.cells.length;i++)
  {
    obj.cells[i].innerHTML='';
    obj.cells[i].style.color='';
    obj.cells[i].className='';
  }
  for(i=0;i<length;i++)
  {
    obj.cells[i+day].innerHTML=(i+1);
    if(year==today.getFullYear()&&(month-1)==today.getMonth()&&(i+1)==today.getDate())
      obj.cells[i+day].style.color='red';
    if(year==eval(selectDate[0])&&month==eval(selectDate[1])&&(i+1)==eval(selectDate[2]))
      obj.cells[i+day].className='ds_border2';
  }
}
function getvalue(obj,inputObj)  //把选择的日期传给输入框
{
  var myObj=inputObj.nextSibling.nextSibling.childNodes[0].childNodes[0].cells[2].childNodes;
  if(obj.innerHTML)
    inputObj.value=myObj[0].innerHTML+"-"+myObj[2].innerHTML+"-"+obj.innerHTML;
  inputObj.nextSibling.nextSibling.style.display='none';
  for(i=0;i<obj.parentNode.parentNode.parentNode.cells.length;i++)
    obj.parentNode.parentNode.parentNode.cells[i].className='';
  obj.className='ds_border2'
}
function dsMove(obj)  //实现层的拖移
{
  if(event.button==1)
  {
    var X=obj.clientLeft;
    var Y=obj.clientTop;
    obj.style.pixelLeft=X+(event.x-DS_x);
    obj.style.pixelTop=Y+(event.y-DS_y);
  }
}
</script>
从
<script language=javascript>
  var myDate=new dateSelector();
  myDate.year--;
  myDate.inputName='start_date';  //注意这里设置输入框的name，同一页中日期输入框，不能出现重复的name。
  myDate.display();
</script>

样式三:

<title> - -选择日期 - - &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</title><script>
//*************************日历控件***************************
// cody by [STAR].sjz  2003-10-31
// 说明:返回值为 一个字符串
// 格式如下:
// 使用方法  : 
//  var dataString = showModalDialog("calendar.htm", "dd日mm月yyyy年" ,"dialogWidth:286px;dialogHeight:221px;status:no;help:no;");
var userFormatString;
if(window.dialogArguments ==null)
{
 userFormatString = "yyyy-mm--dd";
}
else
{
 userFormatString = window.dialogArguments;
}
with(new Date()){
 var Nyear = getYear();
 var Nmonth =  getMonth() +1;
 var Ndate =  getDate();
}
window.returnValue = new dataObj(Nyear,Nmonth,Ndate ).getDateString(userFormatString);
window.document.onclick = function(){
 var obj = window.event.srcElement;
 if(obj.tagName.toLowerCase() == "span"  &&  obj.parentNode.className.replace(/Ctable/ig,"star") == "star" )
 {
  try{
   window.currentActiveItem.runtimeStyle.cssText = "";
  }
  catch(e){ }
  Nyear = obj.id.split("-")[0];
  Nmonth = obj.id.split("-")[1];
  Ndate = obj.id.split("-")[2];
  window.currentActiveItem = obj;
  window.currentSelectDate = window.currentActiveItem.id;
  window.currentActiveItem.runtimeStyle.cssText = "background:url(http://www.5d.cn/bbs/uploadFiles/2003-10/3120401281018.gif) no-repeat 12px 6px;color:#000;padding-top:1px;font-weight:bold";
 }
}
 function dataObj(year,month,date)  
{
 this.year  = year
 this.month = month
 this.date  =  date
 this.getDateString =
  function(formatString)
  {
   return formatString.replace(/yyyy/ig , this.year).replace(/mm/ig , this.month).replace(/dd/ig , this.date)
  }
}
window.onload = function(){
 window.document.attachEvent("onclick" , doCmd);
 window.document.attachEvent("onmouseover" , buttonOver);
 window.document.attachEvent("onmouseout" , buttonOut);
 window.document.attachEvent("onmousedown" , buttonDown);
 window.document.attachEvent("onmouseup" , buttonUp);
 window.document.attachEvent("ondblclick" ,
   function()
   {
     var obj = window.event.srcElement;
     if(obj.tagName.toLowerCase() == "span"  &&  obj.parentNode.className.replace(/Ctable/ig,"star") == "star" )
     {
      var mydate = new dataObj(obj.id.split("-")[0] ,  obj.id.split("-")[1] ,  obj.id.split("-")[2] );
      window.returnValue = mydate.getDateString(userFormatString)
      window.close();
     }
   }
 );
 document.all.titleYear.innerHTML=TranYearMonthTitle(Nyear,Nmonth);
 document.all.weekNameBox.insertAdjacentHTML("afterBegin",makeWeekNameHtmlStr());
 document.all.calendarBox.innerHTML=makeCalendarHtmlStr(Nyear,Nmonth);
 window.currentSelectDate = starCaTran(Nyear,Nmonth,Ndate);
 window.document.all.calendarBox.show = show;
 window.currentActiveItem = window.document.getElementById(currentSelectDate);
 if( window.currentActiveItem )
  window.currentActiveItem.click();
 window.document.all.calendarBox.show();
}
function starCalendar(year,month){
 this.year = year;
 this.month = month;
 this.monthTable = function(){
    var aMonth=new Array();
    for(i=1;i<7;i++)aMonth[i]=new Array(i);
    
    var dCalDate=new Date(this.year, this.month-1, 1);
    var iDayOfFirst=dCalDate.getDay();
    var iDaysInMonth=new Date(this.year, this.month, 0).getDate();
    var iOffsetLast=new Date(this.year, this.month-1, 0).getDate()-iDayOfFirst+1;
    var iDate = 1;
    var iNext = 1;
    for (d = 0; d < 7; d++)
    aMonth[1][d] = (d<iDayOfFirst)?(-iDayOfFirst+d+1):iDate++;
    for (w = 2; w < 7; w++)
   for (d = 0; d < 7; d++)
    aMonth[w][d] = iDate++;
    return aMonth;
 }
}
function makeWeekNameHtmlStr(){
 var tmpStr="";
 var weekName = ["日","一","二","三","四","五","六"];
 for(var i=0;i<7;i++)tmpStr+="<span class=weekName>"+weekName[i]+"</span>";
 return tmpStr;
}
function makeCalendarHtmlStr(year,month){
 window.theCalendar = new starCalendar(year,month);
 var theCaArr = theCalendar.monthTable();
 var theDaysInMonth = new Date(year, month, 0).getDate();
 var theCaHtml = "<div class=Ctable>";
 for(var i=1;i<7;i++)
  for(var j=0;j<7;j++)
   theCaHtml = theCaHtml+"<span class="+( (theCaArr[i][j]<1 || theCaArr[i][j]>theDaysInMonth)?"OtherMonthDate":"Cdate")+" id="+starCaTran(year,month,theCaArr[i][j])+">"+starCaTran(year,month,theCaArr[i][j]).split("-")[2]+"</span>";
 return theCaHtml+"</div>";
}
function starCaTran(year,month,date){
 with(new Date(year,month-1,date))
  return getYear() + "-" +(getMonth()+1) + "-" + getDate();
}
function TranYearMonthTitle(year,month){
 with(new Date(year,month-1,1))
  return "<span style='text-decoration:underline;cursor:hand;font-weight:bold;padding:1 2 0 1;width:40px;' onclick=showMore(1940,2050,this.innerHTML) onmouseover=\"this.runtimeStyle.cssText='color:#fff;'\" onmouseout=\"this.runtimeStyle.cssText=''\" onpropertychange=showC()>" + getYear() + "</span>" + "年" + "<span style='text-decoration:underline;cursor:hand;font-weight:bold;padding:1 2 0 1;width:20px;' onclick=showMore(1,12,this.innerHTML) onmouseover=\"this.runtimeStyle.cssText='color:#fff;'\" onmouseout=\"this.runtimeStyle.cssText=''\" onpropertychange=showC()>" + (getMonth()+1) + "</span>" + "月" ;
}
function showC(){
   if(event.propertyName != "innerHTML")return;
   window.theCalendar.year = new Number(document.all.titleYear.getElementsByTagName("span")[0].innerHTML);
   window.theCalendar.month =  new Number(document.all.titleYear.getElementsByTagName("span")[1].innerHTML);
   window.document.all.calendarBox.innerHTML=makeCalendarHtmlStr(window.theCalendar.year,window.theCalendar.month);
   window.document.all.calendarBox.show = show;window.document.all.calendarBox.show();
}
function showMore(starNum,endNum,selectedValue){
 var obj = window.event.srcElement;
 var selectedIndex = selectedValue - starNum;
 if(obj.selectBox){
  obj.selectBox.selectedIndex = selectedIndex;
  return obj.selectBox.show(document.all.calendarBox.offsetHeight + document.all.weekNameBox.offsetHeight );
 }
 var selectBox = window.document.createElement("div");
 selectBox.className = "selectBox";
 selectBox.style.height = 0;
 selectBox.style.top = window.event.clientY - window.event.offsetY + window.event.srcElement.offsetHeight;
 selectBox.style.left = window.event.clientX - window.event.offsetX ;
 selectBox.show  = showBox;
 selectBox.selectedIndex = selectedIndex;
 selectBox.onclick = function(){
  var selectedObj = window.event.srcElement;
  if( "nobr" == selectedObj.tagName.toLowerCase() && selectBox.contains(selectedObj))
  {
   if(obj.innerHTML != selectedObj.innerHTML)obj.innerHTML = selectedObj.innerHTML;
  }
 }
 selectBox.onlosecapture = alert
 var iString = "";
 for(var i=starNum;i<=endNum;i++){
  iString += "<nobr  onmouseover=\"this.parentNode.getElementsByTagName('nobr')[this.parentNode.selectedIndex].style.cssText='';this.style.cssText='background-color:#00006C;color:#fff;'\"  onmouseout=this.style.cssText=''>"+i+"</nobr><br>" 
 }
 selectBox.insertAdjacentHTML ("afterBegin",iString);
 window.document.body.appendChild(selectBox);
 obj.selectBox = selectBox;
 obj.selectBox.show(document.all.calendarBox.offsetHeight + document.all.weekNameBox.offsetHeight );
 
}
function showBox(iHeight)
{
 var box = this;
 box.style.height =1;
 box.style.display = "block";
 window.clearInterval(box.timeHandle);
 box.timeHandle = window.setInterval(interValHandle,1);
 var s = 0,t =1 ;
 function interValHandle()
 {
  box.scrollTop=1000000;
  s = s + t*t;
  t += 0.5;
  box.style.height = parseInt(box.style.height) + Math.floor(s);
  box.style.width = 65 / iHeight * box.offsetHeight;
  if( box.offsetHeight > iHeight )
  {
    window.clearInterval(box.timeHandle);
    box.style.height = iHeight;
    box.scrollTop = box.childNodes[0].offsetHeight*box.selectedIndex;
    box.getElementsByTagName("nobr")[box.selectedIndex].style.cssText='background-color:#00006C;color:#fff;';
    window.document.attachEvent("onclick",
       box.hide=function()
       {
        box.style.display = "none";
        window.document.detachEvent("onclick",box.hide)
       }
    );
  }
 }
}
</script>
<script>
function buttonOver(){
 var obj = window.event.srcElement;
 if(obj.tagName.toLowerCase() == "span"  &&  obj.className.replace(/controlButton/ig,"star") == "star" )
 {
  obj.runtimeStyle.cssText="border-color:#fff #606060 #808080 #fff;padding:3 0 0 0 ";
 }
 if(obj.tagName.toLowerCase() == "span"  &&  obj.parentNode.className.replace(/Ctable/ig,"star") == "star" )
 {
  obj.style.backgroundColor = "#fff";
 }
}
function buttonOut(){
 var obj = window.event.srcElement;
 if(obj.tagName.toLowerCase() == "span"  &&  obj.className.replace(/controlButton/ig,"star") == "star" )
 {
  obj.runtimeStyle.cssText = "";
 }
 if(obj.tagName.toLowerCase() == "span"  &&  obj.parentNode.className.replace(/Ctable/ig,"star") == "star" )
 {
  window.setTimeout(function(){obj.style.backgroundColor = ""; },300);
 }
}
function buttonDown(){
 var obj = window.event.srcElement;
 if(obj.tagName.toLowerCase() == "span"  &&  obj.className.replace(/controlButton/ig,"star") == "star" )
 {
  obj.setCapture();
  obj.runtimeStyle.borderColor="#808080 #fefefe #fefefe #808080";
 }
}
function buttonUp(){
 var obj = window.event.srcElement;
 if(obj.tagName.toLowerCase() == "span"  && obj.className.replace(/controlButton/ig,"star") == "star" )
 {
  obj.releaseCapture();
  obj.runtimeStyle.cssText ="";
 }
}
function doCmd(){
 var obj = window.event.srcElement;
 if(obj.tagName.toLowerCase() == "span"  && obj.className.replace(/controlButton/ig,"star") == "star" )
 {
   switch(obj.getAttribute("cmd"))
   {
    case "py":
     window.document.all.titleYear.innerHTML=window.TranYearMonthTitle(window.theCalendar.year-1,window.theCalendar.month);
     window.document.all.calendarBox.innerHTML=makeCalendarHtmlStr(window.theCalendar.year-1,window.theCalendar.month);
     break;
    case "pm":
     window.document.all.titleYear.innerHTML=window.TranYearMonthTitle(window.theCalendar.year,window.theCalendar.month-1);
     window.document.all.calendarBox.innerHTML=makeCalendarHtmlStr(window.theCalendar.year,window.theCalendar.month-1);
     break;
    case "nm":
     window.document.all.titleYear.innerHTML=window.TranYearMonthTitle(window.theCalendar.year,window.theCalendar.month+1);
     window.document.all.calendarBox.innerHTML=makeCalendarHtmlStr(window.theCalendar.year,window.theCalendar.month+1);
     break;
    case "ny":
     window.document.all.titleYear.innerHTML=window.TranYearMonthTitle(window.theCalendar.year+1,window.theCalendar.month);
     window.document.all.calendarBox.innerHTML=makeCalendarHtmlStr(window.theCalendar.year+1,window.theCalendar.month);
     break;
   }
   window.document.all.calendarBox.show();
   window.currentSelectDate = starCaTran(Nyear,Nmonth,Ndate);
   window.currentActiveItem = window.document.getElementById(currentSelectDate);
   if( window.currentActiveItem )window.currentActiveItem.runtimeStyle.cssText = "background:url(choiceit.gif) no-repeat 12px 6px;color:#000;padding-top:1px;font-weight:bold";
 }
}
function show()
{
 var box = this;
 window.clearTimeout(box.timeHandle);
 var CdateBoxs = this.getElementsByTagName("span");
 for(var i=0;i<CdateBoxs.length;i++)
 {
  CdateBoxs[i].defaultValue = new Number( CdateBoxs[i].innerHTML );
  CdateBoxs[i].innerHTML = 0;
 }
 showDate();
 function showDate(){
  for(var i=0;i<CdateBoxs.length;i++){
   if( new Number( CdateBoxs[i].innerHTML ) + 1 <= new Number( CdateBoxs[i].defaultValue ) )
    CdateBoxs[i].innerHTML = new Number( CdateBoxs[i].innerHTML ) + 1 
  }
  box.timeHandle = window.setTimeout(showDate,1);
 }
this.show = show1
}
function show1()
{
 var box = this;
 window.clearTimeout(box.timeHandle);
 var CdateBoxs = this.getElementsByTagName("span");
 for(var i=0;i<CdateBoxs.length;i++)CdateBoxs[i].style.display = "none";
 showDate(CdateBoxs[0]);
 function showDate(obj){
  if( !obj )return;
  obj.style.display = "inline";
  box.timeHandle = window.setTimeout(function(){showDate(obj.nextSibling);},1);
 }
this.show = show
}
/*
function show()
{
}
*/
</script>
<style>
*{
 font:12px;
 letter-spacing:0px;
}
body{
 background-color:#E5E9F2;
 overflow:hidden;
 margin:0;
 border:0px;
}
#titleYear{
 text-align:center;
 padding-top:3px;
 width:120px;
 height:20px;
 border:solid #E5E9F2;
 border-width:0px 1px 1px 0px;
 background-color:#A4B9D7;
 color:#000;
 cursor:default;
}
#weekNameBox{
 width:282px;
 border-bottom:0;
}
.weekName{
 text-align:center;
 padding-top:4px;
 width:40px;
 height:20px;
 border:solid #E5E9F2;
 border-width:0px 1px 1px 0px;
 background-color:#C0D0E8;
 color:#243F65;
 cursor:default;
}
.controlButton{
 font-family: Webdings;
 font:9px;
 text-align:center;
 padding-top:2px;
 width:40px;
 height:20px;
 border:solid #E5E9F2;
 border-width:0px 1px 1px 0px;
 background-color:#A4B9D7;
 color:#243F65;
 cursor:default;
}
.Ctable{
 width:282px;
 margin-bottom:20px;
}
.Ctable span{
 font:9px verdana;
 font-weight:bold;
 color:#243F65;
 text-align:center;
 padding-top:4px;
 width:40px;
 height:26px;
 border:solid #C0D0E8;
 border-width:0px 1px 1px 0px;
 cursor:default;
}
.Cdate{
 background-color:#E5E9F2;
}
.Ctable span.OtherMonthDate{
 color:#999;
 background-color:#f6f6f6;
}
.selectBox{
 cursor:hand;
 font:9px verdana;
 width:80px;
 position:absolute;
 border:1px solid #425E87;
 overflow-y:scroll;
 overflow-x:hidden;
 background-color:#fff;
 FILTER:progid:DXImageTransform.Microsoft.Shadow(Color=#999999,offX=10,offY=10,direction=120,Strength=5);
 SCROLLBAR-FACE-COLOR: #E5E9F2;
 SCROLLBAR-HIGHLIGHT-COLOR: #E5E9F2;
 SCROLLBAR-SHADOW-COLOR: #A4B9D7; 
 SCROLLBAR-3DLIGHT-COLOR: #A4B9D7; 
 SCROLLBAR-ARROW-COLOR:  #000000; 
 SCROLLBAR-TRACK-COLOR: #eeeee6; 
 SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
}
.selectBox nobr{
 padding:0px 0px 2px 5px;
 width:100%;
 color:#000;
 letter-spacing:2px;
 text-decoration:none;
}
</style>
<body onselectstart="return false">
<div style="margin:0 0 0 0">
<div id=controlBar><span class=controlButton cmd=py title=上一年>33</span><span class=controlButton cmd=pm title=上一月>3</span><span id=titleYear></span><span class=controlButton  cmd=nm title=下一月>4</span><span class=controlButton cmd=ny title=下一年>44</span></div>
<div id=weekNameBox></div>
<div id=calendarBox></div>
</div>
</body>

样式四:

<style type="text/css">
body {
 background-color: #D4D0C8;
}
.m_fieldset {
 padding: 0,10,5,10;
 text-align: center;
 width: 150px;
}
.m_legend {
 font-family: Tahoma;
 font-size: 11px;
 padding-bottom: 5px;
}
.m_frameborder {
 border-left: 2px inset #D4D0C8;
 border-top: 2px inset #D4D0C8;
 border-right: 2px inset #FFFFFF;
 border-bottom: 2px inset #FFFFFF;
 width: 100px;
 height: 19px;
 background-color: #FFFFFF;
 overflow: hidden;
 text-align: right;
 font-family: "Tahoma";
 font-size: 10px;
}
.m_arrow {
 width: 16px;
 height: 8px;
 font-family: "Webdings";
 font-size: 7px;
 line-height: 2px;
 padding-left: 2px;
 cursor: default;
}
.m_input {
 width: 18px;
 height: 14px;
 border: 0px solid black;
 font-family: "Tahoma";
 font-size: 9px;
 text-align: right;
 ime-mode:disabled;
}
</style>
<script language="javascript">
// Written by cloudchen, 2004/03/15
function minute(name,fName)
{
 this.name = name;
 this.fName = fName || "m_input";
 this.timer = null;
 this.fObj = null;
 
 this.toString = function()
 {
  var objDate = new Date();
  var sMinute_Common = "class=\"m_input\" maxlength=\"2\" name=\""+this.fName+"\" onfocus=\""+this.name+".setFocusObj(this)\" onblur=\""+this.name+".setTime(this)\" onkeyup=\""+this.name+".prevent(this)\" onkeypress=\"if (!/[0-9]/.test(String.fromCharCode(event.keyCode)))event.keyCode=0\" onpaste=\"return false\" ondragenter=\"return false\"";
  var sButton_Common = "class=\"m_arrow\" onfocus=\"this.blur()\" onmouseup=\""+this.name+".controlTime()\" disabled"
  var str = "";
  str += "<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">"
  str += "<tr>"
  str += "<td>"
  str += "<div class=\"m_frameborder\">"
  str += "<input radix=\"24\" value=\""+this.formatTime(objDate.getHours())+"\" "+sMinute_Common+">:"
  str += "<input radix=\"60\" value=\""+this.formatTime(objDate.getMinutes())+"\" "+sMinute_Common+">:"
  str += "<input radix=\"60\" value=\""+this.formatTime(objDate.getSeconds())+"\" "+sMinute_Common+">"
  str += "</div>"
  str += "</td>"
  str += "<td>"
  str += "<table border=\"0\" cellspacing=\"2\" cellpadding=\"0\">"
  str += "<tr><td><button id=\""+this.fName+"_up\" "+sButton_Common+">5</button></td></tr>"
  str += "<tr><td><button id=\""+this.fName+"_down\" "+sButton_Common+">6</button></td></tr>"
  str += "</table>"
  str += "</td>"
  str += "</tr>"
  str += "</table>"
  return str;
 }
 this.play = function()
 {
  this.timer = setInterval(this.name+".playback()",1000);
 }
 this.formatTime = function(sTime)
 {
  sTime = ("0"+sTime);
  return sTime.substr(sTime.length-2);
 }
 this.playback = function()
 {
  var objDate = new Date();
  var arrDate = [objDate.getHours(),objDate.getMinutes(),objDate.getSeconds()];
  var objMinute = document.getElementsByName(this.fName);
  for (var i=0;i<objMinute.length;i++)
  {
   objMinute[i].value = this.formatTime(arrDate[i])
  }
 }
 this.prevent = function(obj)
 {
  clearInterval(this.timer);
  this.setFocusObj(obj);
  var value = parseInt(obj.value,10);
  var radix = parseInt(obj.radix,10)-1;
  if (obj.value>radix||obj.value<0)
  {
   obj.value = obj.value.substr(0,1);
  }
 }
 this.controlTime = function(cmd)
 {
  event.cancelBubble = true;
  if (!this.fObj) return;
  clearInterval(this.timer);
  var cmd = event.srcElement.innerText=="5"?true:false;
  var i = parseInt(this.fObj.value,10);
  var radix = parseInt(this.fObj.radix,10)-1;
  if (i==radix&&cmd)
  {
   i = 0;
  }
  else if (i==0&&!cmd)
  {
   i = radix;
  }
  else
  {
   cmd?i++:i--;
  }
  this.fObj.value = this.formatTime(i);
  this.fObj.select();
 }
 this.setTime = function(obj)
 {
  obj.value = this.formatTime(obj.value);
 }
 this.setFocusObj = function(obj)
 {
  eval(this.fName+"_up").disabled = eval(this.fName+"_down").disabled = false;
  this.fObj = obj;
 }
 this.getTime = function()
 {
  var arrTime = new Array(2);
  for (var i=0;i<document.getElementsByName(this.fName).length;i++)
  {
   arrTime[i] = document.getElementsByName(this.fName)[i].value;
  }
  return arrTime.join(":");
 }
}
</script>
<style type="text/css">
body {
 background-color: #D4D0C8;
}
.c_fieldset {
 padding: 0,10,5,10;
 text-align: center;
 width: 180px;
}
.c_legend {
 font-family: Tahoma;
 font-size: 11px;
 padding-bottom: 5px;
}
.c_frameborder {
 border-left: 2px inset #D4D0C8;
 border-top: 2px inset #D4D0C8;
 border-right: 2px inset #FFFFFF;
 border-bottom: 2px inset #FFFFFF;
 background-color: #FFFFFF;
 overflow: hidden;
 font-family: "Tahoma";
 font-size: 10px;
 width:160px;
 height:120px;
}
.c_frameborder td {
 width: 23px;
 height: 16px;
 font-family: "Tahoma";
 font-size: 11px;
 text-align: center;
 cursor: default;
}
.c_frameborder .selected {
 background-color:#0A246A;
 width:12px;
 height:12px;
 color:white;
}
.c_frameborder span {
 width:12px;
 height:12px;
}
.c_arrow {
 width: 16px;
 height: 8px;
 font-family: "Webdings";
 font-size: 7px;
 line-height: 2px;
 padding-left: 2px;
 cursor: default;
}
.c_year {
 font-family: "Tahoma";
 font-size: 11px;
 cursor: default;
 width:55px;
 height:19px;
}
.c_month {
 width:75px;
 height:20px;
 font:11px "Tahoma";
}
.c_dateHead {
 background-color:#808080;
 color:#D4D0C8;
}
</style>
<script language="javascript">
// Written by cloudchen, 2004/03/16
function calendar(name,fName)
{
 this.name = name;
 this.fName = fName || "calendar";
 this.year = new Date().getFullYear();
 this.month = new Date().getMonth();
 this.date = new Date().getDate();
 //private
 this.toString = function()
 {
  var str = "";
  str += "<table border=\"0\" cellspacing=\"3\" cellpadding=\"0\" onselectstart=\"return false\">";
  str += "<tr>";
  str += "<td>";
  str += this.drawMonth();
  str += "</td>";
  str += "<td align=\"right\">";
  str += this.drawYear();
  str += "</td>";
  str += "</tr>";
  str += "<tr>";
  str += "<td colspan=\"2\">";
  str += "<div class=\"c_frameborder\">";
  str += "<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\" class=\"c_dateHead\">";
  str += "<tr>";
  str += "<td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td>";
  str += "</tr>";
  str += "</table>";
  str += this.drawDate();
  str += "</div>";
  str += "</td>";
  str += "</tr>";
  str += "</table>";
  return str;
 }
 //private
 this.drawYear = function()
 {
  var str = "";
  str += "<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">";
  str += "<tr>";
  str += "<td>";
  str += "<input class=\"c_year\" maxlength=\"4\" value=\""+this.year+"\" name=\""+this.fName+"\" id=\""+this.fName+"_year\" readonly>";
  //DateField
  str += "<input type=\"hidden\" name=\""+this.fName+"\" value=\""+this.date+"\" id=\""+this.fName+"_date\">";
  str += "</td>";
  str += "<td>";
  str += "<table cellspacing=\"2\" cellpadding=\"0\" border=\"0\">";
  str += "<tr>";
  str += "<td><button class=\"c_arrow\" onfocus=\"this.blur()\" onclick=\"event.cancelBubble=true;document.getElementById('"+this.fName+"_year').value++;"+this.name+".redrawDate()\">5</button></td>";
  str += "</tr>";
  str += "<tr>";
  str += "<td><button class=\"c_arrow\" onfocus=\"this.blur()\" onclick=\"event.cancelBubble=true;document.getElementById('"+this.fName+"_year').value--;"+this.name+".redrawDate()\">6</button></td>";
  str += "</tr>";
  str += "</table>";
  str += "</td>";
  str += "</tr>";
  str += "</table>";
  return str;
 }
 //priavate
 this.drawMonth = function()
 {
  var aMonthName = ["一","二","三","四","五","六","七","八","九","十","十一","十二"];
  var str = "";
  str += "<select class=\"c_month\" name=\""+this.fName+"\" id=\""+this.fName+"_month\" onchange=\""+this.name+".redrawDate()\">";
  for (var i=0;i<aMonthName.length;i++) {
   str += "<option value=\""+(i+1)+"\" "+(i==this.month?"selected":"")+">"+aMonthName[i]+"月</option>";
  }
  str += "</select>";
  return str;
 }
 //private
 this.drawDate = function()
 {
  var str = "";
  var fDay = new Date(this.year,this.month,1).getDay();
  var fDate = 1-fDay;
  var lDay = new Date(this.year,this.month+1,0).getDay();
  var lDate = new Date(this.year,this.month+1,0).getDate();
  str += "<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\" id=\""+this.fName+"_dateTable"+"\">";
  for (var i=1,j=fDate;i<7;i++)
  {
   str += "<tr>";
   for (var k=0;k<7;k++)
   {
    str += "<td><span"+(j==this.date?" class=\"selected\"":"")+" onclick=\""+this.name+".redrawDate(this.innerText)\">"+(isDate(j++))+"</span></td>";
   }
   str += "</tr>";
  }
  str += "</table>";
  return str;
  function isDate(n)
  {
   return (n>=1&&n<=lDate)?n:"";
  }
 }
 //public
 this.redrawDate = function(d)
 {
  this.year = document.getElementById(this.fName+"_year").value;
  this.month = document.getElementById(this.fName+"_month").value-1;
  this.date = d || this.date;
  document.getElementById(this.fName+"_year").value = this.year;
  document.getElementById(this.fName+"_month").selectedIndex = this.month;
  document.getElementById(this.fName+"_date").value = this.date;
  if (this.date>new Date(this.year,this.month+1,0).getDate()) this.date = new Date(this.year,this.month+1,0).getDate();
  document.getElementById(this.fName+"_dateTable").outerHTML = this.drawDate();
 }
 //public
 this.getDate = function(delimiter)
 {
  if (!delimiter) delimiter = "/";
  var aValue = [this.year,(this.month+1),this.date];
  return aValue.join(delimiter);
 }
}
</script>
<table border="0">
<tr><td>
<fieldset class="c_fieldset"><legend class="c_legend">日期(T)</legend>
<!-- 调用日历 -->
<script>
var c = new calendar("c");
document.write(c);
</script>
<!-- 调用日历 -->
</fieldset>
</td>
<td valign="top">
<fieldset class="m_fieldset"><legend class="m_legend">时间(T)</legend>
<!-- 调用时间钟 -->
<script>
var m = new minute("m");
m.play();
document.write(m);
</script>
<!-- 调用时间钟 -->
</fieldset>
</td></tr>
<tr>
<td colspan="2">
<button onclick="alert(c.getDate())" style="font:8px Webdings;width:15px;height:15px;line-height:6px;">4</button>
<button style="font:10px Arial;height:15px;height:16px;border:0px;" onfocus="this.blur()">GetDate</button>
<button onclick="alert(m.getTime())" style="font:8px Webdings;width:15px;height:15px;line-height:6px;">4</button>
<button style="font:10px Arial;height:15px;height:16px;border:0px;" onfocus="this.blur()">GetTime</button>
</td>
</tr>
</table>