Jquery calendar plug-in for creating simple calendars and jquery calendar plug-ins

Jquery calendar plug-in for creating simple calendars and jquery calendar plug-ins

During page development, you may need to enter a date. The common practice is to provide a text box for users to enter, and then write code to verify the input data and check whether it is a date type. This is troublesome. At the same time, it is not very convenient for users to enter the date, which affects the user experience. If you use the datepicker (calendar) Plug-in jQuery UI, all these problems can be solved. The <span style = "color: # cc66cc;"> <strong> syntax format </strong> </span> called by this plug-in is as follows:

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

". Selector indicates a DOM element, which is generally a text box. Because the plug-in provides date selection, it is often bound to a text box to display the selected date in the text box, select options is an object that is the same as the options in the previous plug-in. By changing the value corresponding to its parameters, the plug-in function is changed. In the datepicker plug-in, select the following common options parameters:

1. changeMonth sets a Boolean value. If wietrue is set, a drop-down box can be displayed in the title. You can select a month. The default value is false.
2. Set changeYear to a Boolean value. If the value is true, a drop-down box can be displayed in the title. You can select a year. The default value is false.
3. Set a Boolean value for showButtonPanel. If the value is true, a panel is displayed under the date, with two buttons in it; one being "today" and the other being "off ", the default value is false, indicating not to display
4. Set the text information on the close button in closeText. The premise of this setting is that the value of showButtonPanel must be true; otherwise, the result cannot be displayed.
5. Set the date format displayed in the text box (text) to {dateFormat, 'yy-mm-dd'}, indicating that the date format is year-month-day, for example, 2012-10-1
6. Set a default date value for defadate date, for example, {defadate date + 7}. In the pop-up date selection window, the default date is to add seven days to the current date.
7. showAnim settings display the pop-up or hide the date selection window. You can set the following methods: "show", "sildeDown", and "fadeln" and ", indicating that there is no pop-up date selection window.
8. Set a Boolean value for showWeek. If the value is true, the corresponding week of the day can be displayed. The default value is false.
9. yearRange: Set the year range.

Recently, I was studying the development of js plug-ins. I used to look at these plug-ins. I was very confident about plug-ins. I just felt that if I had reached that level, I began to study plug-in development myself. After studying it for a while, I began to write my first calendar plug-in. Because I was a beginner in Plug-in development, the Code may be slightly less readable. I hope you can give me more comments, the code will be maintained later to make the plug-in more complete.

The following is the code.

First, give the plug-in an overall div container

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

I am used to adding a unique prefix to the class or id name of the container. This helps to identify my code and avoid style conflicts with other colleagues.

Then, start to write the style. You can adjust the style as needed.

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

Step 3: plug-in code

<Script> (function ($) {var Beautifier = function (vals, options) {this. vals = vals; this. defaults = {"width": "px"} this. p = $. extend ({}, this. ults, options); this. $ div = $ ("<div class = 'Return-btn '> </div>"); this. prev = $ ("<div class = 'prev-btn '> previous page </div>"); this. time = $ ("<div class = 'time'> </div>"); this. next = $ ("<div class = 'next-btn '> next page </div>"); this. tab = $ ("<table id = 'AB AB'> <tr> </tabl E> ");} 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) ;}/ * place the date in td during loading */function init (vals, tab) {var w = new Date (vals. year + "," + vals. month + "," + ). getDay () // obtain the number of var l = (w =?: W-) + new Date (vals. year, vals. month ,). getDate (); // Number of td 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 = ["", "1", "2", "3", "4", "5 ", "6", "day"]; for (var I =; I <; I ++) {$ ("#" + tab ). find ("tr: eq ()"). append ("<td> Week" + m [I] + "</td>") ;}}/* Click Event on the previous page, next page */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>

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 ", // control the container width}); </script>

Effect