ajax异步日历,用AJAX自定义日历(示例代码)

window.onload = function() {var oInput = document.getElementsByTagName(‘input‘)[0];var oCalendar = document.getElementById(‘calendar‘);//console.log(oCalendar);

var oDate = newDate();var year =oDate.getFullYear();var month = oDate.getMonth()+1;//日期td

var oTds = oCalendar.getElementsByTagName(‘td‘);var flag = false;

oInput.οnfοcus= function() {

showDate(year,month);

}//显示日历

functionshowDate(year,month) {if (false ==flag) {var oTitle = document.createElement(‘div‘);

oTitle.className= ‘title‘;

oTitle.innerHTML= ‘

‘+(month-1)+‘月

‘ +

‘

‘+year+‘年 ‘+month+‘月

‘ +

‘

‘+(month+1)+‘月

‘;

oCalendar.appendChild(oTitle);//月份span

ospans = oCalendar.getElementsByTagName(‘span‘);//console.log(ospans);

prevMonth = ospans[0];

nextMonth= ospans[3];

nowMonth= ospans[2];

nowYear= ospans[1];//创建星期

var otable = document.createElement(‘table‘);var othead = document.createElement(‘thead‘);var otr = document.createElement(‘tr‘);var arr = [‘日‘,‘一‘,‘二‘,‘三‘,‘四‘,‘五‘,‘六‘];for (var i=0; i

var oth = document.createElement(‘th‘);

oth.innerHTML=arr[i];

otr.appendChild(oth);

}

othead.appendChild(otr);

otable.appendChild(othead);

oCalendar.appendChild(otable);//先获得当前月有多少天

if (1 == month || 3 == month || 5 == month || 7 == month || 8 == month || 10 == month || 12 ==month) {var dayNum = 31;

}else if (4 == month || 6 == month || 9 == month || 11 ==month) {var dayNum = 30;

}else if (2 == month &&isLeapYear(year)) {var dayNum = 29;

}else{var dayNum = 28;

}//确定当前月的1号是星期几

oDate.setFullYear(year);

oDate.setMonth(month-1);

oDate.setDate(1);//日期

var otbody = document.createElement(‘tbody‘);for (var i=0; i<6; i++) {var oTr = document.createElement(‘tr‘);//每行里面有7列

for (var j=0; j<7; j++) {var oTd = document.createElement(‘td‘);//oTd.innerHTML = 1;

oTr.appendChild(oTd);

}

otbody.appendChild(oTr);

}

otable.appendChild(otbody);//获得今天1号对应的是星期几

var week =oDate.getDay();var oTds = oCalendar.getElementsByTagName(‘td‘);//alert(week);

for (var i=0; i

oTds[i+week].innerHTML = i+1;

}//如果当前月month 是12或者1

if (1 ==month) {

prevMonth.innerHTML= 12;

}else if (12 ==month) {

nextMonth.innerHTML= 1;

}//让当前日期显示红色、后面的显示蓝色

showColor();//给左右月份绑定点击事件

monthEvent();//给所有的td绑定点击事件

tdClick();//判断最后一行是否全为空

lastTr();//获得促销信息

getPromotion();

flag= true;

}

}//最后一行如果全部为空就将其隐藏

functionlastTr() {//查找最后一行的所有td

var flag = true;for (var i=35; i<42; i++) {if (oTds[i].innerHTML != ‘‘) {//有任何一个td不为空就设置为false

flag = false;

}

}//全部是空的

if(flag) {for (var i=35; i<42; i++) {

oTds[i].style.display= ‘none‘;

}

}

}//给所有的td绑定点击事件

functiontdClick() {for (var i=0; i

oTds[i].οnclick= function() {if (‘red‘ == this.className ||‘blue‘ == this.className) {var year =nowYear.innerHTML;var month =nowMonth.innerHTML;var date = this.innerHTML;

oInput.value= year +‘-‘+month+‘-‘+date;

flag= false;

oCalendar.innerHTML= ‘‘;

}else{

alert(‘您只能选择红色或蓝色区域‘);

}

}

}

}//当前日期显示红色、后面的显示蓝色

functionshowColor() {//当前的日期

var oday = newDate().getDate();for (var i=0; i

oTds[i].className= ‘red‘;var oindex =i;

}

}for (var j=oindex+1; j

oTds[j].className= ‘blue‘;

}

}//给左右月份绑定点击事件

functionmonthEvent() {//向左的月份div

prevMonth.parentNode.onclick = function() {//alert(‘向左‘);

flag = false;

oCalendar.innerHTML= ‘‘;if (12 ==prevMonth.innerHTML) {

showDate(year-= 1, 12);

}else{

showDate(year,parseInt(prevMonth.innerHTML));

}

}//向左的月份div

nextMonth.parentNode.onclick = function() {//alert(‘向右‘);

flag = false;

oCalendar.innerHTML= ‘‘;if (1 ==nextMonth.innerHTML) {

showDate(year+=1,1);

}else{

showDate(year,parseInt(nextMonth.innerHTML));

}

}

}//判断是否是闰年

functionisLeapYear(year) {if (0 == year%100 && 0 == year%400) {return true;

}else if (year%100 != 0 && year%4 ==0) {return true;

}else{return false;

}

}

}