js兼容各种浏览器的日期控件

时间：2022-07-02 13:56:00 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

js兼容各种浏览器的日期控件
<!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>兼容各种浏览器的日期控件</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
*{margin:0; padding:0;}
body{font:12px/1.5em Tahoma, Helvetica, Arial, sans-serif;}
a{text-decoration:none; color:#000;}
.inputWrap{ border:1px solid #DDD; margin:20px auto; padding:20px 30px;}
h1{margin:10px 0; padding:5px 10px; border-left:30px solid #ffd540; font-size:24px;}
input.txt{  padding:1px; border:1px solid #999;}
/*----------------------------Star=calendar--------------------------------*/
#calWrap{position:absolute; display:none;  background:#fff; z-index:9999; border:1px solid #999;}
#dateIframe{position:absolute; z-index:-1;   top:0; left:0; border:none; outline:none;}
#calWrap .tool,
#calWrap .week{clear:both;}
#calWrap span,
#calWrap #cal a{display:block; float:left;   padding:2px 3px; margin:1px 0 0 1px; background:#FFBC37; cursor:pointer; text-align:center; line-}
#calWrap .tool{background:#FFBC37;}
#calWrap .tool span{margin:0;}
#calWrap .tool #selYear{}
#calWrap .tool #preYear,
#calWrap .tool #nextYear{}
#calWrap .close{margin-top:1px; padding-right:3px; background:#FFBC37; clear:both; text-align:right; }
#calWrap #cal a{background:#D0DAFD; font-size:11px; text-decoration:none;}
#calWrap #cal a.curDate{background:#FFBC37;}
#calWrap #cal a:hover{background:#84A4F9;}
#calWrap #cal a.null{background:#EDF1FE;}
#calWrap #cal a.null:hover{background:#EDF1FE;}
/*----------------------------END=calendar--------------------------------*/
</style>
<script type="text/javascript">
/*-----------------------------------
calendar V1.0 2009.07.16
author:zqp
e-mail:zhoqiuping@gmail.com
website:applezqp.com
-----------------------------------*/
/*------------s-global----------*/
function $i(id){
	return document.getElementById(id);
}
function findPosX(obj){
	var curleft = 0;
	if (obj.offsetParent){
		while (obj.offsetParent){
			curleft += obj.offsetLeft
			obj = obj.offsetParent;
		}
	} else if (obj.x){
		curleft += obj.x;
	}
	return curleft;
}
function findPosY(obj){
	var curtop = 0;
	if (obj.offsetParent){
		while (obj.offsetParent){
			curtop += obj.offsetTop
			obj = obj.offsetParent;
		}
	} else if (obj.y){
		curtop += obj.y;
	}
	return curtop;
}
/*-----------e-global----------*/
var curDate={
	year:0,
	month:0,
	date:0
};
var selDate={
	year:0,
	month:0,
	date:0
};
var calWrap = null;
var outObj = null;
var outTxt = null;
var outBtn = null;
function calShow(txt, btn){
	if(typeof txt == 'string'){
		outTxt = $i(txt);
	}else{
		outTxt = txt;
	}
	outBtn = (arguments.length == 1)? null : btn;
	outObj = outBtn || outTxt;
	calWrap.style.display = "block";
	var posx = findPosX(outObj);
	var posy = findPosY(outObj);
	var objHeight = outObj.offsetHeight;
	calWrap.style.left = posx + "px";
	calWrap.style.top = (posy+objHeight) + "px";
}
function calHide(){
	calWrap.style.display = "none";
}
function preYear(){
	if( selDate.year <= 1900) return;
	selDate.year--;
	createCalendar();
}
function nextYear(){
	if( selDate.year >= 99999) return;
	selDate.year++;
	createCalendar();
}
function preMonth(){
	if( selDate.month <=0 ){
		selDate.year--;
		selDate.month = 11;
	}else{
		selDate.month--;
	}
	createCalendar();
}
function nextMonth(){
	if( selDate.month >=11 ){
		selDate.year++;
		selDate.month = 0;
	}else{
		selDate.month++;
	}
	createCalendar();
}
function setdate(j){
	var month, date;
	if( selDate.month < 9 ){
		month="0"+(selDate.month+1);
	}else{
		month=(selDate.month+1);
	}
	if( j < 10){
		date="0"+j;
	}else{
		date=j;
	}
	var str=selDate.year+"-"+month+"-"+date;
	outTxt.value = str;
	calHide();
	return false;
}
function createCalendar(){	
	var selDay = new Date(selDate.year, selDate.month, 1).getDay();
	var selNum = new Date(selDate.year, selDate.month+1, 0).getDate();
	$i("selYear").innerHTML = selDate.year;
	$i("selMonth").innerHTML = selDate.month+1;
	var dateA = $i("cal").getElementsByTagName("a");
	for(var i=0,j=1; i<42; i++){
		dateA[i].className = "";
		if( i>=selDay && j<=selNum){
			if(selDate.year==curDate.year && selDate.month==curDate.month && j==curDate.date){
				dateA[i].className = "curDate";
			}
			dateA[i].num = dateA[i].innerHTML = j;
			dateA[i].onclick = function(){ setdate(this.num);}
			j++;
		}else{
			dateA[i].innerHTML = "";
		}
		
	}
}
function init(){
	var cur = new Date();
	selDate.year = curDate.year = cur.getFullYear();
	selDate.month = curDate.month = cur.getMonth();
	selDate.date = curDate.date = cur.getDate();
	calWrap = document.createElement("div");
	calWrap.id = "calWrap";
	document.body.appendChild(calWrap);
	var str;
	str = "<div class='tool'>"+
	"<span id='preYear' class='btn' onclick='preYear()'><<</span>"+
	"<span id='preMonth' class='btn' onclick='preMonth()'><</span>"+
	"<span id='selYear'></span>"+
	"<span id='selMonth'></span>"+
	"<span id='nextMonth' class='btn' onclick='nextMonth()'>></span>"+
	"<span id='nextYear' class='btn' onclick='nextYear()'>>></span>"+
	"</div>"+
	"<div class='week'>"+
	"<span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span>"+
	"</div>";
	str += "<div id='cal'>";
	for(var i=0,j=1; i<42; i++){
		str += "<a href='#'></a>";
	}
	str += "</div>"+
	"<div class='close'><a href='#' onclick='calHide()'>关闭</a></div><iframe id='dateIframe' frameborder=0 width="650" height="400"></iframe>";	
	calWrap.innerHTML = str;	
	createCalendar();	
	document.onclick = function(e){
		var e = e || window.event;
		var srcElement = e.srcElement || e.target;
		if( srcElement != outTxt && srcElement != outBtn && srcElement.className != "btn" ){
			calHide();
		}
	};
}
window.onload = init;
</script>
</head>
<body>

<div class="inputWrap">
  <h1>Calendar</h1>
  <input type="text" id="txtDate" class="txt" onfocus="calShow(this)">
  <input type="button" id="btnDate" class="btn" onclick="calShow('txtDate',this)" value="Date">
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

js兼容各种浏览器的日期控件

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程