jquery日歷控件實現方法分享

 這篇文章主要介紹了jquery日歷控件實現方法，網上有好多這樣的插件，下面是自己實現的一個方法,需要的朋友可以參考下

注釋掉的是默認的css樣式，你可以修改成自己的樣式實現另一個風格，大家參考使用吧    代碼如下: /**  * jQuery Calendar Plugin  */ (function($, window) {       'use strict';     $.fn.calendar = function(options) {         //check is select, if nothing select, return this         if (!this.length) {             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 event name that triggers the control             onSelectDate: null, //callback function after select date             autoClose: false         };           //inherit user-defined parameter         defaults = $.extend(defaults, options);           //default as data of the day         var d_date = new Date();         var _date = {             year: d_date.getFullYear(),             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">日</div>';         calendarDiv += '<div class="header-day" data-index = "1">一</div>';         calendarDiv += '<div class="header-day" data-index = "2">二</div>';         calendarDiv += '<div class="header-day" data-index = "3">三</div>';         calendarDiv += '<div class="header-day" data-index = "4">四</div>';         calendarDiv += '<div class="header-day" data-index = "5">五</div>';         calendarDiv += '<div class="header-day" data-index = "6">六</div>';         calendarDiv += '</div>';         calendarDiv += '<div class="days clearfix">';         for (var k = 0; k < 35; k++) {             calendarDiv += '<div class="day"><span class="day-number">' + '' + '</span></div>';         }         calendarDiv += '</div></div>';           var calendarAction = {             //initialization             initAction: function() {                 calendarAction.thisClick();                 calendarAction.inputChange();                 calendarAction.buttonChange();                 calendarAction.chooseDate();             },               //click to display             thisClick: function() {                 self.bind(defaults.eventName, function(e) {                     calendarAction.showCalendar();                 });             },               //when year and month in the input box changes             inputChange: function() {                 $('#calendar_year, #calendar_month').bind('change', function() {                     var year = $('#calendar_year').val(),                         month = $('#calendar_month').val();                     if (!/^d{4}$/.test(year)) {                         alert('please input four-digit year');                         return false;                     }                     if (!/^d{1,2}$/.test(month) || (month > 12 || month <= 0)) {                         alert('please input proper month');                         return false;                     }                     //Initialize after year and month changes                     init_day_numbers(year, month);                 });             },               //click to change year and month             buttonChange: function() {                 $('#last-year').bind('click', function() {                     var lastYear = parseInt($('#calendar_year').val()) - 1 > 0 ? parseInt($('#calen