Jquery日历插件制作简单日历

<div class="y-total"></div>

 .y-total{height:auto;border:px solid #;}  .y-total .return-btn{height:px;}  .y-total .return-btn>div{border-right: px solid #;border-bottom: px solid #;color: #;font-family: "Microsoft Yahei",PMingLiU,Verdana,Arial,Helvetica,sans-serif}  .y-total .return-btn>div:nth-child(){border-right:px;}  .y-total .prev-btn{cursor: pointer;width:%;float: left;text-align: center;}  .y-total .time{cursor: pointer;float:left;width:%;text-align: center;}  .y-total .next-btn{cursor: pointer;float:right;width:%;text-align: center;}  .y-total .y-stop{position: absolute;margin-left: px;background-color: red;color: #fff;}  .y-total #datatab{clear:both;width:%;}  .y-total #datatab td {height:px;font-family: "Microsoft Yahei",PMingLiU,Verdana,Arial,Helvetica,sans-serif;color: #;border: px solid #DDD;font-size: px;text-align: center;}

 <script>  (function($){   var Beautifier = function(vals,options){    this.vals = vals;    this.defaults = {    "width":"px"    }    this.p = $.extend({},this.defaults,options);     this.$div = $("<div class='return-btn'></div>");   this.prev = $("<div class='prev-btn'>前一页</div>");   this.time = $("<div class='time'></div>");   this.next = $("<div class='next-btn'>后一页</div>");   this.tab = $("<table id='datatab'><tr></tr></table>");   }    Beautifier.prototype = {   getDate : function(){    var vals = this.vals;    var t = this.time.attr("class");    var tab = this.tab.attr("id");    this.$div.append(this.prev,this.time,this.next);    $(this.p.$this).append(this.$div,this.tab).width(this.p.width);    var i = getInfo(vals);    $("."+t).text(vals.year+"-" + i[]+"-" + i[]);    $(".prev-btn,.next-btn").click(function(){returnAction($(this),t,vals,tab)});     setDateInfo(tab);    init(vals,tab);   }   }   /*加载时将日期放入td中*/   function init(vals,tab){    var w = new Date(vals.year+","+vals.month+","+).getDay()//获取本月第一天是星期几    var l =(w==?:w-) + new Date(vals.year,vals.month,).getDate();//需要铺上td的个数    var t = Math.ceil(l/);    for(var i=; i<t; i++){    $("#"+tab).append("<tr class='y-tr'></tr>");    }    $(".y-tr").each(function(){    for(var i=; i<; i++){     $(this).append("<td></td>");    }    })    setvalue(vals,new Date(vals.year,vals.month,).getDate(),w);   }   function setvalue(val,l,w){    for(var i=;i<l+;i++){    var space = w==?i+-+:i+w-+;    $("td").eq(space).text(i);    if(i == val.day){     $("td").eq(space).css("color","red");     }    }   }   function getInfo(vals){    var info = [];    info.push(vals.month > ? vals.month : "" + vals.month);    info.push(vals.day > ? vals.day : "" + vals.day);    return info;   }    function setDateInfo(tab){   var m = ["","一","二","三","四","五","六","日"];   for(var i=; i<; i++){    $("#"+tab).find("tr:eq()").append("<td>星期"+m[i]+"</td>");   }   }   /*上一页，下一页的点击事件*/   function returnAction($this,t,val,tab){    if($this.attr("class") == "prev-btn"){     if(val.month < ){     val.month =;     val.year-=;     }else{     val.month-=;     }    }else if($this.attr("class") == "next-btn"){     if(val.month > ){     val.month =;     val.year+=;     }else{     val.month+=;     }    }     var v = getInfo(val);    $("."+t).text(val.year+"-"+v[]+"-"+v[]);    $(".y-tr").remove();    init(val,tab);   }     $.fn.work = function(options){   var t = new Date();   var DateVal = {    "year" : t.getFullYear(),    "month" : t.getMonth()+,    "day" : t.getDate()   }   var objs = new Beautifier(DateVal,options);    objs.getDate();   }  })(jQuery) </script>

 <script>  $(".y-total").work({  "$this" : ".y-total",  "width" : "px",//控制容器的宽度  }); </script>