JS 日历控件(蓝色)
2010-03-03 23:43
656 查看
超漂亮的JS日历控件
*{
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;
}
";
}
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 "" + getYear() + "" + "年" + "" + (getMonth()+1) + "" + "月" ;
}
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"+i+"
" } 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) } ); } } } 333444
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
" } 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) } ); } } } 333444
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相关文章推荐
- JS 日历控件(蓝色)
- 支持IE、Fixfox、Safari、Opera内核的浏览器的js脚本日历控件
- 三款漂亮的js日历控件
- JS日历控件 灵活设置: 精确的时分秒.
- js日历控件
- 基于项目需要,再次修正了js版的梅花雨日历控件,让它支持FireFox和Chrome
- 修改js Calendar日历控件 兼容IE9/谷歌/火狐
- 又是一个不错的JS日历控件
- 简单js日历控件
- 一个短小的js日历控件
- 显示日历和时间的控件 js 时分秒
- 可选择小时和分钟的js日历控件
- 三款漂亮的js日历控件
- JS日历控件----附效果图、源代码
- JS实现日历控件选择后自动填充
- 一个很好的js日历控件,支持键盘和时间选择
- 简洁JS 日历控件 支持日期和月份选择(转)
- js日历控件集合
- JS特效之日历输入框(日历控件)
- 最简约JS日历控件