JQuery bootstrap datepicker 单独设置某些日期的特殊背景颜色和某些月份特殊背景
2016-11-11 10:52
776 查看
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标签,取到相应的月份,如果一直,则增加特殊背景颜色,如下代码:
用到的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;
}
}效果如下:
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;
}
}效果如下:
相关文章推荐
- bootstrap-datepicker动态设置日期的startDate和endDate
- 利用JavaScript和bootstrap-datepicker设置可选日期
- Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
- 设置DatePickerDialog主题颜色及起始日期
- jQuery UI datepicker用beforeShowDay给特殊日期添加样式以及常用的属性
- bootstrap-datepicker 日期格式设置
- 设置datepicker日期可选范围为当前年份第一天或者当前月份第一天至当前日期
- JQUERY DATEPICKER日历控件支持多种颜色弹出日历选择日期
- Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
- datepicker设置日期格式为yyyy年m月d日
- dateNavigator指定日期设置背景颜色
- jQuery里面的datepicker日期控件默认是显示英文的,如何显示中文或其他语言呢?
- jQuery UI datepicker 日期控件出现问号的解决方式
- 获取日期的jquery.ui.datepicker
- JQuery Datepicker 中文显示设置
- jquery datepicker 显示12个月份
- jquery datepicker 点击日期控件不会自动更新input的值
- jqueryui的datepicker显示中文日期格式的设置
- android应用开发揭秘examples_04-11笔记(DatePicker,TimePicker时间日期设置,略有改动)
- JQuery 插件 ui.datepicker.js 中文日期输入框