支持IE,Firefox的javascript 日历控件
效果图:
其实学习的方法,就是会搜索的方法,会搜索才能更快的解决问题。
搜索方法: javascript 日历控件 site:jb51.net|
日期输入框演示-jb51.net
script
body{font-size:12px;font-family:Verdana,Arial,"宋体";}
a:link {color:#464646;text-decoration:none;}
a:visited {color:#464646;text-decoration:none;}iframe
a:hover{color:#ed145b;text-decoration:underline;}
a:active{color:#ed145b;text-decoration:underline;}
td{font-size:12px}
/*想要改输入日历控件的样子就改下面的CSS样式就可以了*/
/*Date*/
.header {font: 12px Arial, Tahoma !important;font-weight: bold !important;font: 11px Arial, Tahoma;font-weight: bold;color: #154BA0;background:#C2DEED;height: 25px;padding-left: 10px;
}
.header td {padding-left: 10px;}
.header a {color: #154BA0;}
.header input {background:none;vertical-align: middle;height: 16px;}
.category {font: 12px Arial, Tahoma !important;font: 11px Arial, Tahoma;color: #92A05A;height:20px;background-color: #FFFFD9;}
.category td {border-bottom: 1px solid #DEDEB8;}
.expire, .expire a:link, .expire a:visited {color: #999999;}
.default, .default a:link, .default a:visited {color: #000000;}
.checked, .checked a:link, .checked a:visited {color: #FF0000;}
.today, .today a:link, .today a:visited {color: #00BB00;}
#calendar_year {display: none;line-height: 130%;background: #FFFFFF;position: absolute;z-index: 10;}
#calendar_year .col {float: left;background: #FFFFFF;margin-left: 1px;border: 1px solid #86B9D6;padding: 4px;}
#calendar_month {display: none;background: #FFFFFF;line-height: 130%;border: 1px solid #86B9D6;padding: 4px;position: absolute;z-index: 11;}
.tableborder {background: white;border: 1px solid #86B9D6;}
#year,#month{padding-right:10px;background:url(attachments/month_0701/8200714125245.gif) no-repeat center right;}/*图片路径可以改成自己的*/
/*Date*/
//这段脚本如果你的页面里有,就可以去掉它们了
//欢迎访问我的网站jb51.net
var ie =navigator.appName=="Microsoft Internet Explorer"?true:false;
function $(objID){
return document.getElementById(objID);
}
var controlid = null;
var currdate = null;
var startdate = null;
var enddate = null;
var yy = null;
var mm = null;
var hh = null;
var ii = null;
var currday = null;
var addtime = false;
var today = new Date();
var lastcheckedyear = false;
var lastcheckedmonth = false;
function _cancelBubble(event) {
e = event ? event : window.event ;
if(ie) {
e.cancelBubble = true;
} else {
e.stopPropagation();
}
}
function getposition(obj) {
var r = new Array();
r['x'] = obj.offsetLeft;
r['y'] = obj.offsetTop;
while(obj = obj.offsetParent) {
r['x'] += obj.offsetLeft;
r['y'] += obj.offsetTop;
}
return r;
}
function loadcalendar() {
s = '';
s += '
';
if (ie)
{
s += '';
}
s += '
- | >> | |||||
日 | 一 | 二 | 三 | 四 | 五 | 六 |
23 ? 23 : zerofill(this.value);controlid.value=controlid.value.replace(/\\d+(\:\\d+)/ig, this.value+"$1")\'> 点 59 ? 59 : zerofill(this.value);controlid.value=controlid.value.replace(/(\\d+\:)\\d+/ig, "$1"+this.value)\'> 分 |
';
s += '
';
for(var k = 1930; k
' : '';
s += '' + k + '
';
}
s += '
';
s += '
';
for(var k = 1; k ' + k + ( k
';
}
s += '
';
var nElement = document.createElement("div");
nElement.innerHTML=s;
document.getElementsByTagName("body")[0].appendChild(nElement);
// document.write(s);
document.onclick = function(event) {
$('calendar').style.display = 'none';
$('calendar_year').style.display = 'none';
$('calendar_month').style.display = 'none';
}
$('calendar').onclick = function(event) {
_cancelBubble(event);
$('calendar_year').style.display = 'none';
$('calendar_month').style.display = 'none';
}
}
function parsedate(s) {
/(\d+)\-(\d+)\-(\d+)\s*(\d*):?(\d*)/.exec(s);
var m1 = (RegExp.$1 && RegExp.$1 > 1899 && RegExp.$1 0 && RegExp.$2 0 && RegExp.$3 -1 && RegExp.$4 -1 && RegExp.$5 9 ? (mm + 1) : '0' + (mm + 1);
for(var i = 1; i ' + d + '';
if(x.getTime() enddate.getTime()) || (startdate && x.getTime()
选择日期:
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]