html响应式日历,百行js代码实现一个内联响应式日历jquery插件

(function($){varmonths=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];vartabletpl='

'+' {0} '+' {1}

'+'今天'+'

';varformatbody=function(date,curdate){

date=newDate(date.getFullYear(),date.getMonth()+1,0);vardays=date.getDate();varstr="";varprelens=[6,0,1,2,3,4,5];//如果1号不是礼拜一跳过的单元格varcurday=1;

date=newDate(date.getFullYear(),date.getMonth(),1)varpreday=prelens[date.getDay()];

str+='

';while(preday--)str+='';varweekday;varcurdateday=newDate(curdate.getFullYear(),curdate.getMonth(),curdate.getDate());while(curday<=days){

date=newDate(date.getFullYear(),date.getMonth(),curday);

str+=(date.getTime()===curdateday.getTime()?'

':'');

str+=curday+'

';

weekday=date.getDay();if(weekday===0)str+='

';++curday;

}if(weekday===0)returnstr.substring(0,str.length-4);elsereturnstr;

}varformathtml=function(date,curdate){varlist=[""+date.getFullYear(),months[date.getMonth()],formatbody(date,curdate)];returntabletpl.replace(/\{(\d)\}/g,function(u,i){returnlist[+i];

});

}

$.fn.timePicker=function(options) {vardateNow=newDate();vardefaults={

curdate:dateNow,

showdate:dateNow,        callback:function(){}

};varsettings=$.extend({}, defaults, options);returnthis.each(function() {varcur=$(this);varreshow=function(){

cur.empty();

cur.append(formathtml(settings.showdate,settings.curdate));

}varchangevalue=function(year,plus){vary=settings.showdate.getFullYear();varm=settings.showdate.getMonth();if(year)y+=plus?1:-1;else{

m+=plus?1:-1;if(m>11){y+=1;m=0;}if(m<0){y-=1;m=11;}

}

settings.showdate=newDate(y,m,settings.showdate.getDate());

reshow();

}vartoday=function(){

settings.curdate=settings.showdate=newDate();

reshow();

}vartdclick=function(){varv=$(this).text();if(v.length<1)return;varnewDate=newDate(settings.showdate.getFullYear(),settings.showdate.getMonth(),+v);

settings.callback(newDate);//仅当点了单元格中日期才回调并设置选中日期

settings.curdate=settings.showdate=newDate;

reshow();

}

reshow();

cur.off("click");

cur.on("click",".FEdatepicker div button",function(){varindex=$(this).index();

changevalue(index<2?true:false,index%2?true:false);

});

cur.on("click",".FEdatepicker button:eq(4)",today);

cur.on("click",".FEdatepicker table tbody td",tdclick);

});

};

})(jQuery);