jquery Calendar Control Implementation method sharing

  This article mainly introduces the jquery Calendar control implementation method, there are many such plug-ins on the Internet, the following is a way to achieve their own, the need for friends can refer to the following

Comment Out is the default CSS style, you can modify your style to achieve another style, you refer to the use of the     code as follows:/**  * jQuery Calendar Plugin  */(function ($, win Dow) {      ' use strict ';     $.fn.calendar = function (options) {       // Check is SELECT, if nothing select, return this         if (!this.length) {      &NBSP ;     if (options && options.debug && window.console) {                Console.log ("nothing Select");                         return this;        }         var self = $ (this);          //default parameter setting         var defaults = {            Csspath: ',//user-define loading path of CSS file             EventName: ' Click ',//user-define the eventName, triggers the control             Onselectdate:null,//callback function after sel ECT date             Autoclose:false        };          //inherit user-defined parameter         defaults = $.extend (defaul TS, options);          //default as data of the day         var d_date = new Date ();         var _date = {            year:d_date.getFullYear (),   &NB Sp         Month:d_date.getMonth () + 1,             day:d_date.getDate (),             Week:d_date.getDay ()        };          //default template of plugin         var calendardiv = ' <div id= "Calendar" class= "Cld_grid" style= "display:none;z-index:100;">";         Calendardiv + = ' <div id= ' calendar_year_month ' class= ' cld_year_month ' style= ' position: relative; " > ';         Calendardiv = ' <div id= ' last-year ' style= ' position:absolute;left:30px; ><</div> ';         Calendardiv = ' <div id= ' last-month ' style= ' position:absolute;left:60px; ><<</div> ';         Calendardiv = ' <div id= ' next-year ' style= ' position:absolute;right:30px; >></div> ';         Calendardiv = ' <div id= ' next-month ' style= ' position:absolute;right:60px; >>></div> ';         Calendardiv = ' <input style= ' width:40px;text-align:center; "type=" text "id=" Calendar_ Year "value=" ' + _date.year + ' ">-<input style= width:25px;text-align:center" type= "text" id= "Calendar_month" Value= "' + _date.month + '" ></div> '         Calendardiv + = ' <div id= ' calendar_week_box "class=" Cld_week_box clearfix ">";         Calendardiv + = ' <div class= ' header-day ' Data-index = ' 0 ' > Day </div> ';         Calendardiv + = ' <div class= ' header-day ' data-index = ' 1 ' > One </div> ';         Calendardiv + = ' <div class= ' header-day ' data-index = ' 2 ' > Two </div> ';         Calendardiv + = ' <div class= ' header-day ' data-index = ' 3 ' > three </div> ';         Calendardiv + = ' <div class= ' header-day ' data-index = ' 4 ' > Four </div> ';         Calendardiv + = ' <div class= ' header-day ' data-index = ' 5 ' > Five </div> ';         Calendardiv + = ' <div class= ' header-day ' data-index = ' 6 ' > Six </div> ';         Calendardiv = ' </div> ';         Calendardiv = ' <div class= ' days Clearfix ' > ';         for (var k = 0; k < k++) {&NBSp           Calendardiv + = ' <div class= ' Day ' ><span class= ' day-number ' > ' + ' + ' </sp An></div> ';        }         Calendardiv = ' </div></div> ';           var calendaraction = {           //initialization &nbsp ;           initaction:function () {                Calend Araction.thisclick ();                 calendaraction.inputchange ();                 calendaraction.buttonchange ();                 calendaraction.choosedate ();            ,              //click to display   &N Bsp         thisclick:function () {                Self.bind (defaults.eventname, function (e) {                    C Alendaraction.showcalendar ();                });            ,              //when year and month in the Input box changes             inputchange:function () {                $ (' #calendar_year, #calendar_month '). Bind (' Change ', function () {          & nbsp         var year = $ (' #calendar_year '). Val (),      ,                   month = $ (' #calendar_month '). Val ();                     if (!/^d{4}$/.test (year)) {      &NB Sp                 alert (' Please input four-digit year ');                        return false;                                   & nbsp     if (!/^d{1,2}$/.test (month) | | (Month > | | month <= 0)) {                        alert (' Please input proper month ');                         return false;                                   & nbsp    //initialize after year and month changes                   &NB Sp Init_day_numbers (year, month);                });            },            //click   Onth   &NBSp         buttonchange:function () {                $ (' #last-ye Ar '). bind (' click ', Function () {                    var lastyear = Parse Int ($ (' #calendar_year '). Val ())-1 > 0? parseint ($ (' #calendar_year '). Val ())-1:1;                     $ (' #calendar_year '). Val (lastyear);                     Init_day_numbers (LastYear, $ (' #calendar_month '). val ());                });                   $ (' #last-month '). Bind (' click ', Function () {    & nbsp               var lastmonth = parseint ($ (' #calendar_month '). Val ())-1 > 0? parseint ($ (' #calendar_month '). Val ())-1:12,                     &NBSP ;   Thisyear = Lastmonth = = 12? parseint ($ (' #calendar_year '). Val ())-1: $ (' #calendar_year '). Val ();                     $ (' #calendar_month '). Val (Lastmonth);                     $ (' #calendar_year '). Val (thisyear);                     init_day_numbers (thisyear, lastmonth);                });                   $ (' #next-year '). Bind (' click ', Function () {    &N Bsp               var nextyear = parseint ($ (' #calendar_year '). Val ()) + 1;                     $ (' #calendar_year '). Val (nextyear);                     Init_day_numbers (nextyear, $ (' #calendar_month '). val ());                });                   $ (' #next-month '). Bind (' click ', Function () {    & nbsp               var nextmonth = parseint ($ (' #calendar_month '). Val ()) + 1 <= 12? parseint ($ (' #calendar_month '). Val ()) + 1:1,                         Thisyear = Nextmonth = 1? parseint ($ (' #calendar_year '). Val ()) + 1: $ (' #calendar_year '). Val ();                     $ (' #calendar_month '). Val (Nextmonth);                     $ (' #calendar_year '). Val (thisyear);                     init_day_numbers (thisyear, nextmonth);                });            ,            //set   relative offset be Tween Control and Webpage, then display             showcalendar:function () {                var o_x = Self.offset (). Left                     O_y = Self.offset (). Top + self[0].offsetheight;                 $ (' #calendar '). css {            &NB Sp       ' position ': ' absolute ',                     ' left ': O_x,                     ' top ': o_y,                     ' Display ': ' Block '                 ';            ,              //close plugin             closecalendar:function () {            &NBsp   $ (' #calendar '). Hide ();            ,              //select date             choosedate:function () {                $ ('. Day '). Liv E (' click ', Function () {                _date   var $ = $ (this). attr (' da Ta-date ');                    //trigger callback function       &NB Sp             if ($.isfunction (defaults.onselectdate)) {          &N Bsp             Defaults.onSelectDate.call (this, _date);                                   & nbsp     if (defaults.autoclose) {                      &NBSP ;Calendaraction.closecalendar ();                                   & nbsp });            }        };          //write calendar template in webpage         $ (' body ') Append (calen DARDIV);          //initialize the year, month, day of calendar list         Init_day _numbers (_date.year, _date.month);          //initialize plugin action         calendaraction.initaction ();           function init_day_numbers (year, month) {            var Maxday = Getmaxday (year, month),                 Firstweek,beforenumber,   &N Bsp             StartIndex = Beforenumber = Firstweek = Getfirstweek (year, Month),                 Afternumber = 35-maxday-beforenumber,                 Lastmonthmaxday = Getmaxdaybylastmonth (year, month),         &NBSP ;       Nextmonthmaxday = Getmaxdaybynextmonth (year, month),                 Edge = getlastandnextdate (year, month);             var default_html = ';             for (var k = 0; k < k++) {            &NBS P   default_html + + <div class= "Day" ><span class= "Day-number" > ' + ' + ' </span></div> ';            };             $ ('. Days '). HTML (default_html);             for (var s = 1; s <= maxday s++) {                $ ('. Day-number '). EQ (STARtindex). text (s);                 $ ('. Day '). EQ (startIndex). attr (' data-date ', year + '-' + month + '- ' + s);                 if (s = _date.day && year = _date.year && month = _date.month) {                    $ ('. Day '). EQ (startIndex). addclass ( ' Today ');                                 Startind ex++;            };             for (var k = 0; k < beforenumber; k++) {          & nbsp     var realday = lastmonthmaxday-beforenumber + k + 1;                 $ ('. Day-number '). EQ (k). Text (Realday);                 $ ('. Day-number '). EQ (k). addclass (' Last-month ');         &NBSP       $ ('. Day '). EQ (k). attr (' data-date ', Edge.lasty + '-' + edge.lastm + '-' + realday);            };             for (var L = 1; l <= afternumber l++) {          & nbsp     var _index = beforenumber + Maxday + (L-1);                 $ ('. Day-number '). EQ (_index). Text (l);                 $ ('. Day-number '). EQ (_index). addclass (' Next-month ');                 $ ('. Day '). EQ (_index). attr (' data-date ', Edge.nexty + '-' + Edge.nex TM + '-' + L);                     {          function Getl Astandnextdate (year, month) {            var lastm = month-1 > 0? month-1: &NB Sp               Lasty = Lastm = 12? Year -1:year,                 NEXTM = month + 1 > 12? 1:month + 1,                 Nexty = NEXTM = 1? Year + 1:year;             return {                lastm:lastm, & nbsp               Lasty:lasty,                 NEX TM:NEXTM,                 nexty:nexty             };        }          //obtain What the ' one of one month is in a week &NB Sp       function Getfirstweek (year month) {            var date = new Date (ye AR, month-1, 1);             return date.getday ();        }          //obtain the year, MontH, day of today         function Gettoday () {            var date = new Date ();             return today = [Date.getfullyear (), Date.getmonth () + 1, date.getdate (), date.ge Tday ()];        }          //obtain the number of days for a month     &NB Sp   Function Getmaxday (year, month) {            var date = new Date (year, month, 0); &n Bsp           return date.getdate ();        }          //obtain the number of days for month         Function getmaxdaybylastmonth (year, month) {            month = Month-1 ; = 0? 12:month-1;             year = month = 12? Year-1: Year;             Getmaxday (year, month);       }          //obtain the number of days for next month         Function Getmaxdaybynextmonth (year, month) {          month = month + 1   12? 1:month + 1;             year = month = 1? Year + 1:year;             Getmaxday (year, month);        }          //obtain the days list of a certain and month, retur N Array         function getdaylist (year, month) {            var _list = [],                 Maxday = Getmaxday (year, month),       &NBSP ;         month = month-1;             for (var i = 1; I <= maxday i++) {                var d = new Date (year, month, I); &nbSp               _LIST[I-1] = D.getday ();                         return _list;        }    }} (jQuery, window);  /* <style type= "text/css" >         *{margin:0;padding:0;font-size:12px;font-family: Inconsolata, Monaco, ' Andale Mono ', Courier;        . Cld_grid{width:300px;margin:auto}        . cld_week_box{ Background-color: #3883a3; width:100%;}        . header-day{float:left;padding:10px 0px;width:14.2857%;text-align:center;color:white; font-family: ' Microsoft James Black '}        . Clearfix:after{content: "."; display:block;clear:both;visibility:hidden;line-height:0;height:0;}        . Day{float:left;             width:14.2857%     &NB Sp       height:13px;     &NBSP       padding:10px 0;             Text-align:center;             color: #4f4f4f;             Background-color: #ebebeb;             BORDER-BOTTOM:2PX solid white;             Background-image:url (' Http://kylestetz.github.io/CLNDR/css/./triangle.svg ' );             Background-size:cover;             Background-position:center;             Cursor:pointer;        }         Last-month. next-month {      &NBS P     opacity:0.3;        }        . Days. today{            Backgrou Nd: #fff;        }        . cld_year_month{     &nbsp         padding:10px;             Background-color: #71bbd2;             Text-align:center;             Color:white;             letter-spacing:1px;             font-size:14px;        }         Cld_year_month Div{cursor:pointer}     </STYLE&GT ; * *