好久没来博客里更新了，最近发生了太多事要去处理，一直没时间来更新博客，如果您持续关注却没看到更新，抱歉，让您久等了，今天一次性更新两篇，先说说这一篇，几个月以前写过一款日期插件，当时写完觉得很牛，这么难的都写出来了，现在觉得也就那样，静下心来谁都能写出来，于是在闲余时间自己重新写了一款日期插件。
我先介绍一下这个日期插件，这次写的时候考虑到性能问题，我让日期的DOM元素只加载一次，再次点击的时候只是改变里面的内容，就是改变里面填充的日期，这样不会出现每次进行点击的时候都会加载一次DOM这样尴尬的事情了。
下面的逻辑和几个月前写的很像，只是进行了部分的优化，大家在看代码的时候就能看到这些逻辑上的优化。
/**
* Created by dave on 2015/8/4.
*chenchuanjiang
*/
function Gen_ele(){
//生成日期的区域
var date_holder_Ele=addelement("div","date-holder","date-holder");
//生成年月的区域
var ym_Ele=addelement("div","year-month","");
//生成年的区域
var year_Ele=addelement("div","year","");
//生成月的区域
var month_Ele=addelement("div","month","");
//生成年操作的区域
var y_decrease_Ele=addelement("div","y-decrease","");
var y_input_Ele=addelement("input","y-input","");
var y_increase_Ele=addelement("div","y-increase","");
//生成月操作的区域
var m_decrease_Ele=addelement("div","m-decrease","");
var m_input_Ele=addelement("input","m-input","");
var m_increase_Ele=addelement("div","m-increase","");
var tabholder_Ele=addelement("div","tab-holder","");
var ul_Ele=addelement("ul","date-ul","");
var li_Ele;
for(var i=0;i<49;i++){
li_Ele=addelement("li","","");
ul_Ele.appendChild(li_Ele);
}
date_holder_Ele.appendChild(ym_Ele);
ym_Ele.appendChild(year_Ele);
year_Ele.appendChild(y_decrease_Ele);
year_Ele.appendChild(y_input_Ele);
year_Ele.appendChild(y_increase_Ele);
ym_Ele.appendChild(month_Ele);
month_Ele.appendChild(m_decrease_Ele);
month_Ele.appendChild(m_input_Ele);
month_Ele.appendChild(m_increase_Ele);
date_holder_Ele.appendChild(tabholder_Ele);
tabholder_Ele.appendChild(ul_Ele);
y_decrease_Ele.innerHTML="-";
y_increase_Ele.innerHTML="+";
m_decrease_Ele.innerHTML="-";
m_increase_Ele.innerHTML="+";
y_decrease_Ele.innerText="-";
y_increase_Ele.innerText="+";
m_decrease_Ele.innerText="-";
m_increase_Ele.innerText="+";
document.getElementsByTagName("body")[0].appendChild(date_holder_Ele);
}
function addelement(tagname,classname,idname){
var elem = document.createElement(tagname);
elem.className=classname;
elem.id=idname;
return elem;
}
Gen_ele();
function main(option){
this.parentNode=option.parentNode;
this.target=option.target;
this.startDate=option.startDate||new Date().getFullYear()+"/"+(new Date().getMonth()+1)+"/01";
this.endDate=option.endDate||"2016/08/21";
this.startymd = this.startDate.split("/");
this.starty = this.startymd[0];
this.startm = this.startymd[1];
this.startd = this.startymd[2];
this.truestartDate = new Date(this.starty+"/"+this.startm+"/"+this.startd);
//this.default_date=new Date();
this.date_holder=document.getElementById("date-holder");
}
main.prototype={
init:function(){
this.date_holder.style.left=this.offsetLeft(this.target)+"px";
this.date_holder.style.top=this.offsetTop(this.target)+this.target.offsetHeight+"px";
this.days=["日","一","二","三","四","五","六"];
this.inputy=this.filterdiv(this.date_holder,"input","y-input");
this.inputm=this.filterdiv(this.date_holder,"input","m-input");
this.date_ydes=this.filterdiv(this.date_holder,"div","y-decrease");
this.date_yinc=this.filterdiv(this.date_holder,"div","y-increase");
this.date_mdes=this.filterdiv(this.date_holder,"div","m-decrease");
this.date_minc=this.filterdiv(this.date_holder,"div","m-increase");
this.liArray = this.date_holder.getElementsByTagName("ul")[0];
this.data_pad();
this.bindfunc();
},
data_pad:function(){
console.log(this.startDate);
this.startymdpri = this.startDate.split("/");
this.startypri = this.startymdpri[0];
this.startmpri = this.startymdpri[1];
this.inputy.value = this.startypri;
this.inputm.value = this.startmpri;
//开始日期是星期几
this.startdaynum = new Date(this.startypri+"/"+this.startmpri+"/01").getDay();
var lis = this.date_holder.getElementsByTagName("ul")[0].getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
if(i<7){
lis[i].innerHTML=this.days[i];
lis[i].innerText=this.days[i];
}
else if(i>=7){
var startDate = new Date(this.startDate);
var startDatem = new Date(this.startDate);
var startDatef=new Date(this.startypri+"/"+this.startmpri+"/01");
var startDatefm=new Date(this.startypri+"/"+this.startmpri+"/01");
if(this.startdaynum>0){
for(var j=this.startdaynum-1;j>=0;j--){
lis[7+j].innerHTML=new Date((startDate/1000-86400)*1000).getDate();
lis[7+j].innerText=new Date((startDate/1000-86400)*1000).getDate();
lis[7+j].style.color="#ccc";
startDate = new Date((startDate/1000-86400)*1000);
}
for(var j=this.startdaynum;j<lis.length-7;j++){
lis[7+j].innerHTML=new Date(startDatem).getDate();
lis[7+j].innerText=new Date(startDatem).getDate();
if((startDatem.getMonth()+1) != (new Date(this.startDate).getMonth()+1)||startDatem<this.truestartDate||startDatem>new Date(this.endDate)){
lis[7+j].style.color="#ccc";
}
else{
lis[7+j].style.color="#000";
}
startDatem = new Date((startDatem/1000+86400)*1000);
}
}else if(this.startdaynum==0){
for(var k=6;k>=0;k--){
lis[7+k].innerHTML=new Date((startDatefm/1000-86400)*1000).getDate();
lis[7+k].innerText=new Date((startDatefm/1000-86400)*1000).getDate();
lis[7+k].style.color="#ccc";
startDatefm = new Date((startDatefm/1000-86400)*1000);
}
for(var j=this.startdaynum;j<lis.length-14;j++){
lis[14+j].innerHTML=new Date(startDatef).getDate();
lis[14+j].innerText=new Date(startDatef).getDate();
if((startDatef.getMonth()+1) != (new Date(this.startDate).getMonth()+1)||startDatef<this.truestartDate||startDatef>new Date(this.endDate)){
lis[14+j].style.color="#ccc";
}
else{
lis[14+j].style.color="#000";
}
startDatef = new Date((startDatef/1000+86400)*1000);
}
}
}
}
},
offsetTop:function( elements ){
var top = elements.offsetTop;
var parent = elements.offsetParent;
while( parent != null ){
top += parent.offsetTop;
parent = parent.offsetParent;
};
return top;
},
offsetLeft:function( elements ){
var left = elements.offsetLeft;
var parent = elements.offsetParent;
while( parent != null ){
left += parent.offsetLeft;
parent = parent.offsetParent;
};
return left;
},
filterdiv:function(parentn,e,classn){
var elems = parentn.getElementsByTagName(e);
for(var a=0;a<elems.length;a++){
if(elems[a].className==classn){
return elems[a];
break;
}else{
continue;
}
}
},
bindfunc:function(){
var _this=this;
this.liArray.onmouseover=function(ev){
var ev = ev.target||window.event.srcElement;
var date_text=ev.innerHTML||ev.innerText;
if(ev.style.color!="rgb(204, 204, 204)"&&"一二三四五六日".indexOf(date_text)<0){
ev.style.backgroundColor="#eee";
ev.style.cursor="pointer";
}
};
this.liArray.onmouseout=function(ev){
var ev = ev.target||window.event.srcElement;
ev.style.backgroundColor="#fff";
};
this.date_ydes.onclick=function(ev){
var ev = ev.target||window.event.srcElement;
var type="decrease";
_this.yearchange(_this,type,ev);
};
this.date_yinc.onclick=function(ev){
var ev = ev.target||window.event.srcElement;
var type="increase";
_this.yearchange(_this,type,ev);
};
this.date_mdes.onclick=function(ev){
var ev = ev.target||window.event.srcElement;
var type="decrease";
_this.monthchange(_this,type,ev);
};
this.date_minc.onclick=function(ev){
var ev = ev.target||window.event.srcElement;
var type="increase";
_this.monthchange(_this,type,ev);
};
//此处省略一万字
//这里是对于点击外面让日历本身消失，只有点击目标位置才会让日历一直显示。
document.onclick=function(ev){
var ev = ev.target||window.event.srcElement;
if(ev.className==null||ev.className==""||ev.parentNode!=_this.parentNode){
if(ev.parentNode.parentNode.className=="year-month"||ev.parentNode.className=="year-month"||ev.className=="year-month"){
_this.date_holder.style.display="block";
}else if(ev.parentNode.parentNode.className=="tab-holder"){
if(ev.style.color!="rgb(204, 204, 204)"&&"一二三四五六日".indexOf(ev.innerHTML||ev.innerText)<0){
_this.target.value=_this.inputy.value+"/"+_this.inputm.value+"/"+ev.innerHTML||ev.innerText;
_this.date_holder.style.display="none";
}
}else{
_this.date_holder.style.display="none";
}
//_this.date_holder.style.display="none";
}else if(ev.className!=null&&ev.className!=""&&ev.parentNode==_this.parentNode){
console.log(ev.parentNode==_this.parentNode);
_this.date_holder.style.display="block";
}
}
},
yearchange:function(_this,type,ev){
if(type=="decrease"){
_this.inputy.value-=1;
}
else{
_this.inputy.value=_this.inputy.value-0+1;
}
_this.startDate=_this.inputy.value+"/"+_this.inputm.value+"/01";
_this.data_pad();
},
monthchange:function(_this,type,ev){
if(type=="decrease"&&_this.inputm.value>1){
_this.inputm.value-=1;
}
else if(_this.inputm.value<12&&type=="increase"){
_this.inputm.value=_this.inputm.value-0+1;
}
_this.startDate=_this.inputy.value+"/"+_this.inputm.value+"/01";
_this.data_pad();
}
};
之前刚写好的时候是可以兼容到IE7的，IE6没有专门去测试，后来添加了一个点击特定区域的时候让日期界面消失，点击某些位置保持一直存在的时候可能没有很好的做好兼容性，导致在IF9一下会有问题，在新版本浏览器上基本没问题。
语文不好就不多说废话了，希望您看完能不吝赐教，提出您宝贵的意见。