支持IE,Firefox的javascript 日历控件

效果图：

其实学习的方法，就是会搜索的方法，会搜索才能更快的解决问题。
搜索方法： javascript 日历控件 site:phpstudy.net|

<html> 
<head> 
<title>日期输入框演示-phpstudy.net</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">script 
<style> 
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*/ 
</style> 
<script> 
//这段脚本如果你的页面里有，就可以去掉它们了 
//欢迎访问我的网站phpstudy.net 
var ie =navigator.appName=="Microsoft Internet Explorer"?true:false; 
function $(objID){ 
return document.getElementById(objID); 
} 
</script> 
</head> 
<body> 
 
<script type="text/javascript"> 
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 += '<div id="calendar" style="display:none; position:absolute; z-index:9;" onclick="_cancelBubble(event)">'; 
if (ie) 
{ 
s += '<iframe width="200" height="160" src="about:blank" style="position: absolute;z-index:-1;"></iframe>'; 
} 
s += '<div style="width: 200px;"><table class="tableborder" cellspacing="0" cellpadding="0" width="100%" style="text-align: center">'; 
s += '<tr align="center" class="header"><td class="header">\\d+\:)\\d+/ig, "$1"+this.value)\'> 分</td></tr>'; 
s += '</table></div></div>'; 
s += '<div id="calendar_year" onclick="_cancelBubble(event)"><div class="col">'; 
for(var k = 1930; k <= 2019; k++) { 
s += k != 1930 && k % 10 == 0 ? '</div><div class="col">' : ''; 
s += '' + d + ''; 
if(x.getTime() < today.getTime() || (enddate && x.getTime() > enddate.getTime()) || (startdate && x.getTime() < startdate.getTime())) { 
dd.className = 'expire'; 
} else { 
dd.className = 'default'; 
} 
if(x.getFullYear() == today.getFullYear() && x.getMonth() == today.getMonth() && x.getDate() == today.getDate()) { 
dd.className = 'today'; 
dd.firstChild.title = '今天'; 
} 
if(x.getFullYear() == currday.getFullYear() && x.getMonth() == currday.getMonth() && x.getDate() == currday.getDate()) { 
dd.className = 'checked'; 
} 
x.setDate(++d); 
} 
while(d + mv <= 42) { 
dd = $("d" + (d + mv)); 
dd.innerHTML = " "; 
d++; 
} 
if(addtime) { 
$('hour').value = zerofill(hh); 
$('minute').value = zerofill(ii); 
} 
} 
function showdiv(id) { 
var p = getposition($(id)); 
$('calendar_' + id).style.left = p['x']+'px'; 
$('calendar_' + id).style.top = (p['y'] + 16)+'px'; 
$('calendar_' + id).style.display = 'block'; 
} 
function zerofill(s) { 
var s = parseFloat(s.toString().replace(/(^[\s0]+)|(\s+$)/g, '')); 
s = isNaN(s) ? 0 : s; 
return (s < 10 ? '0' : '') + s.toString(); 
} 
loadcalendar();absolutecellpadding 
</script> 
选择日期：<input name="member.birth" type="text" value="1982-1-1" size="14" readonly="readonly" onclick="showcalendar(event, this);" onfocus="showcalendar(event, this);if(this.value=='0000-00-00')this.value=''" /> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

«
»

PHP教程

PHP简介 PHP基本语法 PHP类型 PHP变量 PHP运算符 PHP控制结构 PHP函数 PHP类与对象 PHP异常处理函数库分类