用jQuery写个简单的日历组件

说到日历组件，网上一搜一大堆，各种插件啊、集成框架啊实在不少。但是插件有的不合需求，框架嘛依赖关系一大堆，比如jQueryUI、bootstrap等。其实现在我就是想要一个轻量级的日历组件，功能也不需要很强大，只要能兼容所有浏览器，能选择任意年份日期和星期就可以了。

好了，废话不多说，直接上代码：

好了，先引入jQuery库。（发表一下感概：angularJS的数据双向绑定着实让我对jQuery的未来担忧了一阵子，不过jQuery毕竟存在的时间很久，API文档和应用方面实在太广泛了 * _ *，而且jQuery无可厚非是一款相当不错的DOM操作类库，至少我觉得段时间内这个地位无可动摇。所以大家还是大胆地用吧！）

    <script type="text/javascript" src="./js/jQuery.min.js"></script>

下面这个是还没压缩的js文件，纯手写哦 ^_^

/*
 * jquery extend: dateField
 * author:jafeney
 * createTime:2015-8-28 （很久之前写的，拿出来炒下冷饭）
 */

jQuery.fn.extend({
    dateField:function(options,callback){
   
        var self=this,
            _self=$(this),
            _eventType=options.eventType || 'click',
            _style=options.style || 'default',
            _parent=$(this).parent(),
            _nowDate={
                year:new Date().getFullYear(),
                month:new Date().getMonth()+1
            },
            _switchState=0,
            _monthArray=['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
            _daysArray=[31,28,31,30,31,30,31,31,30,31,30,31];

        /*init*/
        _self.on(_eventType,function(){
   
            /*before use this extend,the '_self' must have a container*/
            _self.parent().css('position','relative');

            /*create element as dateField's container*/
            var _container=$("<div class='dateField-container'></div>");
            var _header=$("<div class='dateField-header'>"
                    +"<div class='dateField-header-btns'>"
                    +"<span class='btn dateField-header-btn-left'>«</span>"
                    +"<span class='btn dateField-header-datePicker'>"+_nowDate.year+"年"+_nowDate.month+"月</span>"
                    +"<span class='btn dateField-header-btn-right'>»</span>"
                    +"</div>"
                    +"<ul class='dateField-header-week'><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ul>"
                    +"</div>");
            var _body=$("<div class='dateField-body'>"+self.getDays(_nowDate.year,_nowDate.month)+"</div>");
            var _footer=$("<div class='dateField-footer'><span class='btn dateField-footer-close'>关闭</span></div>");
            _container.append(_header).append(_body).append(_footer);
            _self.parent().append(_container);
            _self.parent().find('.dateField-container').show();

            /*do callback*/
            if(callback) callback();
        });

        /*some functions*/
        /*get any year and any month's days into a list*/
        self.getDays=function(year,month){
   
            var _monthDay=self.getMonthDays(year,month);
            var _firstDay=new Date(year+'/'+month+'/'+'01').getDay();  //get this month's first day's weekday
            var returnStr='';
            returnStr+="<ul class='dateField-body-days'>";
            for(var i=1;i<=42;i++){
                if(i<=_monthDay+_firstDay){
                    if(i%7===0){
                        returnStr+="<li class='dateField-select select-day last'>"+self.filterDay(i-_firstDay)+"</li>";
                    }else{
                        returnStr+="<li class='dateField-select select-day'>"+self.filterDay(i-_firstDay)+"</li>";
                    }
                }else{
                    if(i%7===0){
                        returnStr+="<li class='dateField-select select-day last'></li>";
                    }else{
                        returnStr+="<li class='dateField-select select-day'></li>";
                    }
                }
            }
            returnStr+="</ul>";
            return returnStr;
        }
        /*filter days*/
        self.filterDay=function(day){
   
            if(day<=0 || day>31)