js实现工作日期选中的日历

      最近需要做一个日历组件，默认可以选中某些日期，而且日期选中后可以点击日期。

      主要做的内容如下：

                 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.month-1]+"</th><th><a id='monthup'>>></a></th><th></th></tr></thead>";strHtml+="<tr>";for(var i=0;i<eStrDay.length;i++){strHtml+="<td align='center'>"+eStrDay[i]+"</td>";}strHtml+="</tr>";strHtml+="<tr>";for(var i=0;i<strDay.length;i++){strHtml+="<td align='center'>星期"+strDay[i]+"</td>";}strHtml+="</tr>";var options=$.data(jq,"DatePicker");var renderHtml=initMonthDay(jq.id,options);strHtml+=renderHtml;strHtml+="</table>";$(jq).append(strHtml);};var initTd=function(id,options,day){var str="<div class='cldiv'  id='"+(id+day)+"'>";var nowday=options.year+"-"+options.month+"-"+day;if(options.redDay.indexOf(nowday)>-1){str+="<input class='check' type='checkbox' id='"+(id+'_check_'+day)+"'>";str+='<span class="clspan" style="border:1px solid red" id=\''+(id+"_day_"+day)+'\' >'+day+'</span>';}else{if(options.checkedDay.indexOf(nowday)>-1){str+="<input class='check' checked type='checkbox' id='"+(id+'_check_'+day)+"'>";str+='<span class="clspan" style="border:1px solid #004ea1" id=\''+(id+"_day_"+day)+'\' >'+day+'</span>';}else{str+="<input class='check' type='checkbox' id='"+(id+'_check_'+day)+"'>";str+='<span class="clspan" title="'+options.year+'-'+options.month+'-'+day+'" id=\''+(id+"_day_"+day)+'\' >'+day+'</span>';}}str+="</div>";return str;};var initMonthDay=function(id,options){var year=options.year;var month=options.month;var d=new Date(year,month-1,1).getDay();if(d==0){d=7;}var monthDay=dayLen(year,month);var arrLength=Math.ceil((d+monthDay)/7);var arr=[];var start=1;for(var i=0;i<arrLength;i++){arr[i]=[];for(var j = 0; j < 7; j++) {if(i==0){arr[i][j]='';if((j+1)>=d){arr[i][j]=start;start++;}}else{if(start<=monthDay){arr[i][j]=start;start++;}}}}//console.info(arr);var strHtml=[];arr.forEach(function (value, index, arr){strHtml.push("<tr>");for(var i=0;i<value.length;i++){strHtml.push('<td class="cltd" align="center">');if(value[i]){strHtml.push(initTd(id,options,value[i]));}strHtml.push('</td>');}strHtml.push("</tr>");} );return strHtml.join('');};var bindEvents=function(jq){$("input[type='checkbox']").on("change",function(){var ids=this.id.split("_");if(this.checked){$("#"+ids[0]+"_day_"+ids[2]).css({"border":"1px solid #004ea1","cursor":"pointer"});var options=$.data(jq,"DatePicker");options.checkedDay.push(options.year+"-"+options.month+"-"+$("#"+ids[0]+"_day_"+ids[2]).text());$.data(jq,"DatePicker",options);}else{$("#"+ids[0]+"_day_"+ids[2]).css({"border":"1px solid #fff","cursor":"default"});var options=$.data(jq,"DatePicker");options.checkedDay.remove(options.year+"-"+options.month+"-"+$("#"+ids[0]+"_day_"+ids[2]).text());$.data(jq,"DatePicker",options);}});$(".clspan").on("click",function(){var ids=this.id.split("_");if($("#"+ids[0]+"_check_"+ids[2]).attr('checked')){var options=$.data(jq,"DatePicker");options.clickCheckDay(options.year+"-"+options.month+"-"+$(this).text());}});$("#monthdown").on("click",function(){var options=$.data(jq,"DatePicker");if(options.month==1){options.month=12;options.year=options.year-1;}else{options.month=options.month-1;}$.data(jq,"DatePicker",options);$(jq).empty();init(jq);});$("#monthup").on("click",function(){var options=$.data(jq,"DatePicker");if(options.month==12){options.month=1;options.year=options.year+1;}else{options.month=options.month+1;}$.data(jq,"DatePicker",options);$(jq).empty();init(jq);});};$.fn.DatePicker.methods={getCheckedDay:function(jq){//console.info($.data(jq[0],"DatePicker"));return $.data(jq[0],"DatePicker").checkedDay;},getOptions:function(jq){//console.info($.data(jq[0],"DatePicker"));return $.data(jq[0],"DatePicker");},setCheckedDay:function(jq,data){var options=$.data(jq[0],"DatePicker");$(".clspan").css({"border":"1px solid #fff","cursor":"default"});$(".check").attr('checked',false);for(var i=0;i<data.length;i++){var day=data[i].split("-");console.info(day);if(options.year==day[0]&&options.month==day[1]){$("#date_check_"+day[2]).attr('checked',true);$("#date_day_"+day[2]).css({"border":"1px solid #004ea1","cursor":"pointer"});}}options.checkedDay=data;$.data(jq,"DatePicker",options);},setYM:function(jq,data){var options=$.data(jq[0],"DatePicker");options.year=data.year;options.month=data.month;$.data(jq,"DatePicker",options);$(jq[0]).empty();init(jq[0]);}};// 默认值$.fn.DatePicker.defaults = {year:new Date().getFullYear(),month:new Date().getMonth()+1,strDay:['一','二','三','四','五','六','日'],    eStrDay:['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],month_EN:['January','February','March','April','May','June','July','August','September','October','November','December'],month_ZH:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],redDay:[],checkedDay:[],renderTd:function(date){return "";},clickCheckDay:function(date){}};})(jQuery);$(function(){$("#date").empty();$("#date").DatePicker({redDay:['2017-5-21'],checkedDay:['2017-6-20'],width:600,height:400,clickCheckDay:function(date){alert(date);}});$("#date").DatePicker('setCheckedDay',['2017-5-3','2017-5-28']);console.info($("#date").DatePicker('getCheckedDay'));});