从discuz注册看到的一个日历控件。简单觉得还不错。把他移植下来。
显示效果
要求css代码:
复制内容到剪贴板
代码:
/*Popup Calendar*/
#calendar {
border: 1px solid #9DB3C5;
background: #F5FAFE
url(file:///C|/Documents and Settings/�ϴ�/Local Settings/Temporary Internet Files/images/default/headbox.gif)
repeat-x 0 0;
margin-bottom: 0.8em;
}
#calendar td {
padding: 2px;
font-weight: bold;
}
#calendar_week td {
height: 2em;
line-height: 2em;
border-bottom: 1px solid #CAD9EA;
}
#hourminute td {
padding: 4px 2px;
border-top: 1px solid #CAD9EA;
}
.calendar_expire,.calendar_expire a:link,.calendar_expire a:visited {
color: #666;
font-weight: normal;
}
.calendar_default,.calendar_default a:link,.calendar_default a:visited {
color: #069;
}
.calendar_checked,.calendar_checked a:link,.calendar_checked a:visited {
color: #090;
font-weight: bold;
}
td.calendar_checked,span.calendar_checked {
background: #CAD9EA;
}
.calendar_today,.calendar_today a:link,.calendar_today a:visited {
color: #000;
font-weight: bold;
}
#calendar_header td {
width: 30px;
height: 20px;
border-bottom: 1px solid #CAD9EA;
font-weight: normal;
}
#calendar_year {
display: none;
line-height: 130%;
background: #F5FAFE;
position: absolute;
z-index: 10;
}
#calendar_year .col {
float: left;
background: #F5FAFE;
margin-left: 1px;
border: 1px solid #CAD9EA;
padding: 4px;
}
#calendar_month {
display: none;
background: #F5FAFE;
line-height: 130%;
border: 1px solid #DDD;
padding: 4px;
position: absolute;
z-index: 11;
}html代码:
复制内容到剪贴板
代码:
<div id="append_parent"></div><div id="ajaxwaitid"></div>
<script src="js/calendar.js" type="text/javascript"></script>
<table>
<tr>
<th><label for="bdaynew">生日</label></th>
<td><input type="text" name="bdaynew" id="bdaynew" size="25" onclick="showcalendar(event, this)" onfocus="showcalendar(event, this);if(this.value=='0000-00-00')this.value=''" value="0000-00-00" /></td>
</tr>
</table>js详见附件:
