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

素颜马尾好姑娘i 2021-06-26 16:06 406阅读 0赞

`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`,如下图+运行效果:  
![这里写图片描述][20180524212350721]

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

--------------------

这个日期控件的话,如果你的需求是只能显示年月,日并不需要显示,还要实现某些月份有数据,则显示特殊背景的功能,控件并没有提供什么回调函数,不过还是可以利用`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;
    	}
    
    }

[20180524212350721]: /images/20210626/829bd800949c4557a0e54e0e05eb7d8f.png