html时间选择控件火狐浏览器,支持IE, Firefox的日期控件 (一)

JS代码

//---------------------------------------

function Calendar(objName) { this.style = {

borderColor : "#909eff", //边框颜色

headerBackColor : "#909EFF", //表头背景颜色

headerFontColor : "#ffffff", //表头字体颜色

bodyBarBackColor : "#f4f4f4", //日历标题背景色

bodyBarFontColor : "#000000", //日历标题字体色

bodyBackColor : "#ffffff", //日历背景色

bodyFontColor : "#000000", //日历字体色

bodyHolidayFontColor : "#ff0000", //假日字体色

watermarkColor : "#d4d4d4", //背景水印色

moreDayColor : "#cccccc"

};

this.showMoreDay = false; //是否显示上月和下月的日期

this.Obj = objName; this.date = null;

this.mouseOffset = null;

this.dateInput = null;

this.timer = null;

};

Calendar.prototype.toString = function()

{ var str = this.getStyle();

str += '

style="display:none;" onselectstart="return false"

οncοntextmenu="return false"

id="Calendar">\n';

str += '

id="cdrWatermark">

id="cdrBody"

style="position:absolute;left:0px;top:0px;z-index:2;width:140px;">';

str += this.getHeader();

str += this.getBody(); str += '

Author="alin" id="cdrMenu"

style="position:absolute;left:0px;top:0px;z-index:100;display:none;" οnmοuseοver="' + this.Obj + '.showMenu(null);" οnmοuseοut="' +

this.Obj +

'.hideMenu();">

';

return str;

};

Calendar.prototype.getStyle = function()

{

var str = '

str += '.calendar{position:absolute;width:140px!important;width

:142px;height:184px!important;height

:174px;background-color:'+this.style.bodyBackColor+';border:1px

solid ' + this.style.borderColor +

';left:0px;top:0px;z-index:9999;}\n';

str += '.cdrHeader{background-color:'+ this.style.headerBackColor

+';width:140px;height:22px;font-size:12px;color:'+this.style.headerFontColor+';}\n';

str +=

'.cdrWatermark{position:absolute;left:0px;top:55px;width:140px;font-family:

Arial

Black;font-size:50px;color:'+this.style.watermarkColor+';z-index:1;text-align:center;}\n';

str += '.cdrBodyBar{background-color:' +

this.style.bodyBarBackColor + ';font-size:12px;color:' +

this.style.bodyBarFontColor + ';width:140px;height:20px;}\n';

str += '.cdrBody{width:140px;height:122px!important; height

:110px;font-size:12px;cursor:pointer;color:' +

this.style.bodyFontColor + ';}\n';

str += '.dayOver{height:16px;padding:0px;border:1px solid

black;background-color:#f4f4f4;}\n';

str += '.dayOut{padding:1px;border:none;height:16px;}\n';

str +=

'.menuOver{background-color:'+this.style.headerBackColor+';color:'+this.style.headerFontColor+';font-size:12px;}\n';

str += '.headerOver{border:1px solid

black;background-color:#f4f4f4;color:black;cursor:default;}\n';

str += '.cdrMenu{font-size:12px;border:1px solid

#000000;background-color:#ffffff;cursor:default;width:100%}\n';

str += 'html>body

#Calendar{width:142px;174px;}';

str += '\n';

return str;

};

Calendar.prototype.getHeader = function()

{

var str = '

cellSpacing="2" cellPadding="0">

Author="alin" align="center">\n';

str += '

οnmοuseοver="this.className=\'headerOver\'"

οnmοuseοut="this.className=\'\'" id="previousYear" title="上一年份"

style="cursor:pointer;width:10px;"

οnclick="'+this.Obj+'.onChangeYear(false);"><<

\n';

str += '

οnmοuseοver="this.className=\'headerOver\'"

οnmοuseοut="this.className=\'\'" id="previousMonth" title="上一月份"

style="cursor:pointer;width:10px;"

οnclick="'+this