jquery-ui datepicker日历的灵活运用日期背景色定义，选择日期显示数据
html:
今日课程 公开课
js:
var speciald=[]; //定义日期数组有课程就显示背景色
$.ajax({//默认加载,加载本月日历安排,加载当日的课程安排
url:"../course/duration",
data:{},
type:'post',
success:function(data){
if(data.result.status=='SUCCESS'){
var list=data.result.data.courseList; //今日课程
if(list.length==0){
var html="今日暂无课程！敬请期待。。。。。 ";
$('.lis').append(html);
}else{
for(var i=0;i
var html=''+
''+list[i].course_name+''+
'查看详情'+
'';
$('.lis').append(html);
}
}
for(var i=0;i
speciald.push(data.result.data.dateList[i].school_date);
}
$( "#datepicker" ).datepicker({
dayNamesMin: ['日','一','二','三','四','五','六'],
monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
dateFormat: 'yy-mm-dd',
beforeShowDay: function( date ){ //显示日历中的每个日期背景色
var m=date.getMonth()+1;
if(m>=10){
m=m;
}else{
m="0"+m;
}
var d=date.getDate();
if(d>=10){
d=d;
}else{
d="0"+d;
}
var y=date.getFullYear();
var formatDate=y+"-"+m+"-"+d;//此处日期的格式化和speciald中的格式一样
//inArray实现数组的匹配
if($.inArray(formatDate,speciald)!=-1){
//此处要返回一个数组，specialdays是添加样式的类
//[0]该日期是否可以被选择 （数组的第一项， 为true或false）
//[1]该日期单元格上使用的 CSS 类
//[2]该日期单元格上显示的字符串提示信息。
return [true,"specialdays",formatDate];
}
else{
return [true,'',''];
}
},
onChangeMonthYear:function(year,month,inst){//
月份或年份改变时会被调用
$.ajax({//切换年月操作,加载某年某月的日历安排,加载和当日同一天的有课的课程安排
url:"../course/duration/day",
data:{"year":year,"month":month},
type:'post',
success:function(data){
if(data.result.status=='SUCCESS'){
var courseList=data.result.data.courseList;
var dateList=data.result.data.dateList;
for(var i=0;i
speciald.push(data.result.data.dateList[i].school_date);
}
$('#datepicker').datepicker('refresh'); //刷新日历
}
}
});
},
onSelect: function (dateText,inst) {//
选择日历的日期时被调用
var datas=dateText;
datas=datas.split('-');
$('.lis').html('');
$.ajax({//切换日期操作,加载某年某月某日的课程安排
url:"../course/duration/date",
data:{"year":datas[0],"month":datas[1],"day":datas[2]},
type:'post',
success:function(data){
if(data.result.status=='SUCCESS'){
var list=data.result.data.courseList;
if(list.length==0){
var html="暂无课程！敬请期待。。。。。 ";
$('.lis').append(html);
}else{
for(var i=0;i
var html=''+
''+list[i].course_name+''+
'查看详情'+
'';
$('.lis').append(html);
}
}
}
}
});
}
});
}
}
});