最近需要做一个日历组件,默认可以选中某些日期,而且日期选中后可以点击日期。
主要做的内容如下:
1.计算天数对应的星期
2.渲染天数,并且判断是否是否为选中日期,选中则画圈。
3.设置选中日期,则直接将选中日期画圈。
废话不多说,代码如下:
(function($){
$.fn.DatePicker=function(options,params){
if(typeof options=="string"){
var method=$.fn.DatePicker.methods[options];
if(method){
return method(this,params);
}
}
return this.each(function(){
var opts=$.extend({},$.fn.DatePicker.defaults,options);
$.data(this,"DatePicker",opts);
if(opts.width){
$(this).css("width",opts.width+"px");
}
if(opts.height){
$(this).css("height",opts.height+"px");
}
init(this);
});
};
var init=function(jq){
initDatePicker(jq);
bindEvents(jq);
};
var isLeap=function(_year){
if(_year % 4 === 0 && _year % 100 > 0) {
return true ;
}
if(_year % 400 === 0 && _year % 3200 > 0) {
return true ;
}
return false ;
};
// 获取月的天数
function dayLen(year,_month) {
if(_month === 2) {
if(!isLeap(year)) return 28;
return 29;
}
if(_month < 8 && _month % 2 === 1) {
return 31;
}
if(_month >= 8 && _month % 2 === 0) {
return 31;
}
return 30 ;
}
var initDatePicker=function(jq){
var options=$.data(jq,"DatePicker");
var strDay=options.strDay;
var eStrDay=options.eStrDay;
var strHtml="<table width='100%'>";
strHtml+="<thead><tr><th></th><th><a id='monthdown'><<</a></th><th>"+options.year+"年</th><th>"+options.month_EN[options.month-1]+"</th><th>"+options.month_ZH[options.mont