日期:2014-05-16  浏览次数:20417 次

超漂亮的JS日历控件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>超漂亮的JS日历控件</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
*{
?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>
<script language="javascript">
// 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(/jscss/demoimg/201002/right.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()