JS 日历控件(蓝色)

</p> <p><title>超漂亮的JS<a href="https://www.kunjuke.com/tag/7971/" title="日历控件" target="_blank">日历控件</a></title> </p> <p>*{<br /> font:12px;<br /> letter-spacing:0px;<br /> }<br /> body{<br /> background-color:#E5E9F2;<br /> overflow:hidden;<br /> margin:0;<br /> border:0px;<br /> }<br /> #titleYear{<br /> text-align:center;<br /> padding-top:3px;<br /> width:120px;<br /> height:20px;<br /> border:solid #E5E9F2;<br /> border-width:0px 1px 1px 0px;<br /> background-color:#A4B9D7;<br /> color:#000;<br /> cursor:default;<br /> }<br /> #weekNameBox{<br /> width:282px;<br /> border-bottom:0;<br /> }<br /> .weekName{<br /> text-align:center;<br /> padding-top:4px;<br /> width:40px;<br /> height:20px;<br /> border:solid #E5E9F2;<br /> border-width:0px 1px 1px 0px;<br /> background-color:#C0D0E8;<br /> color:#243F65;<br /> cursor:default;<br /> }<br /> .controlButton{<br /> font-family: Webdings;<br /> font:9px;<br /> text-align:center;<br /> padding-top:2px;<br /> width:40px;<br /> height:20px;<br /> border:solid #E5E9F2;<br /> border-width:0px 1px 1px 0px;<br /> background-color:#A4B9D7;<br /> color:#243F65;<br /> cursor:default;<br /> }<br /> .Ctable{<br /> width:282px;<br /> margin-bottom:20px;<br /> }<br /> .Ctable span{<br /> font:9px verdana;<br /> font-weight:bold;<br /> color:#243F65;<br /> text-align:center;<br /> padding-top:4px;<br /> width:40px;<br /> height:26px;<br /> border:solid #C0D0E8;<br /> border-width:0px 1px 1px 0px;<br /> cursor:default;<br /> }<br /> .Cdate{<br /> background-color:#E5E9F2;<br /> }<br /> .Ctable span.OtherMonthDate{<br /> color:#999;<br /> background-color:#f6f6f6;<br /> }<br /> .selectBox{<br /> cursor:hand;<br /> font:9px verdana;<br /> width:80px;<br /> position:absolute;<br /> border:1px solid #425E87;<br /> overflow-y:scroll;<br /> overflow-x:hidden;<br /> background-color:#fff;<br /> FILTER:progid:DXImageTransform.Microsoft.Shadow(Color=#999999,offX=10,offY=10,direction=120,Strength=5);<br /> SCROLLBAR-FACE-COLOR: #E5E9F2;<br /> SCROLLBAR-HIGHLIGHT-COLOR: #E5E9F2;<br /> SCROLLBAR-SHADOW-COLOR: #A4B9D7;<br /> SCROLLBAR-3DLIGHT-COLOR: #A4B9D7;<br /> SCROLLBAR-ARROW-COLOR: #000000;<br /> SCROLLBAR-TRACK-COLOR: #eeeee6;<br /> SCROLLBAR-DARKSHADOW-COLOR: #ffffff;<br /> }<br /> .selectBox nobr{<br /> padding:0px 0px 2px 5px;<br /> width:100%;<br /> color:#000;<br /> letter-spacing:2px;<br /> text-decoration:none;<br /> } </p> <p><span class="controlButton" title="上一年">33</span><span class="controlButton" title="上一月">3</span><span id="titleYear"></span><span class="controlButton" title="下一月">4</span><span class="controlButton" title="下一年">44</span> </p> <p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

您可能感兴趣的文章:

• php+javascript的日历控件
• JS学习之一个简易的日历控件
• javascript实现日历控件(年月日关闭按钮)
• 修改js Calendar日历控件 兼容IE9/谷歌/火狐
• ASP.NET笔记之Calender的使用说明
• 简约JS日历控件 实例代码
• php calender(日历)二个版本代码示例(解决2038问题)
• php Calender(日历)代码分享
• js Calender控件使用详解
• 一起学写js Calender日历控件