jquery Calendar plugin make simple calendar _jquery

In page development, you often encounter actions that require a user to enter a date. The usual practice is to provide a text box that lets the user enter, and then write the code to validate the entered data and detect whether it is a date type. This is more cumbersome, at the same time, the user input date operation is not very convenient, affecting the user experience. If you use the DatePicker (Calendar) plug-in in the jquery UI, these problems can be solved. The plug-in calls the <span style= "color: #cc66cc;" ><strong> syntax format </strong></span> as follows:

$ (". Selector"). DatePicker (options);

where ". Selector" represents a DOM element, generally refers to a text box, because the plug-in's role is to provide a date selection, it is often bound to a text box, the selected date is displayed in the text box, select Options is an object with the options in the previous plug-in, By changing the corresponding value of its parameters, so as to realize the change of plug-in function, in the DatePicker plug-in, select options commonly used parameters as follows

1, Changemonth set a Boolean value, if Wietrue, you can appear in the title of a Drop-down selection box, you can select the month, the default value is False
2, Changeyear set a Boolean value, if true, you can appear in the title of a Drop-down selection box, you can select the year, the default is False
3. Showbuttonpanel sets a Boolean value, and if true, displays a panel below the date, with two buttons, one for today, another for off, and false for the default value.
4, Closetext set off the text information on the button, this setting is based on the premise that the Showbuttonpanel value must be true, otherwise it will not show the effect
5, DateFormat set the date format displayed in the text box, can be set to {dateformat, ' yy-mm-dd '}, which means that the date format is year-month-day, such as 2012-10-1
6, Defaultdate set a default date value, such as {defaultdate+7}, indicates that after the popup Date Selection window, the default date is to add 7 days on the current date
7. The Showanim setting shows how the date Selection window pops up or hides. You can set the way there, "show", "Sildedown", "Fadeln" the latter "", means no popup date Selection window
8, Showweek set a Boolean value, if True, you can display the corresponding day of the week, the default value is False
9, Yearrange set the range of the year

Recently in the study of JS Plug-in development, before looking at the great God, the plug-ins are easy to play around, feel like if you reach that level of good, began their own research plug-ins developed. Research for a period of time, began to write their own first calendar plug-ins, because is a beginner plug-in development, code readability may be a bit poor, I hope you can make more comments, the great God to maintain the code, so that the plug-in more complete.

The code is posted below.

First, give the plugin a whole div container

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

I used to give the container class or ID name, add their own unique prefix, so that it helps to identify their own code, but also to avoid conflicts with the style of other colleagues.

Then you start writing styles, and you can adjust the style to suit your 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;}

The third step is the plugin 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 ' > front page </div>");
   This.time = $ ("<div class= ' time ' ></div>");
   This.next = $ ("<div class= ' next-btn ' > Next </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); }/* Load date into TD/Function init (vals,tab) {var w = new Date (vals.year+), "+vals.month+", "+". Getday ()/Get first in this month
    Days is the day of the week var L = (w==?:w-) + new Date (Vals.year,vals.month,). GetDate ()//The number of TD needed to be paved 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 = ["," One "," two "," three "," four "," five "," six "," Day "];
   for (var i= i<; i++) {$ (' # ' +tab). Find ("Tr:eq ()"). Append ("<td> Week" +m[i]+ "</td>"); }/* Previous page, click event on next page/function returnaction ($this, T,val,tab) {if ($this. attr ("class") = = "Prev-btn") {if (v)
     Al.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>

So, the plug-in is almost complete, now only need to call the plug-in method is OK

 <script>
  $ (". Y-total"). Work ({
  "$this": ". Y-total",
  "width": "px",//Control container width
  });
 </script>

Effect as shown: