日期插件

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title></title>
<style>
*{margin:0;padding:0}
#Mcalendar{width:210px;padding:5px;height:170px;border:1px solid #045bb2;display:none;cursor: pointer;}
table{text-align:right;clear: both;}
table th{background-color:#045bb2;width:30px;}
.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;
}
</style>
</head>
<body>
<input type="text" id="McalendarInput" />
<div id="Mcalendar"></div>
  <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=a;
document.getElementById("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();
console.log(f)
var arr=new Array(42);
var dates = new Date(year, month , 0).getDate();
console.log(dates)
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;
             },
drawCalendar:function(year,month,date,id){
var $=this;
var html="";
html='<div class="date"><div id="preYear"><</div><div id="preMonth"><<</div>';
html+='<div style="width:107px;">'+year+'年'+month+'月'+date+'日</div><div id="nextMonth">>></div><div id="nextYear">></div></div>';
var arr=["日","一","二","三","四","五","六"];
html+="<table cellpadding='0' cellspacing='0'><thead><tr>"
for(var i=0;i<7;i++){
html+='<th>'+ arr[i]+'</th>';
             }
html+='</tr></thead><tbody><tr>'
var arr1=$.fillArray(year,month);
for(var j=0;j<arr1.length;j++){
if(!arr1[j]) arr1[j]=" - - ";
if(j%7){
html+='<td><a href="javascript:void(0)" onclick="fuzhi('+'\''+arr1[j]+'\''+')">'+ arr1[j].split('-')[2]+'</a></td>';
             }
else{
html+="</tr><tr>"
html+='<td><a href="javascript:void(0)" onclick="fuzhi('+'\''+arr1[j]+'\''+')">'+ arr1[j].split('-')[2]+'</a></td>';
             }
             }
html+="</tr></tbody></table>";
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)
/* if(attr[0]) {
             alert(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></body>
</html>

posted @ 2016-11-01 21:54 莺哥阅读(115) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

犹记惊鸿照影（JS）

日期插件

公告