js日历控件

一、汪大叔给的js做的日历控件，灰常好用

二、使用步骤：

1、包含以下几个文件：

文件夹:images;

calender.js

calenger.css

2.calender.js内容如下：

/*===========================code by realm.=============================
<link href="controls/calendar/calendar.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="controls/calendar/calendar.js" charset="GB2312"></script>
<input type="text" onclick="showcalendar(event, this, true);" />
<input type="text" onclick="showcalendar(event, this, false);" />
<input type="text" onclick="showcalendar(event, this, true, true);" />
<input type="text" onclick="showcalendar(event, this, false, true);" />
<table border="0" cellpadding="0" cellspacing="0" class="calendarlayer">
<tr>
<td><input type="text" id="txtCalendar1" class="calinput" onclick="showcalendar(event, this, true);" /></td>
<td class="caltdbutton"><span class="calbutton" onclick="showcalendar(event, document.getElementById('txtCalendar1'))"></span></td>
</tr>
</table>
============================================================*/
var strcalendarcode = "";
strcalendarcode += "<iframe id='calendarcontain_iframe' class='calendarcontain_iframe' frameborder='0' scrolling='no' src='about:blank'></iframe>";
strcalendarcode += "<div id='calendarcontain_filter' class='calendarcontain_filter'></div>";
strcalendarcode += "<div id='calendarcontain' class='calendarcontain' style='display:none;'>";
strcalendarcode += "<div id='cal_timelayer' class='caltimelayer'>";
strcalendarcode += " <div id='cal_time' class='caltime'><div>";
strcalendarcode += " 时：<select id='cal_timehh' onclick='cal_select=true;setTimeout(function(){cal_select=false;},111);'>";
for (var i = 0; i < 24; i++) { strcalendarcode += " <option value='" + (i > 9 ? i : "0" + i) + "'>" + (i > 9 ? i : "0" + i) + "</option>"; }
strcalendarcode += " </select>";
strcalendarcode += " 分：<select id='cal_timemm' onclick='cal_select=true;setTimeout(function(){cal_select=false;},111);'>";
for (var i = 0; i < 60; i++) { strcalendarcode += " <option value='" + (i > 9 ? i : "0" + i) + "'>" + (i > 9 ? i : "0" + i) + "</option>"; }
strcalendarcode += " </select>";
strcalendarcode += " 秒：<select id='cal_timess' onclick='cal_select=true;setTimeout(function(){cal_select=false;},111);'>";
for (var i = 0; i < 60; i++) { strcalendarcode += " <option value='" + (i > 9 ? i : "0" + i) + "'>" + (i > 9 ? i : "0" + i) + "</option>"; }
strcalendarcode += " </select></div>";
strcalendarcode += " <div class='calnowtimeview'><span id='cal_shownowtime' class='calshownowtime'></span><input type='button' class='caltonow calbtnhover' value='' onclick='Cal_SetNowTime()' /></div>";
strcalendarcode += " </div>";
strcalendarcode += " <div class='calfooter'>";
strcalendarcode += " <input type='button' class='calsubmit calbtnhover' value='' onclick='Cal_HideTimePanel()' /> ";
strcalendarcode += " <input type='button' class='calclean calbtnhover' value='' onclick='Cal_Clear()' />";
strcalendarcode += " </div>";
strcalendarcode += "</div>";
strcalendarcode += "<div id='cal_ymlayer' class='calymlayer'>";
strcalendarcode += " <div id='calym_month' class='calymmonth'></div>";
strcalendarcode += " <div id='calym_year' class='calymyear'></div>";
strcalendarcode += " <div class='calfooter'>";
strcalendarcode += " <input type='button' class='caltomonth calbtnhover' value='' onclick='Cal_ToMonth()' /> ";
strcalendarcode += " <input type='button' class='calsubmit calbtnhover' value='' onclick='Cal_HideYMPanel()' /> ";
strcalendarcode += " <input type='button' class='calclean calbtnhover' value='' onclick='Cal_Clear()' />";
strcalendarcode += " </div>";
strcalendarcode += "</div>";
strcalendarcode += "<div id='cal_daylayer' class='caldaylayer'>";
strcalendarcode += " <div class='calheader'>";
strcalendarcode += " <input type='button' class='btnleft' onclick='Cal_Previou()' />";
strcalendarcode += " <input type='text' class='textinfo' id='caltxtYearMonth' value='' />";
strcalendarcode += " <input type='button' class='btndown' onclick='Cal_ShowYMPanel()' />";
strcalendarcode += " <input type='text' class='textspace' value='' />";
strcalendarcode += " <input type='button' class='btnright' onclick='Cal_Next()' />";
strcalendarcode += " </div>";
strcalendarcode += " <div class='calweekbar'><ul id='calweekbar'></ul></div>";
strcalendarcode += " <div class='calcontainer'><ul id='calendarcontainer'></ul></div>";
strcalendarcode += " <div class='calfooter'>";
strcalendarcode += " <input type='button' class='caltotime calbtnhover' id='cal_totime' value='' onclick='Cal_ShowTimePanel()' /> ";
strcalendarcode += " <input type='button' class='caltoday calbtnhover' value='' onclick='Cal_ToDay()' /> ";
strcalendarcode += " <input type='button' class='calsubmit calbtnhover' value='' onclick='Cal_Hidden()' /> ";
strcalendarcode += " <input type='button' class='calclean calbtnhover' value='' onclick='Cal_Clear()' />";
strcalendarcode += " </div>";
strcalendarcode += "</div>";
strcalendarcode += "</div>";
if (!document.getElementById('calendarcontain_layer')) { var contain = document.createElement('div'); contain.id = 'calendarcontain_layer'; contain.innerHTML = strcalendarcode; setTimeout(function() { document.body.appendChild(contain); }, 333); }
var _$ = function(ids) { return document.getElementById(ids) }, cal_select = false, cal_obj, cal_year = 0, cal_month = 0, cal_day = 0, cal_snt = false, cal_ymd = true, cal_interval, cal_timer, cal_timeout = 30, cal_height = 177, cal_val = 0, cal_open = false, cal_isIE = navigator.appName == 'Microsoft Internet Explorer';
var showcalendar = showCalendar = function(a, b, c, d) {
if (d == true) { if (_$('cal_totime')) _$('cal_totime').style.display = 'inline-block'; } else { if (_$('cal_totime')) _$('cal_totime').style.display = 'none'; }
if (b.attributes['onfocus'] != null && b.attributes['onfocus'].value.toLowerCase().indexOf('showcalendar') > -1) {
eval('b.onclick = function() { ' + b.attributes['onfocus'].value.toLowerCase().replace(';', '') + ' };');
b.onfocus = b.onblur = null; b.removeAttribute('onfocus'); b.removeAttribute('onblur');
if (cal_isIE) { b.click(); } else { var evt = document.createEvent('MouseEvents'); evt.initEvent('click', true, true); b.dispatchEvent(evt); }
} else {
var cal_now = new Date(), inside = true; cal_open = true; cal_year = cal_now.getFullYear(); cal_month = cal_now.getMonth(); cal_day = cal_now.getDate(); cal_snt = d == true ? true : false; cal_ymd = c == false ? false : true; Cal_SetNowTime(); Cal_ApplyStyle(b); cal_obj = b;
_$('calendarcontain').onmouseover = function() { inside = true; }; _$('calendarcontain').onmouseout = function() { inside = false; };
if (cal_snt && !cal_ymd) {
with (_$('cal_timelayer').style) { display = 'block'; height = cal_height + 'px'; }
with (_$('cal_ymlayer').style) { display = 'none'; height = '0px'; }
_$('cal_daylayer').style.display = 'none';
cal_interval = setInterval(function() { Cal_ShowNowTime(); }, 1000);
} else if (!cal_ymd) {
with (_$('cal_timelayer').style) { display = 'none'; height = '0px'; }
with (_$('cal_ymlayer').style) { display = 'block'; height = cal_height + 'px'; }
_$('cal_daylayer').style.display = 'none';
} else {
with (_$('cal_timelayer').style) { display = 'none'; height = '0px'; }
with (_$('cal_ymlayer').style) { display = 'none'; height = '0px'; }
_$('cal_daylayer').style.display = 'block';
}
if (cal_obj.value != '') {
cal_obj.value = cal_obj.value.replace(new RegExp('/', 'g'), '-');
cal_obj.value = cal_obj.value.replace(new RegExp('年', 'g'), '-');
cal_obj.value = cal_obj.value.replace(new RegExp('月', 'g'), '-');
cal_obj.value = cal_obj.value.replace(new RegExp('日', 'g'), '');
if (cal_snt) {
if (!cal_ymd) { if (cal_obj.value.length < 10 && cal_obj.value.split(':').length == 3) { var volb = cal_obj.value.split(':'); if (Cal_IsTime(parseInt(volb[0], 10), parseInt(volb[1], 10), parseInt(volb[2], 10))) { Cal_SetTimeVal(volb); } else { cal_obj.value = ''; } } else { cal_obj.value = ''; } } else { if (cal_obj.value.split(' ').length == 2 && cal_obj.value.split('-').length == 3 && cal_obj.value.split(':').length == 3) { var vol = cal_obj.value.split(' '), vola = vol[0].split('-'), volb = vol[1].split(':'); if (Cal_IsDate(vola[0] + '-' + vola[1] + '-' + vola[2]) && Cal_IsTime(parseInt(volb[0], 10), parseInt(volb[1], 10), parseInt(volb[2], 10))) { cal_year = vola[0]; cal_month = parseInt(vola[1], 10) - 1; cal_day = parseInt(vola[2], 10); Cal_SetTimeVal(volb); } else { cal_obj.value = ''; } } else { cal_obj.value = ''; } }
} else {
var vol = cal_obj.value.split('-');
if (vol.length == 2) { if (Cal_IsDate(vol[0] + '-' + vol[1] + '-' + 1) && !cal_ymd) { cal_year = vol[0]; cal_month = parseInt(vol[1], 10) - 1; cal_day = 1; } else { cal_obj.value = ''; } }
if (vol.length == 3) { if (Cal_IsDate(vol[0] + '-' + vol[1] + '-' + vol[2])) { cal_year = vol[0]; cal_month = parseInt(vol[1], 10) - 1; cal_day = parseInt(vol[2], 10); } else { cal_obj.value = ''; } }
}
}
Cal_OptionYear(); Cal_OptionMonth(); Cal_OptionDay(); Cal_OptionWeek(); a = a || event;
if (cal_isIE) { a.cancelBubble = true; } else if (typeof a.stopPropagation == 'function') { a.stopPropagation(); }
document.onclick = document.body.onclick = function() { if (!inside && !cal_select) { inside = true; Cal_Hidden(); } };
setTimeout(function() { inside = false; }, 10);
}
};
var Cal_ApplyStyle = function(o) {
if (!cal_open) return;
var obj = pobj = o, pt = obj.offsetTop, pl = obj.offsetLeft, ph = obj.offsetHeight + 1;
while (obj = obj.offsetParent) { pt += obj.offsetTop; pl += obj.offsetLeft; }
cal_val = 0; cal_obj = o; Cal_Parentval(cal_obj);
if ((pt + ph - cal_val + 180) > (document.documentElement.clientHeight + document.documentElement.scrollTop)) pt = pt - ph - 180;
with (_$('calendarcontain_iframe').style) { display = cal_isIE ? 'block' : 'none'; top = (pt + ph - cal_val - 1) + 'px'; left = (pl - 3) + 'px'; }
with (_$('calendarcontain_filter').style) { display = 'block'; top = (pt + ph - cal_val - ((document.all && window.external) ? 4 : 0)) + 'px'; left = (pl - ((document.all && window.external) ? 4 : 0)) + 'px'; width = ((document.all && window.external) ? 229 : 228) + 'px'; height = ((document.all && window.external) ? 180 : 179) + 'px'; }
with (_$('calendarcontain').style) { display = 'block'; top = (pt + ph - cal_val) + 'px'; left = pl + 'px'; }
while (pobj = pobj.parentNode) { if (typeof (pobj.onscroll) == 'undefined') pobj.onscroll = function() { Cal_ApplyStyle(o); }; else pobj.onscroll = function() { Cal_ApplyStyle(o); }; }
if (typeof (window.onresize) == 'undefined') window.onresize = function() { Cal_ApplyStyle(o); };
else window.onresize = function() { Cal_ApplyStyle(o); };
};
var Cal_OptionYear = function() {
var divlayer = document.createElement('div'), btnleft = document.createElement('input'), btnright = document.createElement('input');
divlayer.className = 'divlayer';
btnleft.type = 'button';
btnleft.className = 'btnleft';
btnleft.onclick = function() { cal_year = parseInt(cal_year) - 10; Cal_SetValue(); Cal_OptionDay(); Cal_OptionYear(); };
btnright.type = 'button';
btnright.className = 'btnright';
btnright.onclick = function() { cal_year = parseInt(cal_year) + 10; Cal_SetValue(); Cal_OptionDay(); Cal_OptionYear(); };
divlayer.appendChild(btnleft);
divlayer.appendChild(btnright);
_$('calym_year').innerHTML = ''; _$('calym_year').appendChild(divlayer);
for (var i = 0; i < 10; i++) {
var span = document.createElement('span'), val = cal_year - cal_year % 10 + i;
if ((cal_year - cal_year % 10 + i) == cal_year) { span.className = 'curr'; }
span.title = val; span.innerHTML = val + '年';
span.onmouseover = function() { this.style.backgroundColor = '#DDECFE'; };
span.onmouseout = function() { var _this = this; setTimeout(function() { _this.style.backgroundColor = ''; }, 200); };
span.onclick = function() { cal_year = parseInt(this.title); Cal_SetValue(); Cal_OptionDay(); Cal_OptionYear(); };
_$('calym_year').appendChild(span);
}
};
var Cal_OptionMonth = function() {
_$('calym_month').innerHTML = '';
for (var i = 0; i < 12; i++) {
var span = document.createElement('span');
if (i == cal_month) { span.className = 'curr'; }
span.title = i + 1; span.innerHTML = i + 1 + '月';
span.onmouseover = function() { this.style.backgroundColor = '#DDECFE'; };
span.onmouseout = function() { var _this = this; setTimeout(function() { _this.style.backgroundColor = ''; }, 200); };
span.onclick = function() { cal_month = parseInt(this.title, 10) - 1; Cal_SetValue(); Cal_OptionDay(); Cal_OptionMonth(); };
_$('calym_month').appendChild(span);
}
};
var Cal_OptionDay = function() {
var container = _$('calendarcontainer'), txtym = _$('caltxtYearMonth'); container.innerHTML = '';
txtym.value = cal_year + '年' + (parseInt(cal_month) > 8 ? (cal_month + 1) : '0' + (cal_month + 1)) + '月';
var maxprev = new Date(cal_year, parseInt(cal_month, 10), 0).getDate(), tempday = new Date(cal_year, parseInt(cal_month, 10), 1).getDay(), tmonth = (tempday == 0 ? cal_month : (cal_month == 0 ? 11 : (cal_month - 1))), tyear = (tempday == 0 ? cal_year : (tmonth == 11 ? (cal_year - 1) : cal_year)), tday = (tempday == 0 ? 1 : (maxprev - tempday + 1));
for (var i = 0; i < 42; i++) {
var cal_nd = new Date(tyear, tmonth, tday), li = document.createElement('li'); tday++;
if (cal_nd.getMonth() != cal_month) { li.style.backgroundColor = '#F0F0F0'; li.style.color = '#999999'; li.id = i + '|#999999'; } else { li.id = i + '|#163061'; }
if (cal_nd.getMonth() == cal_month && cal_nd.getDate() == cal_day) { li.className = 'currday'; }
if (cal_nd.getFullYear() == new Date().getFullYear() && cal_nd.getMonth() == new Date().getMonth() && cal_nd.getDate() == new Date().getDate()) { li.className = (new Date().getDate() == cal_day ? 'today' : 'wtoday'); }
li.title = cal_nd.getFullYear() + '/' + (cal_nd.getMonth() + 1 > 9 ? cal_nd.getMonth() + 1 : '0' + (cal_nd.getMonth() + 1)) + '/' + (cal_nd.getDate() > 9 ? cal_nd.getDate() : '0' + cal_nd.getDate());
li.value = cal_nd.getFullYear() + '/' + cal_nd.getMonth() + '/' + cal_nd.getDate();
li.innerHTML = cal_nd.getDate();
li.onmouseover = function() { this.style.backgroundColor = '#DDECFE'; };
li.onmouseout = function() { var _this = this; setTimeout(function() { _this.style.backgroundColor = (_this.id.split('|')[1] == '#999999' ? '#F0F0F0' : ''); }, 200); };
li.onclick = function() { var cal_nd = new Date(this.title); cal_nd = new Date(cal_nd.getFullYear() + '/' + (cal_nd.getMonth() + 1) + '/' + cal_nd.getDate()); cal_year = cal_nd.getFullYear(); cal_month = cal_nd.getMonth(); cal_day = cal_nd.getDate(); Cal_OptionDay(); Cal_SetValue(); Cal_Hidden(); };
container.appendChild(li);
}
};
var Cal_OptionWeek = function() { var cal_week = new Array('日', '一', '二', '三', '四', '五', '六'); _$('calweekbar').innerHTML = ''; for (var i = 0; i < cal_week.length; i++) { var li = document.createElement('li'); li.innerHTML = cal_week[i]; _$('calweekbar').appendChild(li); } };
var Cal_IsTime = function(h, m, s) { var bool = true; if (h < 0 || h > 23) bool = false; if (m < 0 || m > 59) bool = false; if (s < 0 || s > 59) bool = false; return bool; };
var Cal_IsDate = function(dateStr) { var datePat = /^(\d{4})(\-)(\d{1,2})(\-)(\d{1,2})$/, matchArray = dateStr.match(datePat); if (matchArray == null) return false; var year = matchArray[1], month = matchArray[3], day = matchArray[5]; if (month < 1 || month > 12) { return false; } if (day < 1 || day > 31) { return false; } if ((month == 4 || month == 6 || month == 9 || month == 11) && day == 31) { return false; } if (month == 2) { var isleap = (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0)); if (day > 29 || (day == 29 && !isleap)) { return false; } } return true; };
var Cal_Parentval = function(obj) { if (obj.parentNode != document.body) { cal_val += obj.parentNode.scrollTop; Cal_Parentval(obj.parentNode); } };
var Cal_SetNowTime = function() { var cal_hours = new Date().getHours(), cal_minutes = new Date().getMinutes(), cal_seconds = new Date().getSeconds(); _$('cal_timehh').value = cal_hours > 9 ? cal_hours : '0' + cal_hours; _$('cal_timemm').value = cal_minutes > 9 ? cal_minutes : '0' + cal_minutes; _$('cal_timess').value = cal_seconds > 9 ? cal_seconds : '0' + cal_seconds; Cal_ShowNowTime(); };
var Cal_SetTimeVal = function(volb) { _$('cal_timehh').value = parseInt(volb[0], 10) > 9 ? volb[0] : '0' + parseInt(volb[0], 10); _$('cal_timemm').value = parseInt(volb[1], 10) > 9 ? volb[1] : '0' + parseInt(volb[1], 10); _$('cal_timess').value = parseInt(volb[2], 10) > 9 ? volb[2] : '0' + parseInt(volb[2], 10); };
var Cal_SetValue = function() { cal_obj.focus(); var ymdval = cal_year + '-' + (parseInt(cal_month, 10) + 1 > 9 ? parseInt(cal_month, 10) + 1 : '0' + (parseInt(cal_month, 10) + 1)) + (cal_ymd ? ('-' + (cal_day > 9 ? cal_day : '0' + cal_day)) : ''); var timeval = _$('cal_timehh').value + ':' + _$('cal_timemm').value + ':' + _$('cal_timess').value; cal_obj.value = (cal_snt && !cal_ymd) ? timeval : (cal_snt ? ymdval + ' ' + timeval : ymdval); cal_obj.blur(); };
var Cal_ShowNowTime = function() { var cal_hours = new Date().getHours(), cal_minutes = new Date().getMinutes(), cal_seconds = new Date().getSeconds(); _$('cal_shownowtime').innerHTML = (cal_hours > 9 ? cal_hours : '0' + cal_hours) + ':' + (cal_minutes > 9 ? cal_minutes : '0' + cal_minutes) + ':' + (cal_seconds > 9 ? cal_seconds : '0' + cal_seconds) + ' '; };
var Cal_ShowTimePanel = function() { _$('cal_timelayer').style.display = 'block'; cal_timer = setTimeout(function() { if (cal_height - _$('cal_timelayer').clientHeight > cal_timeout) { _$('cal_timelayer').style.height = _$('cal_timelayer').clientHeight + cal_timeout + 'px'; if (cal_timeout < 3) { cal_timeout = 3; } else { cal_timeout -= 3; } Cal_ShowTimePanel(); } else { _$('cal_timelayer').style.height = cal_height + 'px'; _$('cal_daylayer').style.display = 'none'; cal_timeout = 30; cal_interval = setInterval(function() { Cal_ShowNowTime(); }, 1000); } }, cal_timeout); };
var Cal_ShowYMPanel = function() { _$('cal_ymlayer').style.display = 'block'; cal_timer = setTimeout(function() { if (cal_height - _$('cal_ymlayer').clientHeight > cal_timeout) { _$('cal_ymlayer').style.height = _$('cal_ymlayer').clientHeight + cal_timeout + 'px'; if (cal_timeout < 3) { cal_timeout = 3; } else { cal_timeout -= 3; } Cal_ShowYMPanel(); } else { _$('cal_ymlayer').style.height = cal_height + 'px'; _$('cal_daylayer').style.display = 'none'; cal_timeout = 30; } }, cal_timeout); };
var Cal_Previou = function() { cal_month = parseInt(cal_month, 10) - 1; if (cal_month == -1) { cal_year = parseInt(cal_year, 10) - 1; cal_month = 11; } Cal_OptionDay(); Cal_SetValue(); };
var Cal_Next = function() { cal_month = parseInt(cal_month, 10) + 1; if (cal_month == 12) { cal_year = parseInt(cal_year, 10) + 1; cal_month = 0; } Cal_OptionDay(); Cal_SetValue(); };
var Cal_ToMonth = function() { cal_year = new Date().getFullYear(); cal_month = new Date().getMonth(); Cal_OptionDay(); Cal_OptionYear(); Cal_OptionMonth(); if (cal_ymd) { Cal_HideYMPanel(); } else { Cal_Hidden(); } Cal_SetValue(); };
var Cal_ToDay = function() { cal_year = new Date().getFullYear(); cal_month = new Date().getMonth(); cal_day = new Date().getDate(); Cal_Hidden(); Cal_SetValue(); };
var Cal_HideTimePanel = function() { Cal_SetValue(); clearInterval(cal_interval); if (!cal_ymd) { Cal_Hidden(); return; } _$('cal_daylayer').style.display = 'block'; cal_timer = setTimeout(function() { if (_$('cal_timelayer').clientHeight > cal_timeout) { _$('cal_timelayer').style.height = _$('cal_timelayer').clientHeight - cal_timeout + 'px'; if (cal_timeout < 3) { cal_timeout = 3; } else { cal_timeout -= 3; } Cal_HideTimePanel(); } else { _$('cal_timelayer').style.display = 'none'; _$('cal_timelayer').style.height = '0px'; cal_timeout = 30; } }, cal_timeout); };
var Cal_HideYMPanel = function() { Cal_SetValue(); if (!cal_ymd) { Cal_Hidden(); return; } _$('cal_daylayer').style.display = 'block'; cal_timer = setTimeout(function() { if (_$('cal_ymlayer').clientHeight > cal_timeout) { _$('cal_ymlayer').style.height = _$('cal_ymlayer').clientHeight - cal_timeout + 'px'; if (cal_timeout < 3) { cal_timeout = 3; } else { cal_timeout -= 3; } Cal_HideYMPanel(); } else { _$('cal_ymlayer').style.display = 'none'; _$('cal_ymlayer').style.height = '0px'; cal_timeout = 30; } }, cal_timeout); };
var Cal_Hidden = function() { Cal_SetValue(); cal_obj.focus(); cal_timeout = 30; clearInterval(cal_interval); clearTimeout(cal_timer); _$('cal_timelayer').style.height = '0px'; _$('cal_timelayer').style.display = 'none'; _$('cal_ymlayer').style.height = '0px'; _$('cal_ymlayer').style.display = 'none'; _$('calendarcontain').style.display = 'none'; _$('calendarcontain_filter').style.display = 'none'; _$('calendarcontain_iframe').style.display = 'none'; cal_obj.blur(); cal_open = false; };
var Cal_Clear = function() { Cal_Hidden(); cal_obj.focus(); cal_obj.value = ''; cal_obj.blur(); };

 

3、calender.css内容如下：

/* --- calendar --- */
.calendarlayer{margin:0;padding:0;border:0;}
.calendarlayer .caltdinput{border-left:1px solid #B0BFBF;}
.calendarlayer .caltdinput input{float:left;width:100%;height:18px;line-height:18px;margin:0;border:1px solid #B0BFBF;border-left:0;border-right:0;}
.calendarlayer .caltdbutton{width:19px;border-right:1px solid #B0BFBF;}
.calendarlayer .caltdbutton .calbutton{float:left;display:block;width:16px;height:16px;padding:2px 1px 2px 2px;border:1px solid #B0BFBF;border-left:0;border-right:0;background:url(images/calico_view.gif) 2px 2px no-repeat;cursor:pointer;overflow:hidden;}
.calendarcontain_iframe{display:none;position:absolute;z-index:0;width:234px;height:181px;}
.calendarcontain_filter{display:none;position:absolute;z-index:1;width:228px;height:179px;margin:0;padding:0;border:0;background:#000000;opacity:0.1;-moz-opacity:0.1;box-shadow:0px 0px 2px 2px #000,0px 0px 2px 2px #000;-moz-box-shadow:0px 0px 2px 2px #000,0px 0px 2px 2px #000;-webkit-box-shadow:0px 0px 2px 2px #000,0px 0px 2px 2px #000;filter:progid:DXImageTransform.Microsoft.alpha(opacity=30) progid:DXImageTransform.Microsoft.Blur(pixelradius=3);}
.calendarcontain{display:none;position:absolute;z-index:2;width:228px;height:179px;background:#ffffff;overflow:hidden;clear:both;}
.calendarcontain .caltimelayer{display:none;width:226px;height:0px;border:1px solid #718BB7;background:#ffffff;font-family:simsun;font-size:13px;color:#163061;overflow:hidden;}
.calendarcontain .caltimelayer .caltime{width:226px;height:100px;padding-top:49px;text-align:center;}
.calendarcontain .caltimelayer .caltime .calnowtimeview{margin-top:15px;line-height:19px;}
.calendarcontain .caltimelayer .caltime .calnowtimeview .calshownowtime{line-height:19px;font-family:simsun;vertical-align:middle;}
.calendarcontain .caltimelayer .calfooter{height:24px;padding-top:4px;border-top:1px solid #A3BAD9;background:url(images/calbottom_bg.gif) repeat-x bottom left;text-align:center;clear:both;}
.calendarcontain .calymlayer{display:none;width:226px;height:0px;border:1px solid #718BB7;background:#ffffff;font-family:simsun;font-size:13px;color:#163061;overflow:hidden;}
.calendarcontain .calymlayer span{display:block;float:left;width:53px;height:18px;margin:2px 0 0 2px;_margin-left:1px;padding:4px 0 0 0;overflow:hidden;text-align:center;cursor:pointer;overflow:hidden;}
.calendarcontain .calymlayer span.curr{width:51px;height:17px;padding:3px 0 0 0;border:1px solid #8DB2E3;background:url(images/calbottom_bg.gif) repeat-x bottom left;}
.calendarcontain .calymlayer .calymmonth{float:left;width:112px;height:148px;padding-top:1px;border-right:1px solid #A3BAD9;}
.calendarcontain .calymlayer .calymyear{float:left;width:113px;height:148px;padding-top:1px;}
.calendarcontain .calymlayer .calymyear .divlayer{height:20px;padding:4px 22px 0 20px;}
.calendarcontain .calymlayer .calymyear .btnleft{float:left;width:15px;height:15px;border:0;margin:0;padding:0;background:url(images/calbtn_bg.gif) no-repeat 0px -45px;overflow:hidden;cursor:pointer;}
.calendarcontain .calymlayer .calymyear .btnright{float:right;width:15px;height:15px;border:0;margin:0;padding:0;background:url(images/calbtn_bg.gif) no-repeat 0px -60px;overflow:hidden;cursor:pointer;}
.calendarcontain .calymlayer .calfooter{height:24px;padding-top:4px;border-top:1px solid #A3BAD9;background:url(images/calbottom_bg.gif) repeat-x bottom left;text-align:center;clear:both;}
.calendarcontain .caldaylayer{border:1px solid #718BB7;font-family:simsun;font-size:13px;}
.calendarcontain .caldaylayer .calheader{height:23px;padding:7px 8px 0 8px;background:#163061 url(images/caltop_bg.gif) repeat-x top left;text-align:center;}
.calendarcontain .caldaylayer .calheader .btnleft{width:15px;height:15px;border:0;margin:0;padding:0;background:url(images/calbtn_bg.gif) no-repeat 0px -15px;overflow:hidden;cursor:pointer;}
.calendarcontain .caldaylayer .calheader .textinfo{width:111px;height:15px;line-height:15px;border:0;margin:0;padding:0;background:url(images/caltop_bg.gif) repeat-x 0px -7px;color:#ffffff;text-align:right;vertical-align:top;font-family:Verdana;font-size:13px;}
.calendarcontain .caldaylayer .calheader .textspace{width:0;height:0;border:0;margin:0;padding:0;padding-left:23px;background:url(images/caltop_bg.gif) repeat-x 0px -9px;}
.calendarcontain .caldaylayer .calheader .btndown{width:15px;height:15px;border:0;margin:0;padding:0;background:url(images/calbtn_bg.gif) no-repeat 0px 0px;overflow:hidden;cursor:pointer;}
.calendarcontain .caldaylayer .calheader .btnright{width:15px;height:15px;border:0;margin:0;padding:0;background:url(images/calbtn_bg.gif) no-repeat 0px -30px;overflow:hidden;cursor:pointer;}
.calendarcontain .caldaylayer .calweekbar{height:20px;background:url(images/calbottom_bg.gif) repeat-x bottom left;color:#163061;clear:both;}
.calendarcontain .caldaylayer .calweekbar ul{margin:0;padding:0;}
.calendarcontain .caldaylayer .calweekbar li{float:left;width:21px;height:16px;padding:4px 0 0 11px;list-style:none;text-decoration:none;}
.calendarcontain .caldaylayer .calcontainer{height:96px;padding:1px;border-top:1px solid #A3BAD9;border-bottom:1px solid #A3BAD9;color:#163061;clear:both;}
.calendarcontain .caldaylayer .calcontainer ul{margin:0;padding:0;font-family:Arial;font-size:11px;}
.calendarcontain .caldaylayer .calcontainer li{float:left;width:32px;height:15px;padding-top:1px;list-style:none;background:#F8F8F8;text-align:center;text-decoration:none;cursor:pointer;overflow:hidden;}
.calendarcontain .caldaylayer .calcontainer li.currday{width:30px;height:14px;padding-top:0;background:url(images/calbottom_bg.gif) repeat-x bottom left;border:1px solid #8DB2E3;font-weight:bold;font-size:12px;}
.calendarcontain .caldaylayer .calcontainer li.wtoday{width:30px;height:14px;padding-top:0;border:1px solid #8DB2E3;font-weight:bold;font-size:12px;color:#ff0000;}
.calendarcontain .caldaylayer .calcontainer li.today{width:30px;height:14px;padding-top:0;background:url(images/calbottom_bg.gif) repeat-x bottom left;border:1px solid #8DB2E3;font-weight:bold;font-size:12px;color:#ff0000;}
.calendarcontain .caldaylayer .calfooter{height:23px;padding-top:4px;background:url(images/calbottom_bg.gif) repeat-x bottom left;text-align:center;clear:both;}
.calendarcontain .caltonow{width:63px;height:19px;border:0;vertical-align:middle;background:url(images/caltonow.gif) no-repeat top left;background-color:transparent;cursor:pointer;}
.calendarcontain .caltotime{width:41px;height:19px;border:0;background:url(images/caltotime.gif) no-repeat top left;background-color:transparent;cursor:pointer;}
.calendarcontain .caltomonth{width:41px;height:19px;border:0;background:url(images/caltomonth.gif) no-repeat top left;background-color:transparent;cursor:pointer;}
.calendarcontain .caltoday{width:41px;height:19px;border:0;background:url(images/caltoday.gif) no-repeat top left;background-color:transparent;cursor:pointer;}
.calendarcontain .calsubmit{width:41px;height:19px;border:0;background:url(images/calsubmit.gif) no-repeat top left;background-color:transparent;cursor:pointer;}
.calendarcontain .calclean{width:41px;height:19px;border:0;background:url(images/calclean.gif) no-repeat top left;background-color:transparent;cursor:pointer;}
.calendarcontain .calbtnhover:hover{background-position:left -19px;}

 

3、测试html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Calendar</title>
<link href="calendar.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="calendar.js" charset="GB2312"></script>
</head>
<body>
<div style="padding:30px;">

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div style="height:350px;overflow:auto;">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
年月日：<input type="text" onclick="showcalendar(event, this, true);" /><br /><br />
年月：<input type="text" onclick="showcalendar(event, this, false);" /><br /><br />
年月日 时分秒：<input type="text" onclick="showcalendar(event, this, true, true);" /><br /><br />
时分秒：<input type="text" onclick="showcalendar(event, this, false, true);" /><br /><br />
<div style="padding-left:10px;">
<table border="0" cellpadding="0" cellspacing="0" class="calendarlayer">
<tr>
<td class="caltdinput"><input type="text" id="txtCalendar1" onclick="showcalendar(event, this);" /></td>
<td class="caltdbutton"><span class="calbutton" onclick="showcalendar(event, document.getElementById('txtCalendar1'))"></span></td>
</tr>
</table>
</div> <br /><br />
<input onfocus="showCalendar(this.id,this);" onblur="hideCalendar();" name="ttt" type="text" id="ttt" title="日期" />
<br /><br /><br />
<input onfocus="showCalendar(this.id,this,true,true);" onblur="hideCalendar();" name="tttaa" type="text" id="showtime" title="时间" />
<br /><br /><br />
<input onfocus="showCalendar(this.id,this,false,true);" onblur="hideCalendar();" name="tttbb" type="text" id="Text1" title="时间" />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div> <br /><br /><br /><br />
<select>
<option>test test test test test </option>
<option>test test test test test test test </option>
<option>test test test </option>
</select>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</body>
</html>

 

4.ok啦！