javascript脚本实现日历控件

HTML5培训技术

<scripttype="text/javascript" language="javascript">

进来项目中要用到日期控件，又无先例，故而本人狠下决心，参照多方，写下这段js ver =function(){calendar.isFocus = true;}

this.panel.onmouseout =function(){calendar.isFocus = false;}

this.dateControl.onblur = function(){

if(!calendar.isFocus){

calendar.hide();

}

this.getElementById("selectCurrent").onclick = function(){

calendar.date = newDate();

calendar.valueSelected(calendar.date);

calendar.hide();

}

this.getElementById("emptyCalendar").onclick =function(){calendar.dateControl.value = "";calendar.hide();}

this.getElementById("closeCalendar").onclick =function(){calendar.hide();}

this.getElementById("PrevYear").onclick = function(){

calendar.date =calendar.date.dateAdd("y",-1);

calendar.draw();

}

if(this.getElementById("PrevMonth")){

this.getElementById("PrevMonth").onclick = function(){

calendar.date =calendar.date.dateAdd("m",-1);

calendar.draw();

}

this.getElementById("NextMonth").onclick = function(){

calendar.date =calendar.date.dateAdd("m",1);

calendar.draw();

}

this.getElementById("NextYear").onclick = function(){

calendar.date =calendar.date.dateAdd("y",1);

calendar.draw();

}

this.getElementById("selectThisYear").onclick =function(){calendar.selectThisYear();}

if("d" == this.type){

this.getElementById("selectThisMonth").onclick= function(){calendar.selectThisMonth();}

}

var elements =getElementsByClassName(this.document, "li", "thisMonth");

for(var i=0; i

elements[i].onclick = function(){

calendar.date = this.title.toDate();

calendar.valueSelected(calendar.date);

calendar.hide();

}

Calendar.prototype.selectThisYear= function(){

var calendar = this;

var curYear = this.date.getFullYear();

var beginYear = this.beginDate.getFullYear();

var endYear = this.endDate.getFullYear();

var spanObj = this.getElementById("selectThisYear");

var selectStr = "";

spanObj.innerHTML = selectStr;

var selectYearObj = spanObj.childNodes(0);

selectYearObj.value = curYear;

selectYearObj.onchange = function(){

calendar.date.setFullYear(selectYearObj.value);

calendar.draw();

}

Calendar.prototype.selectThisMonth= function(){

var calendar = this;

var curMonth = this.date.getMonth() + 1;

var curYear = this.date.getFullYear();

var endYear = this.endDate.getFullYear();

var endMonth = 12;

if(curYear == endYear){

endMonth = this.endDate.getMonth + 1;

}

var spanObj = this.getElementById("selectThisMonth");

var selectStr = "";

spanObj.innerHTML = selectStr;

var selectMonthObj = spanObj.childNodes(0);

selectMonthObj.value = curMonth;

selectMonthObj.onchange = function(){

calendar.date.setMonth(selectMonthObj.value-1);

calendar.draw();

}

Calendar.prototype.valueSelected= function(date){

this.dateControl.value = date.format(this.dateFormatStyle);

}

/**

* SetAuto Height for Calendar Panel Div

Calendar.prototype.setAutoHeight= function(){

var height = this.document.body.scrollHeight;

var width = this.getElementById("calendar").style.width;

width = (parseInt(width.substr(0,width.length-1)) + 2) +"px";

this.iframe.style.height = height;

this.panel.style.height = height;

this.panel.style.width = width;

}

//Extenddocument.getElementById(id)

Calendar.prototype.getElementById= function(id){

if (typeof(id) != "string" || id =="") return null;

if(null == this.document) return null;

if (this.document.getElementById) returnthis.document.getElementById(id);

if (this.document.all) returnthis.document.all(id);

try {return eval(id);} catch(e){ returnnull;}

}

//Extendobject.getElementsByTagName(tagName)

Calendar.prototype.getElementsByTagName= function(tagName){

if(null == this.document) return null;

if (this.document.getElementsByTagName)return this.document.getElementsByTagName(tagName);

if (this.document.all) returnthis.document.all.tags(tagName);

}

/**

* Find aHTML Object by TagName and className

* @paramoElm parentNode Object

* @paramstrTagName tag name want to find

* @paramstrClassName class name

functiongetElementsByClassName(oElm, strTagName, strClassName){

var arrElements = (strTagName =="*" && oElm.all)?oElm.all:oElm.getElementsByTagName(strTagName);

var arrReturnElements = new Array();

strClassName = strClassName.replace(/-/g,"\-");

var oRegExp = newRegExp("(^|\s)" + strClassName + "(\s|$)");

var oElement;

for(var i=0; i < arrElements.length;i++){

oElement = arrElements[i];

if(oRegExp.test(oElement.className)){

arrReturnElements.push(oElement);

}

return (arrReturnElements)

}

//findthe absolute position

Calendar.prototype.getAbsPoint= function (e){

var x = e.offsetLeft;

var y = e.offsetTop;

while(e = e.offsetParent){

x += e.offsetLeft;

y += e.offsetTop;

}

return {"x": x, "y":y};

}

//æ˜¾ç¤ºæ—¥åŽ†

Calendar.prototype.show= function () {

var xy = this.getAbsPoint(this.dateControl);

this.panel.style.left = xy.x +"px";

this.panel.style.top = (xy.y +this.dateControl.offsetHeight) + "px";

this.setDisplayStyle("select","hidden");

this.panel.style.visibility ="visible";

}

//HideCalendar

Calendar.prototype.hide= function() {

this.setDisplayStyle("select","visible");

this.panel.style.visibility ="hidden";

this.isFocus = false;

}

//SetCalendar Picker visible or invisible

Calendar.prototype.setDisplayStyle= function(tagName, style) {

var tags =this.getElementsByTagName(tagName)

for(var i = 0; i < tags.length; i++){

if (tagName.toLowerCase() =="select" &&

(tags[i].name =="calendarYear" ||

tags[i].name =="calendarMonth")){

continue;

}

tags[i].style.visibility = style;

}

document.write('');

document.write("

");

《script》

上一篇：表单验证-jQuery+Validation

下一篇：jqueryajax读取联动菜单select菜单