JQuery 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'};
} else {
return [true, '', ''];
}
}
});
注意点:----------要注意的是上面的设置月份特殊背景的这句:return [true,"event",highlight]是无法设置背景颜色的,经过实验,是return {classes:'active'}才是有用的,其中class是日历控件自带的选中的class,如下图+运行效果:
至此就完成效果了,你只需要将需要特殊处理的月份放在数组里面然后进行判断即可,有问题可以交流
这个日期控件的话,如果你的需求是只能显示年月,日并不需要显示,还要实现某些月份有数据,则显示特殊背景的功能,控件并没有提供什么回调函数,不过还是可以利用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;
}
}