整理几个js日历源代码

在蓝色看到的几个js日历代码，整理了一下。大家可以用在blog上，或者可以用在表单的日期类型的数据选择中，方便大家填写日期。

1.动感的日历，动态显示鼠标路径，很有趣

效果图：

<title>js日历 - asp之家</title><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>

 2.和上面的这个有点类似，可以说是增强版，运动指数更高，连数字，下拉列表都动感十足：

效果图：

<title> - -选择日期 - - asp之家</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>

3.这个日历可以动态显示当前具体时间

界面截图：

<title>js日历，日期时间 - asp之家</title><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>

4.用在表单输入的日历，一个日历形式的日期输入框

截图：

<title>一个日历形式的日期输入框 - asp之家</title><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>

相关文章推荐：asp日历代码 显示农历