angular 万年历_jQuery实现的简单日历组件定义与用法示例

本文实例讲述了jQuery实现的简单日历组件定义与用法。分享给大家供大家参考，具体如下：

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

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

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

下面这个是还没压缩的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=$("

var _header=$("

"

+"

"

+"«"

+""+_nowDate.year+"年"+_nowDate.month+"月"

+"»"

+"

"

+"

• 日
• 一
• 二
• 三
• 四
• 五
• 六

"

+"

");

var _body=$("

"+self.getDays(_nowDate.year,_nowDate.month)+"

");

var _footer=$("

关闭

");

_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