<meta charset="UTF-8" /><style>*{margin:0;padding:0}#Mcalendar{width:210px;padding:5px;height:170px;border:1px solid #045bb2;display:none;cursor: pointer;}#Mcalendar table{text-align:right;clear: both;}#Mcalendar table th{background-color:#045bb2;width:30px;}#Mcalendar .date div{float:left;text-align:center;height:30px;line-height:30px;}#preYear,#nextYear{width:26px}#nextMonth,#preMonth{width:23px;}#McalendarInput{margin-left:100px;margin-top:100px;}#McalendarInput.current{background-color:#f00;color:#fff;}</style>
<script>var Class={create:function(){return function(){this.initialize.apply(this,arguments)  }  }  }var extent=function(destination,source){for(var prop in source){  destination[prop]=source[prop];  }return destination;  }function fuzhi(a){  document.getElementById("McalendarInput").value=http://www.mamicode.com/a;"Mcalendar").style.display="none";  document.getElementById("Mcalendar").innerHTML="";  }var Mcalendar=Class.create();Mcalendar.prototype={initialize:function(options){var $ = new Date();this.setOption(options);this.drawCalendar($.getFullYear(),$.getMonth() + 1,$.getDate(),this.options.textfield_id);  },setOption:function(options){this.options={textfield_id: "Mcalendar"}extent(this.options,options||{})  },fillArray:function(year,month){var f = new Date(year, month -1 ,1).getDay();var arr=new Array(42);var dates = new Date(year, month , 0).getDate();for(var i = 0; i < dates ; i ++ ,f ++){arr[f] =year+"-"+month+"-"+(i+1);  }return arr;  },getLeft:function(element){var actualLeft=element.offsetLeft;var current=element.offsetParent;if(current!=null){actualLeft+=current.offsetLeft;current=current.offsetParent;  }return actualLeft;  },getTop:function(element){var actualTop=element.offsetTop;var current=element.offsetParent;if(current!=null){actualTop+=current.offsetTop;current=current.offsetParent;  }return actualTop;  },addHander:function(type,fn,ele){if(document.addEventListener){  ele.addEventListener(type,fn,false)  }else if(document.attachEvent){  ele.attachEvent("on"+type,fn)  }  },getID:function(id){return document.getElementById(id);  },drawCalendar:function(year,month,date,id){var newDate = new Date();var toyear=newDate.getFullYear(),tomonth=newDate.getMonth() + 1,todate=newDate.getDate()var $=this;var html="";html=‘
<
<<
‘;html+=‘
‘+year+‘年‘+month+‘月‘+date+‘日
>>
>
‘;var arr=["日","一","二","三","四","五","六"];html+=""for(var i=0;i<7;i++){html+=‘‘;  }html+=‘‘;var arr1=$.fillArray(year,month);for(var j=0;j‘+ arr1[j].split(‘-‘)[2]+‘‘;  }else{html+=‘‘;  }  }else{if(j==0){  }else{html+="";  }if(year==toyear&&month==tomonth&&arr1[j].split(‘-‘)[2]==todate){html+=‘‘;  }else{html+=‘‘;  }  }  }html+="
‘+ arr[i]+‘
‘+ arr1[j].split(‘-‘)[2]+‘
‘+ arr1[j].split(‘-‘)[2]+‘
‘+ arr1[j].split(‘-‘)[2]+‘
";  document.getElementById(id).style.display="block"document.getElementById(id).innerHTML=html;  document.getElementById(‘nextYear‘).onclick=function(){$. redrawCalendar(year+1,month,date,id);  }  document.getElementById(‘preYear‘).onclick=function(){$. redrawCalendar(year-1,month,date,id);  }  document.getElementById(‘nextMonth‘).onclick=function(){if(month==12){$. redrawCalendar(year+1,1,date,id);  }else{$. redrawCalendar(year,month+1,date,id);  }  }  document.getElementById(‘preMonth‘).onclick=function(){if(month==1){$. redrawCalendar(year-1,12,date,id);  }else{$. redrawCalendar(year,month-1,date,id);  }  }  },redrawCalendar:function(year, month,date,id){this.drawCalendar(year,month,date,id)  },selectDate:function(e){var attr=e.getAttribute("data-text");  console.log(attr)  }  }  document.getElementById("McalendarInput").onfocus=function(){var bbb=new Mcalendar();var aaa=document.getElementById("McalendarInput");var k=document.getElementById("Mcalendar");k.style.position="absolute";k.style.left=bbb.getLeft(aaa)+"px";k.style.top= aaa.offsetHeight+bbb.getTop(aaa)+"px";  }</script>

日期插件