 |
热门文章 |
|
|
|
|
| 兼容各种浏览器的日期控件 |
| 来源：畅无忧设计 更新时间：2009/12/1 23:08:07 阅读次数： 我要投稿 |
|
<!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">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
*{margin:0; padding:0;}
body{font:12px/1.5em Tahoma, Helvetica, Arial, sans-serif;}
a{text-decoration:none; color:#000;}
.inputWrap{width:500px; 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{width:200px; height:16px; padding:1px; border:1px solid #999;}
/*----------------------------Star=calendar--------------------------------*/
#calWrap{position:absolute; display:none; width:148px; background:#fff; z-index:9999; border:1px solid #999;}
#dateIframe{position:absolute; z-index:-1; width:148px; height:169px; top:0; left:0; border:none; outline:none;}
#calWrap .tool,
#calWrap .week{clear:both;}
#calWrap span,
#calWrap #cal a{display:block; float:left; width:14px; height:14px; padding:2px 3px; margin:1px 0 0 1px; background:#FFBC37; cursor:pointer; text-align:center; line-height:14px;}
#calWrap .tool{background:#FFBC37;}
#calWrap .tool span{margin:0;}
#calWrap .tool #selYear{width:34px;}
#calWrap .tool #preYear,
#calWrap .tool #nextYear{width:18px;}
#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></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>
<!--把下面代码加到<body>与</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> |
|
| 上一篇文章： 简单精确的时间显示效果下一篇文章： 非常漂亮的挂历式日期显示效果 |
|
|
|
注册 登录
