JavaScript日期控件

1、创建Calendar.js文件

/*********************************************************
 * 	使用方法
 * 		控件调用onclick="fPopCalendar(event,this,this)"
 * 	如下，给控件设置为readonly
 * 	<input type="text" onclick="fPopCalendar(event,this,this)" onfocus="this.select()" readonly="readonly" />
 * 	
 * 	如果页面乱码，把下面包含汉字的定义项放到页面中即可
********************************************************/
var gMonths=new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
var WeekDay=new Array("日","一","二","三","四","五","六");
var strToday="今天";
var strYear="年";
var strMonth="月";
var strDay="日";
var splitChar="-";
var startYear=1900;
var endYear=2050;
var dayTdHeight=20;
var dayTdTextSize=12;
var gcNotCurMonth="#E0E0E0";
var gcRestDay="#FF0000";
var gcWorkDay="#444444";
var gcMouseOver="#79D0FF";
var gcMouseOut="#F4F4F4";
var gcToday="#444444";
var gcTodayMouseOver="#6699FF";
var gcTodayMouseOut="#79D0FF";
var gdCtrl=new Object();
var goSelectTag=new Array();
var gdCurDate=new Date();
var giYear=gdCurDate.getFullYear();
var giMonth=gdCurDate.getMonth()+1;
var giDay=gdCurDate.getDate();
function $$(){var elements=new Array();for(var i=0;i<arguments.length;i++) {var element=arguments[i];if(typeof(arguments[i])=='string'){element=document.getElementById(arguments[i]);}if(arguments.length==1){return element;}elements.Push(element);}return elements;}
Array.prototype.Push=function(){var startLength=this.length;for(var i=0;i<arguments.length;i++){this[startLength+i]=arguments[i];}return this.length;}
String.prototype.HexToDec=function(){return parseInt(this,16);}
String.prototype.cleanBlank=function(){return this.isEmpty()?"":this.replace(/\s/g,"");}
function checkColor(){var color_tmp=(arguments[0]+"").replace(/\s/g,"").toUpperCase();var model_tmp1=arguments[1].toUpperCase();var model_tmp2="rgb("+arguments[1].substring(1,3).HexToDec()+","+arguments[1].substring(1,3).HexToDec()+","+arguments[1].substring(5).HexToDec()+")";model_tmp2=model_tmp2.toUpperCase();if(color_tmp==model_tmp1 ||color_tmp==model_tmp2){return true;}return false;}
function $V(){return $$(arguments[0]).value;}
function fPopCalendar(evt,popCtrl,dateCtrl){
    evt.cancelBubble=true;
    gdCtrl=dateCtrl;
    if(gdCtrl.value == ''){
        fSetYearMon(giYear,giMonth);
    }else{
        var aDates = gdCtrl.value.split('-')
        fSetYearMon(aDates[0],aDates[1]);

    }
    
    var point=fGetXY(popCtrl);
    with($$("calendardiv").style){
        left=point.x+"px";
        top=(point.y+popCtrl.offsetHeight+1)+"px";
        visibility='visible';
        //zindex='99999';
        position='absolute';
    }
    $$("calendardiv").focus();
}
function fSetDate(iYear,iMonth,iDay){
    var iMonthNew=new String(iMonth);
    var iDayNew=new String(iDay);
    if(iMonthNew.length<2){
        iMonthNew="0"+iMonthNew;
    }
    if(iDayNew.length<2){
        iDayNew="0"+iDayNew;
    }
    gdCtrl.value=iYear+splitChar+iMonthNew+splitChar+iDayNew;
    fHideCalendar();
}
function fHideCalendar(){$$("calendardiv").style.visibility="hidden";for(var i=0;i<goSelectTag.length;i++){goSelectTag[i].style.visibility="visible";}goSelectTag.length=0;}
function fSetSelected(){
    var iOffset=0;
    var iYear=parseInt($$("tbSelYear").value);
    var iMonth=parseInt($$("tbSelMonth").value);
    var aCell=$$("cellText"+arguments[0]);
    aCell.bgColor=gcMouseOut;
    with(aCell){
        var iDay=parseInt(innerHTML);
        if(checkColor(style.color,gcNotCurMonth)){
            iOffset=(innerHTML>10)?-1:1;
        }
        iMonth+=iOffset;
        if(iMonth<1){iYear--;iMonth=12;}
        else if(iMonth>12){iYear++;iMonth=1;}
    }
    fSetDate(iYear,iMonth,iDay);
}
function Point(iX,iY){this.x=iX;this.y=iY;}
function clearDate(){gdCtrl.value = '';fHideCalendar();}
function fBuildCal(iYear,iMonth){var aMonth=new Array();for(var i=1;i<7;i++){aMonth[i]=new Array(i);}var dCalDate=new Date(iYear,iMonth-1,1);var iDayOfFirst=dCalDate.getDay();var iDaysInMonth=new Date(iYear,iMonth,0).getDate();var iOffsetLast=new Date(iYear,iMonth-1,0).getDate()-iDayOfFirst+1;var iDate=1;var iNext=1;for(var d=0;d<7;d++){aMonth[1][d]=(d<iDayOfFirst)?(iOffsetLast+d)*(-1):iDate++;}for(var w=2;w<7;w++){for(var d=0;d<7;d++){aMonth[w][d]=(iDate<=iDaysInMonth)?iDate++:(iNext++)*(-1);}}return aMonth;}
function fDrawCal(iYear,iMonth,iCellHeight,iDateTextSize){
    var colorTD=" bgcolor='"+gcMouseOut+"' bordercolor='"+gcMouseOut+"'";
    var styleTD=" valign='middle' align='center' style='height:"+iCellHeight+"px !important;font-weight:bolder;font-size:"+iDateTextSize+"px;";
    var dateCal="";
    dateCal+="<tr>";
    for(var i=0;i<7;i++){
        dateCal+="<td "+colorTD+styleTD+"color:#990099'>"+WeekDay[i]+"</td>";
    }
    dateCal+="</tr>";
    for(var w=1;w<7;w++){
        dateCal+="<tr>";
        for(var d=0;d<7;d++){
            var tmpid=w+""+d;
            dateCal+="<td"+styleTD+"cursor:pointer;' onclick='fSetSelected("+tmpid+")'>";
            dateCal+="<span id='cellText"+tmpid+"'></span>";
            dateCal+="</td>";
        }
        dateCal+="</tr>";
    }
    return dateCal;
}
function fUpdateCal(iYear,iMonth){
    var myMonth=fBuildCal(iYear,iMonth);
    var i=0;
    var aDates = gdCtrl.value.split('-')
    for(var w=1;w<7;w++){
        for(var d=0;d<7;d++){
            with($$("cellText"+w+""+d)){
                parentNode.bgColor=gcMouseOut;
                parentNode.borderColor=gcMouseOut;
                parentNode.onmouseover=function(){
                    this.bgColor=gcMouseOver;
                };
                parentNode.onmouseout=function(){
                    this.bgColor=gcMouseOut;
                };
                if(myMonth[w][d]<0){
                    style.color=gcNotCurMonth;
                    innerHTML=Math.abs(myMonth[w][d]);
                }else{
                    style.color=((d==0)||(d==6))?gcRestDay:gcWorkDay;
                    innerHTML=myMonth[w][d];
                    
                    if(iYear==giYear && iMonth==giMonth && myMonth[w][d]==giDay){
                        style.color=gcToday;
                        parentNode.bgColor=gcTodayMouseOut;
                        parentNode.onmouseover=function(){
                            this.bgColor=gcTodayMouseOver;
                        };
                        parentNode.onmouseout=function(){
                            this.bgColor=gcTodayMouseOut;
                        };
                    }
                    if(aDates.length == 3 && iYear==aDates[0] && iMonth==aDates[1] && myMonth[w][d]==aDates[2]){
                        style.color=gcToday;
                        parentNode.bgColor='#ffdd66';
                        parentNode.onmouseover=function(){
                            this.bgColor='#ffdd66';
                        };
                        parentNode.onmouseout=function(){
                            this.bgColor='#ffdd66';
                        };
                    }

                }
            }
        }
    }
}
function fSetYearMon(iYear,iMon){$$("tbSelMonth").options[iMon-1].selected=true;for(var i=0;i<$$("tbSelYear").length;i++){if($$("tbSelYear").options[i].value==iYear){$$("tbSelYear").options[i].selected=true;}}fUpdateCal(iYear,iMon);}
function fPrevMonth(){var iMon=$$("tbSelMonth").value;var iYear=$$("tbSelYear").value;if(--iMon<1){iMon=12;iYear--;}fSetYearMon(iYear,iMon);}
function fNextMonth(){var iMon=$$("tbSelMonth").value;var iYear=$$("tbSelYear").value;if(++iMon>12){iMon=1;iYear++;}fSetYearMon(iYear,iMon);}
function fGetXY(aTag){
    var oTmp=aTag;
    var pt=new Point(0,0);
    do{
        pt.x+=oTmp.offsetLeft;
        pt.y+=oTmp.offsetTop;
        if(oTmp.offsetParent){
            oTmp=oTmp.offsetParent;
        }else{
            break;
        }
    }while(oTmp.tagName.toUpperCase()!="BODY");
    return pt;
}
function getDateDiv(){
    var noSelectForIE="";
    var noSelectForFireFox="";
    if(document.all){
        noSelectForIE="onselectstart='return false;'";
    }else{
        noSelectForFireFox="-moz-user-select:none;";
    }
    var dateDiv="";
    dateDiv += "<div id='calendardiv'  onclick='event.cancelBubble=true' " + noSelectForIE + " style='" + noSelectForFireFox + "position:absolute;z-index:99999;visibility:hidden;border:1px solid #999999;width:174px;'>";
    dateDiv += "<table border='0' bgcolor='#E0E0E0' cellpadding='1' cellspacing='1' width='100%'  >";
    dateDiv+="<tr>";
    dateDiv+="<td><input type='button' id='PrevMonth' value='<' style='height:20px;width:20px;font-weight:bolder;' onclick='fPrevMonth()'>";
    dateDiv+="</td><td><select id='tbSelYear' style='border:1px solid;' onchange='fUpdateCal($V(\"tbSelYear\"),$V(\"tbSelMonth\"))'>";
    for(var i=startYear;i<endYear;i++){
        dateDiv+="<option value='"+i+"'>"+i+strYear+"</option>";
    }
    dateDiv+="</select></td><td>";
    dateDiv+="<select id='tbSelMonth' style='border:1px solid;' onchange='fUpdateCal($V(\"tbSelYear\"),$V(\"tbSelMonth\"))'>";
    for(var i=0;i<12;i++){
        dateDiv+="<option value='"+(i+1)+"'>"+gMonths[i]+"</option>";
    }
    dateDiv+="</select></td><td>";
    dateDiv+="<input type='button' id='NextMonth' value='>' style='height:20px;width:20px;font-weight:bolder;' onclick='fNextMonth()'>";
    dateDiv+="</td>";dateDiv+="</tr><tr>";
    dateDiv+="<td align='center' colspan='4'>";
    dateDiv+="<div style='background-color:#cccccc'><table width='100%' border='0' cellpadding='3' cellspacing='1'>";
    dateDiv+=fDrawCal(giYear,giMonth,dayTdHeight,dayTdTextSize);
    dateDiv+="</table></div>";
    dateDiv+="</td>";
    dateDiv+="</tr><tr><td align='center' colspan='4' nowrap>";
    dateDiv+="<span onclick=\"clearDate();\" style=\"font-size:12px;cursor:pointer;\"  onmouseover='this.style.color=\""+gcMouseOver+"\"' onmouseout='this.style.color=\"#000000\"'>清空</span>      <span style='cursor:pointer; font-size:12px' onclick='fSetDate(giYear,giMonth,giDay)' onmouseover='this.style.color=\""+gcMouseOver+"\"' onmouseout='this.style.color=\"#000000\"'>"+strToday+":"+giYear+strYear+giMonth+strMonth+giDay+strDay+"</span>";
    dateDiv+="</tr></tr>";
    dateDiv+="</table><iframe style='position:absolute; left:0px;top:0px;width:174px;height:190px;z-index:-1;' frameborder='0'></iframe></div>";
    return dateDiv;
}
with(document){onclick=fHideCalendar;write(getDateDiv());}


// 对Date的扩展，将 Date 转化为指定格式的String 
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符， 
// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) 
// 例子： 
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 
// (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18 
Date.prototype.Format = function(fmt){
    var o = { 
        "M+" : this.getMonth()+1, //月份 
        "d+" : this.getDate(), //日 
        "h+" : this.getHours(), //小时 
        "m+" : this.getMinutes(), //分 
        "s+" : this.getSeconds(), //秒 
        "q+" : Math.floor((this.getMonth()+3)/3), //季度 
        "S" : this.getMilliseconds() //毫秒 
    }; 
    if(/(y+)/.test(fmt)) 
        fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 
        for(var k in o) 
            if(new RegExp("("+ k +")").test(fmt)) 
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length))); 
    return fmt; 
    
}

2、使用

<input type="text" onclick="fPopCalendar(event,this,this)" readonly="readonly"  />