Jquery calendar plug-in to create a simple calendar

In page development, we often encounter operations that require users to enter dates. The usual approach is to provide a text box (text) for the user to input, and then write code to verify the entered data and detect whether it is a date type. This is more troublesome, and at the same time, it is not very convenient for the user to input the date, which affects the user experience. If you use the datepicker (calendar) plug-in in jQuery UI, these problems can be easily solved. The syntax format called by this plug-in is as follows:

$(“.selector”).datepicker(options);

Among them, ".selector" represents a DOM element, generally referring to a text box. Since the function of this plug-in is to provide date selection, it is often bound to a text box, and the selected date is displayed in the text box. Select options It is an object that is the same as the options in the previous plug-in. By changing the values corresponding to its parameters, the plug-in function can be changed. In the datepicker plug-in, the common parameters for selecting options are as follows

1. changeMonth Set a Boolean value. If true, a drop-down selection box will appear in the title and you can select the month. The default value is false
2. changeYear Set a Boolean value. If it is true, a drop-down selection box will appear in the title and you can select the year. The default is false
3. showButtonPanel Set a Boolean value. If it is true, a panel will be displayed under the date with two buttons; one is "Today" and the other button is "Close". The default value is false, which means it will not be displayed.
4. closeText Set the text information on the close button. The premise of this setting is that the value of showButtonPanel must be true, otherwise the effect will not be displayed
5. dateFormat Set the date format displayed in the text box (text), which can be set to {dateFormat,'yy-mm-dd'}, which means the date format is year-month-day, such as 2012-10-1
6. defaultDate Set a default date value, such as {defaultDate 7}, which means that after the date selection window pops up, the default date is the current date plus 7 days
7. showAnim Set the way to display the pop-up or hide the date selection window. The methods that can be set include "show", "sildeDown", "fadeln" and the latter "", which means there is no way to pop up the date selection window
8. showWeek Set a Boolean value. If it is true, you can display the week corresponding to each day. The default value is false
9. yearRange Set the range of years

Recently I have been studying the development of js plug-ins. In the past, I saw that the masters just picked up plug-ins and played with them casually. I felt that it would be great if I reached that level, so I started to study plug-in development on my own. After studying for a while, I started to write my first calendar plug-in. Since I am a beginner in plug-in development, the readability of the code may be a bit poor. I hope you can give me more opinions and maintain the code in the future to make this plug-in more of completeness.

The code is posted below.

First, give the plug-in an overall div container

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

Copy after login

I am accustomed to adding my own unique prefix when giving the class or id name to the container. This helps to identify my own code and avoid style conflicts with other colleagues.

Then start writing the style. You can adjust the style according to your own needs

 .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;}

Copy after login

The third step is the plug-in code

 <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==&#63;: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==&#63;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 > &#63; vals.month : "" + vals.month);
    info.push(vals.day > &#63; 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>

Copy after login

Then, the plug-in is almost complete. Now you only need to call the plug-in method

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

Copy after login

The effect is as shown below:

Jquery calendar plug-in to create a simple calendar_jquery