Add class to a multiple/specific day in bootstrap datepicker?
Depending on the datepicker you are using you can do something like this:
Most of the date pickers have a beforeShowDay
option. You can set a class here to add to the day you want to change.
For this example im using http://eternicode.github.io/bootstrap-datepicker
An example of how to do this can be found here: jsFiddle
You will want to put the dates you want to highlight / mark into an array:
var active_dates = ["23/5/2014","21/5/2014"];
Then use the beforeShowDay
option to check the dates against the current day being shown and then apply a class.
<input type="text" id="datepicker" />
$("#datepicker").datepicker({
format: "dd/mm/yyyy",
autoclose: true,
todayHighlight: true,
beforeShowDay: function(date){
var d = date;
var curr_date = d.getDate();
var curr_month = d.getMonth() + 1; //Months are zero based
var curr_year = d.getFullYear();
var formattedDate = curr_date + "/" + curr_month + "/" + curr_year
if ($.inArray(formattedDate, active_dates) != -1){
return {
classes: 'activeClass'
};
}
return;
}
});`
The activeClass
can be any form of CSS. In my example i have just changed the background color. In your example you could offset an image and apply it to the day.
.activeClass{
background: #F00;
}