jquery日历控件实现方法分享

/**
 * 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>';
        calendarDiv += '<div>';
        calendarDiv += '<div><</div>';
        calendarDiv += '<div><<</div>';
        calendarDiv += '<div>></div>';
        calendarDiv += '<div>>></div>';
        calendarDiv += '<input type="text" value="' + _date.year + '">-<input type="text" value="' + _date.month + '"></div>'
        calendarDiv += '<div>';
        calendarDiv += '<div data-index = "0">日</div>';
        calendarDiv += '<div data-index = "1">一</div>';
        calendarDiv += '<div data-index = "2">二</div>';
        calendarDiv += '<div data-index = "3">三</div>';
        calendarDiv += '<div data-index = "4">四</div>';
        calendarDiv += '<div data-index = "5">五</div>';
        calendarDiv += '<div data-index = "6">六</div>';
        calendarDiv += '</div>';
        calendarDiv += '<div>';
        for (var k = 0; k < 35; k++) {
            calendarDiv += '<div><span>' + '' + '</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();
                });
            },