I'm attempting to modify the color of selected dates in jQuery Datepicker using CSS and !important.
The beforeShowDay function (f1) is called to check if days are included in arrays (t1, t2, and t3), and if a day appears in two different arrays (like 10-6-2016), the second occurrence is ignored.
What I want is for the colors to change when a day is found in another array. Can anyone provide assistance?
jQuery
function f1(date){
t1=[ '10-6-2016','11-6-2016'];
t2=['15-6-2016', '16-6-2016'];
t3=['10-6-2016','20-6-2016','21-6-2016'];
dmy=date.getDate() + "-" +(date.getMonth() + 1) + "-" + date.getFullYear();
if($.inArray(dmy,t1) !==-1){return[true,'tt1','selectable'];} // check for date
if($.inArray(dmy,t3) !==-1){return[true,'tt3','selectable'];} // check for datey
if($.inArray(dmy,t2) !==-1){return[false,'tt2','unselectable'];} // check for date
else{return[true,"","selectable"];}
}
CSS
.tt1 a{
background-image:none !important;
background:red !important;
color:#fff !important;
opacity:100 !important;
}
.tt2 span{
background:blue !important ;
color:#fff !important;
opacity:100 !important;
}
.tt3 a{
background-image:none !important;
background:green!important;
color:#fff !important;
opacity:100 !important;