百度用到的Js日历大家可以看看

更新时间：2009年10月24日 11:48:55 作者：

本JavaScript日历是从百度网站里整理出来的，费了很大劲，因为感觉这个日历简直太棒了，没有使用任何的外部文件，全部是HTML代码和Javascirpt实现。

而且日历功能很强大，带有节日、农历等，运行看效果就明白了，相信不会让您失望的。

<title>百度的Js日历，值得一看</title> <table cellpadding="0" cellspacing="0" id="1"> <tr> <td><style> body,td,.p1,.p2,.i{font-family:arial} body{margin:6px 0 0 0;background-color:#fff;color:#000;} table{border:0} #cal{width:434px;border:1px solid #c3d9ff;font-size:12px;margin:8px 0 0 15px} #cal #top{height:29px;line-height:29px;background:#e7eef8;color:#003784;padding-left:70px} #cal #top select{font-size:12px} #cal #top input{padding:0} #cal ul#wk{margin:0;padding:0;height:25px} #cal ul#wk li{float:left;width:60px;text-align:center;line-height:25px;list-style:none} #cal ul#wk li b{font-weight:normal;color:#c60b02} #cal #cm{clear:left;border-top:1px solid #ddd;border-bottom:1px dotted #ddd;position:relative} #cal #cm .cell{position:absolute;width:42px;height:36px;text-align:center;margin:0 0 0 9px} #cal #cm .cell .so{font:bold 16px arial;} #cal #bm{text-align:right;height:24px;line-height:24px;padding:0 13px 0 0} #cal #bm a{color:7977ce} #cal #fd{display:none;position:absolute;border:1px solid #dddddf;background:#feffcd;padding:10px;line-height:21px;width:150px} #cal #fd b{font-weight:normal;color:#c60a00} </style>  <div id="cal"> <div id="top">公元&nbsp; <select> </select> &nbsp;年&nbsp; <select> </select> &nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;农历<span></span>年&nbsp;[&nbsp;<span></span>年&nbsp;]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="button" value="回到今天" title="点击后跳转回今天" style="padding:0px"> </div> <ul id="wk"> <li>一</li> <li>二</li> <li>三</li> <li>四</li> <li>五</li> <li><b>六</b></li> <li><b>日</b></li> </ul> <div id="cm"></div> <div id="bm"></div> </div></td> </tr> </table> <script type="text/javascript"> 0||c.solarMonth!=a.solarMonth){ X.dateArray[e]=null; continue } var b=new U(new Date()); if(c.solarYear==b.solarYear&&c.solarMonth==b.solarMonth&&c.solarDate==b.solarDate){ c.isToday=true } X.dateArray[e]=c; c=new U(C(c.date,1)); f-- } } return{ init:function(a){ Z(a) } ,getJson:function(){ return X } } } )(); var W=(function(){ var C=M("top").getElementsByTagName("SELECT")[0]; var X=M("top").getElementsByTagName("SELECT")[1]; var G=M("top").getElementsByTagName("SPAN")[0]; var c=M("top").getElementsByTagName("SPAN")[1]; var Y=M("top").getElementsByTagName("INPUT")[0]; function a(g){ G.innerHTML=g.ganzhiYear; c.innerHTML=g.shengxiao } function b(g){ C[g.solarYear-1901].selected=true; X[g.solarMonth-1].selected=true } function f(){ var j=C.value; var g=X.value; var i=new U(new Date(j,g-1,1)); Q.init(i); N.draw(); if(this==C){ i=new U(new Date(j,3,1)); G.innerHTML=i.ganzhiYear; c.innerHTML=i.shengxiao } var h=new U(new Date()); Y.style.visibility=(j==h.solarYear&&g==h.solarMonth)?"hidden":"visible" } function Z(){ var g=new U(new Date()); a(g); b(g); Q.init(g); N.draw(); Y.style.visibility="hidden" } function d(k,g){ for(var j=1901;j<2050;j++){ var h=R("OPTION"); h.value=j; h.innerHTML=j; if(j==k){ h.selected="selected" } C.appendChild(h) } for(var j=1;j<13;j++){ var h=R("OPTION"); h.value=j; h.innerHTML=j; if(j==g){ h.selected="selected" } X.appendChild(h) } C.onchange=f; X.onchange=f } function e(g){ d(g.solarYear,g.solarMonth); G.innerHTML=g.ganzhiYear; c.innerHTML=g.shengxiao; Y.onclick=Z; Y.style.visibility="hidden" } return{ init:function(g){ e(g) } ,reset:function(g){ b(g) } } } )(); var N=(function(){ function C(){ var Z=Q.getJson(); var c=Z.dateArray; M("cm").style.height=Z.lines*38+2+"px"; M("cm").innerHTML=""; for(var a=0;a<c.length;a++){ if(c[a]==null){ continue } var X=R("DIV"); if(c[a].isToday){ X.style.border="1px solid #a5b9da"; X.style.background="#c1d9ff" } X.className="cell"; X.style.left=(a%7)*60+"px"; X.style.top=Math.floor(a/7)*38+2+"px"; var b=R("DIV"); b.className="so"; // https://www.jb51.net b.style.color=((a%7)>4||c[a].isRest)?"#c60b02":"#313131"; b.innerHTML=c[a].solarDate; X.appendChild(b); var Y=R("DIV"); Y.style.color="#666"; Y.innerHTML=c[a].showInLunar; X.appendChild(Y); X.onmouseover=(function(d){ return function(f){ F.show({ dateIndex:d,cell:this } ) } } )(a); X.onmouseout=function(){ F.hide() } ; M("cm").appendChild(X) } var G=R("DIV"); G.id="fd"; M("cm").appendChild(G); F.init(G) } return{ draw:function(G){ C(G) } } } )(); var F=(function(){ var C; function Y(e,c){ if(arguments.length>1){ var b=/([.*+?^=!:${}()|[\]\/\\])/g,Z="{".replace(b,"\\$1"),d="}".replace(b,"\\$1"); var a=new RegExp("#"+Z+"([^"+Z+d+"]+)"+d,"g"); if(typeof (c)=="object"){ return e.replace(a,function(f,h){ var g=c[h]; return typeof (g)=="undefined"?"":g } ) } } return e } function G(b){ var a=Q.getJson().dateArray[b.dateIndex]; var Z=b.cell; var c="#{solarYear}&nbsp;年&nbsp;#{solarMonth}&nbsp;月&nbsp;#{solarDate}&nbsp;日&nbsp;#{solarWeekDayInChinese}"; c+="<br><b>农历&nbsp;#{lunarMonthInChinese}月#{lunarDateInChinese}</b>"; c+="<br>#{ganzhiYear}年&nbsp;#{ganzhiMonth}月&nbsp;#{ganzhiDate}日"; if(a.solarFestival!=""||a.lunarFestival!=""||a.jieqi!=""){ c+="<br><b>#{lunarFestival} #{solarFestival} #{jieqi}</b>" } C.innerHTML=Y(c,a); C.style.top=Z.offsetTop+Z.offsetHeight-5+"px"; C.style.left=Z.offsetLeft+Z.offsetWidth-5+"px"; C.style.display="block" } function X(){ C.style.display="none" } return{ show:function(Z){ G(Z) } ,hide:function(){ X() } ,init:function(Z){ C=Z } } } )(); var A=new U(new Date()); if(S){ window.attachEvent("onload",function(){ W.reset(A) } ) } W.init(A); Q.init(A); N.draw(); } )(); //--> </script>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

Js
日历

js计算时间过去的时间
计算过去多长时间的js代码，可以加个自动切换到当前focus也不错，大家可以动手弄下
2008-02-02
JavaScript 比较时间大小的代码
今天在google搜索js比较时间大小，能用的很少。js静态函数Date.prase() 参数有很严格的要求。否则就会转化失败。
2010-04-04
javascript实现的简易的DatePicker日历
DatePicker是个很常见的组件。我大致搜了一下，满大篇的demo。各大框架也把DatePicker纳入基本的组件库里。
2011-02-02
超级可爱纯js网页时钟
超级可爱纯js网页时钟...
2007-04-04
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时...
2007-10-10
javascript获取当前日期时间及其它操作函数
javascript获取当前日期时间及其它操作函数，需要在js中操作日期时间的朋友可以参考下。整理的比较全。
2011-01-01
javascript 出生日期和身份证判断大全
对于身份证和出生年月的判断都包括了，非常全。出生日期不能为空，如果出生日期不为空，出生日期必须是8位；如果身份证号是18位或15位必须和出生日期相匹配；如果是军官证号必须首字符是汉字！
2008-11-11
js日历控件（可精确到分钟）
非常不错的可以精确到分钟的日历选择控件，方便我们选择文章的修改日期等
2008-09-09
不错的一个日期输入动态
[红色]不错的一个日期输入动态...
2006-11-11
js 页面执行时间计算代码
一个可以用来计算当前页面的执行时间，方便控制页面的大小等一系列影响页面执行效率的东西
2009-03-03