日期选择框插件

(function(){
  var DatePicker=function(classname){//构造方法
	this.ele=document.getElementsByClassName(classname);
	for(var i in this.ele){
		this.ele[i].dpid=i;//给input增加一个属性dpid，用以区分点击的是哪一个input
		}
		this.bind();
	}
	Date.prototype._week=function(){
		var d=new Date(this);
			d.setDate(1);
			return d.getDay();
	}
	Date.prototype._days=function(){
		var d1=new Date(this),d2=new Date(this);
			d1.setDate(1);
			d2.setDate(1);
			d2.setMonth(d2.getMonth()+1);
			return (d2-d1)/86400000;
	}
	Date.prototype.pre_days=function(){
		var d1=new Date(this),d2=new Date(this);
			d1.setDate(1);
			d2.setDate(1);
			d2.setMonth(d2.getMonth()-1);
			return (d1-d2)/86400000;
	}
	DatePicker.prototype={
		update_box:function(y,m){//往弹出的日期框里添加内容
			 var d=this.D;
			 if(y!=null)d.setFullYear(d.getFullYear()+y);
			 if(m!=null)d.setMonth(d.getMonth()+m);
			 var year=d.getFullYear(),month=d.getMonth(),day=d.getDate();
			 var con=[],week=['日','一','二','三','四','五','六'];
			 var yue=['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'];
			 var _html;//拼接html语句
			 var fn=function(a,b){
			 	return "datepicker.update_box("+a+","+b+")";//返回一个字符串
			 }//因为我是要用dpid这个属性来判断是否创建日期框，所以不能让这个属性为空
			 _html="<div dpid='datepicker'><span dpid='datepicker' style='margin-left:10px;cursor:pointer' class='icon-play' onclick='"+fn(-1,null)+"'>&#xe903</span><span dpid='datepicker' style='cursor:pointer' class='icon-backword2' onclick='"+fn(null,-1)+"'>&#xe901</span>";
			 _html+="<span dpid='datepicker' style='margin-left:20px;cursor:default'>"+year+"</span><span dpid='datepicker' style='dispaly:inline-block;margin-left:20px;margin-right:20px;cursor:default'>"+yue[month]+"</span>";
			 _html+="<span dpid='datepicker' style='cursor:pointer;' class='icon-forword3' onclick='"+fn(1,null)+"'>&#xe902</span><span dpid='datepicker' style='margin-right:5px;cursor:pointer' class='icon-play3' onclick='"+fn(null,1)+"'>&#xe900</span></div>";
			 _html+="<table cellpadding='2' cellspacing='0' style='width:100%;margin-top:10px;'><tr style='background:#38f;color:white'>";
			 for(var i=0;i<week.length;i++){//添加周，也就是第一行
			 	_html+="<td dpid='datepicker'>"+week[i]+"</td>";
			 }
			 _html+="</tr><tr>";
			 
			 var con=[];//为什么要创建一个数组？分行用
			 for(var i=0;i<d._week();i++){//计算上个月剩余的天数
			 	con.push("<td dpid='datepicker' style='color:#c3c3c3;cursor:default'>"+(d.pre_days()-d._week()+i+1)+"</td>");//push（）向数组末尾添加一个元素，返回一个新的length值
			 }
			 for(var i=0;i<d._days();i++){//计算当月应有的天数
			 	var str="";
			 	if(con.length%7==0) str="</tr>";
			 	if((i+1)==day)
			 		str+="<td class='date' style='cursor:pointer;background:#38f;color:#fff;text-align:center' onclick='datepicker.fillinput("+year+","+month+","+(i+1)+")'>"+(i+1)+"</td>";
			 	else 
			 		str+="<td class='date' style='cursor:pointer' onclick='datepicker.fillinput("+year+","+month+","+(i+1)+")'>"+(i+1)+"</td>";
			 	con.push(str);
			 }
			 var size=42-con.length;//六行七列所以42，减去已经被占用的，剩下的就是要填的
			 for(var i=0;i<size;i++){//计算下月应显示的天数
			 	if(con.length%7==0)//够七个了就换行
			 		con.push("<tr><td dpid='datepicker' style='color:#c3c3c3;cursor:default'>"+(i+1)+"</td>");
			 	else 
			 		con.push("<td dpid='datepicker' style='color:#c3c3c3;cursor:default'>"+(i+1)+"</td>");
			 }
			 _html+=con.join("")+"</tr></table>";//把con这个数组的所有元素转换成一个字符串，拼接到html语句里
			 this.box.innerHTML=_html;
		},
		
		create_box:function(el){//创建要弹出的日期框
			this.D=new Date();
			if(this.box!=null) this.remove_box();
			var box=document.createElement("div");
			box.dpid="datepicker";
			box.className="dp-box";
			var pos=this.getPos(el);
			box.style.cssText="position:absolute;";
			var s=box.style;
			s['left']=pos.x+"px";
			s['top']=pos.y+el.offsetHeight+"px";
//			s['width']=234+'px';
//			s['height']=180+'px';
			document.body.appendChild(box);//把这个box添加到div后面
			this.box=box;
			this.update_box();//框建好了就开始添加内容
		},
		
		remove_box:function(){//移除日期框
			if(this.box!=null){
				document.body.removeChild(this.box);
				this.box=null;
			}
		},
		
		bind:function(){//鼠标点击之后捕获动作
			var _this=this;
			addEventListener("click",function(e){
				var t=e.target||e.srcElement;//t有两种状态（取决于鼠标的点击）：input、body
				if(t.dpid!=null||t.attributes.dpid!=null){//t的属性就有三个值0、1、2,后面这个是限制点到日期框后无限创建
					if(t.dpid==null) return;//防止点到日期框后再创建
					_this.curi=t.dpid;//添加一个属性把input的id记下来，便于往input里输入内容
					_this.create_box(t);
				
				}
				else _this.remove_box();//若点击的是body则t属性为undefin也就是等于null
			},false)
		},
		
		fillinput:function(y,m,d){//把所选中的值添加到input里
			this.ele[this.curi].value=y+"年"+(m+1)+"月"+d+"日";
		},
		
		getPos:function (e) {//得到一个坐标值
			for(var pos={x:0,y:0};e;e=e.offsetParent){//相对于父类
				pos.x+=e.offsetLeft;
				pos.y+=e.offsetTop;
				}
			return pos;
		}
		
	}
	datepicker=new DatePicker("date-picke");
})();

 

转载于:https://my.oschina.net/u/3197752/blog/846991