JQuery bootstrap datepicker 单独设置某些日期的特殊背景颜色和某些月份特殊背景

         JQuery bootstrap datepicker这个日期简直非常好用,不过项目有这样的需求,点击日期查询月份,但需要先判断哪些月份有数据,然后再设置这几个月份为特殊的背景颜色,以便用户知道哪些月份有数据,就不用一个个月份去点击查看数据了,这样是不是很方便,百度上基本没有答案,连了外网查看到的资料如下,正是参考下面这些链接,才做出效果的:

 

 Bootstrap-datepicker set some date background color :关键字
 http://www.spiceforms.com/blog/highlight-particular-dates-jquery-ui-datepicker/网址:
 http://jsfiddle.net/apougher/UdePB/  动手操作的网站
 https://www.sitepoint.com/finding-date-picker-input-solution-bootstrap/
 http://stackoverflow.com/questions/23604026/add-class-to-a-multiple-specific-day-in-bootstrap-datepicker stack问答网站的问题
 http://stackoverflow.com/questions/22514772/highlight-certain-dates-on-bootstrap-datepicker
 http://stackoverflow.com/questions/22514772/highlight-certain-dates-on-bootstrap-datepicker
 http://stackoverflow.com/questions/27229771/change-text-or-background-color-of-bootstraps-date-picker
 
 http://stackoverflow.com/questions/23604026/add-class-to-a-multiple-specific-day-in-bootstrap-datepicker 这个设置的方法解决了我的问题

      上述的答案,其实都类似,但只有最后一个链接设置背景颜色的方式,经过我的实验才是正确的,如下:

 

 

 //当弹出日期,选择月份时,触发方法,设置有数据的月份的背景颜色为蓝色
				//changeMonth月份切换触发,show当选择器显示时被触发。
				var eventDates = {};
                eventDates[ new Date( '2016-11-04' )] = new Date( '2016-11-04' );
                eventDates[ new Date( '2016-10-06' )] = new Date( '2016-10-06' );
                eventDates[ new Date( '2016-12-07' )] = new Date( '2016-12-07' );
                eventDates[ new Date( '2016-09-25' )] = new Date( '2016-09-25' );
				//WagesNow.init();
				$(".date-picker").datepicker({
				   // autoclose: true,
					format : 'yyyy-mm-dd',
					//weekStart : 1,
					//autoclose : true,
					//startView : 2,
					//maxViewMode : 1,
					//minViewMode : 1,
					//forceParse : false,
					language : 'zh-CN',
					//设置有数据的月份为特殊背景
					beforeShowDay: function( date ) {
                       var highlight = eventDates[date];
                       if( highlight ) {
                        alert("设置高亮背景"+date);
                         // return [true, "event", highlight]; //这个方式是错误的额
                          return {classes: 'active'}</span>;
                       } else {
                          return [true, '', ''];
                       }
                   }
				});

     注意点:----------要注意的是上面的设置月份特殊背景的这句:return [true,"event",highlight]是无法设置背景颜色的,经过实验,是return {classes:'active'}才是有用的,其中class是日历控件自带的选中的class,如下图+运行效果:

 

  

 

 

          至此就完成效果了,你只需要将需要特殊处理的月份放在数组里面然后进行判断即可,有问题可以交流

 

==================================2016年11月14日10:41:25分割线,显示某些月份特殊背景-====================================

    这个日期控件的话,如果你的需求是只能显示年月,日并不需要显示,还要实现某些月份有数据,则显示特殊背景的功能,控件并没有提供什么回调函数,不过还是可以利用beforeshowday,根据date,转换成年月的格式,然后遍历span标签,取到相应的月份,如果一致,则增加特殊背景颜色,如下代码:

 

 //发ajax获取有数据的月份
			var wageMonths={};//从数据库中查询有数据的月份list集合
		
			jQuery(document).ready(function() {
				
			//*******************日期控件中,设置有数据的月份的背景颜色*****************************
			  $.ajax({
					url : "wageHisMonths.action",
					type : "POST",
					data : null,
					async : false,
					cache : false,
					contentType : false,
					processData : false,
					success : function(data) {
						if (data != null) {
							wageMonths= data;
							//alert("获取有数据的月份"+wageMonths);
						}
					}
				});


				//当弹出日期,选择月份时,触发方法,设置有数据的月份的背景颜色为蓝色
				//changeMonth月份切换触发,show当选择器显示时被触发。
				$(".date-picker").datepicker({
					format : 'yyyy-mm',
					weekStart : 1,
					autoclose : true,
					startView : 3,
					maxViewMode : 1,
					minViewMode : 1,
					forceParse : false,
					language : 'zh-CN',
					beforeShowDay : function(date) {
					setTimeout(function() {
					for(var i=0;i<wageMonths.length;i++){
                        //获取用户点击界面的年份
						var datamonth = formatDate(date);
						var strCurr = new Array(); //定义一数组 
						strCurr = datamonth.split("-");
						
						//后台数据获取的年份进行比较,然后这是某些月份的背景颜色
						strselect = wageMonths[i].split("-"); //字符分割 ,取2016-10的月份10,然后转换成文字10月份
						
						//比较当前年份和后台传过来的数据年份
						if(strCurr[0] == strselect[0]){
						   //遍历下方所有的数据,然后进行比较 
						   $(".table-condensed td span").each(function() {


							  if ($(this).text() == dightConvertMonth(strselect[1])) {
								$(this).addClass("activeClass");
							  }
						   });
						}
					   }
					  }, 1000);
                        
				        return {classes: 'activeClass'};     
				     }
				 });


			});
			
			//*******************日期控件中,设置有数据的月份的背景颜色**********结束*******************

 

         用到的date时间转换成年月,一年将月份数字转换成文字的方法:

 

 

 

// 为了在设置月份有数据则显示背景的功能判断当中:
// Wed Oct 05 2016 00:00:00 GMT+0800 (中国标准时间)转换为普通的时间格式
function formatDate(date) {
	var y = date.getFullYear();
	var m = date.getMonth() + 1;
	m = m < 10 ? '0' + m : m;
	// var d = date.getDate();
	// d = d < 10 ? ('0' + d) : d;
	return y + '-' + m;
};

//日期控件中,将月份数字转换成文字月份,qiulinhe:2016年11月14日10:40:15
function dightConvertMonth(dig) {
	switch (parseInt(dig)) {
	case 1:
		return "一月"
		break;
	case 2:
		return "二月"
		break;
	case 3:
		return "三月"
		break;
	case 4:
		return "四月"
		break;
	case 5:
		return "五月"
		break;
	case 6:
		return "六月"
		break;
	case 7:
		return "七月"
		break;
	case 8:
		return "八月"
		break;
	case 9:
		return "九月"
		break;
	case 10:
		return "十月"
		break;
	case 11:
		return "十一月"
		break;
	case 12:
		return "十二月"
		break;
	default:
		return "一月"
		break;
	}

}

效果如下: