日期控件-简单实用兼容好的js日期控件

/*----日期js-----*/

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 oldDate={
 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";
 
 var selectedDate = outTxt.value;
 var d = null;
 if (selectedDate!=null&&selectedDate!=""){
  selectedDate =  selectedDate.replace(/-/g,"/");
  d = new Date(selectedDate);
 }else{
  d = new Date();
 }
 
 selDate.year = d.getFullYear();
 selDate.month = d.getMonth();
 selDate.date=d.getDate();
 
 oldDate.year = d.getFullYear();
 oldDate.month = d.getMonth();
 oldDate.date=d.getDate();
 
 //alert(selDate.date);
 createCalendar();
}
function calHide(){
 calWrap.style.display = "none";
}
function moveHide() {//清空--panguixiang
    outObj.value = "";

}
function meizzToday()  //今天--panguixiang
  {
    var today;
    meizzTheYear = new Date().getFullYear();
    meizzTheMonth = new Date().getMonth()+1;
    today=new Date().getDate();
    //meizzSetDay(meizzTheYear,meizzTheMonth);
    if(outObj){
        outObj.value=meizzTheYear + "-" + meizzTheMonth + "-" + today;
    }
  
  }

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==oldDate.year&&selDate.month==oldDate.month&&j==oldDate.date){
    dateA[i].className = "curDate";
   }
   dateA[i].num = dateA[i].innerHTML = j;
   dateA[i].onclick = function(){ setdate(this.num);};
   j++;
  }else{
   dateA[i].innerHTML = "";
   dateA[i].onclick = function() {};//移除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='javascript:void(0)'></a>";
 }
 str += "</div>"+
 "<div class='close'><a href='#' onclick='moveHide()'>清空</a>&nbsp;&nbsp;&nbsp;"+ss(看下面的ss备注)
 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;
ss备注：
"<a href='#' href='#'

/*------日期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 .remove{margin-top:1px; padding-right:3px; background:#FFBC37; clear:both; text-align:left; }
#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;}


/*------页面调用(先引入上面的js和css)------*/

 <input type="text" id="txtDate" value="" class="txt" onfocus="calShow(this)">