Thursday, 5 September 2013

jquery datepicker css styling disabled dates

jquery datepicker css styling disabled dates

I am trying to use the Jquery datepicker with a MySQL database to show any
dates that have events.
I have set showOtherMonths: true because of preference.
What I would like to do is style the disabled dates that are in the
current month so they are not the same colour as the dates in the other
months.
how can I add the styles for this?
$(document).ready(function()
{
var selected_dates = new Array();
// get all the events from the database using AJAX
selected_dates = getSelectedDates();
$('#datepicker').datepicker({
dateFormat: 'yy-m-d',
inline: true,
showOtherMonths: true,
dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
beforeShowDay: function (date)
{
// get the current month, day and year
// attention: the months count start from 0 that's why you'll
need +1 to get the month right
var mm = date.getMonth() + 1,
dd = date.getDate(),
yy = date.getFullYear();
var dt = yy + "-" + mm + "-" + dd;
if(typeof selected_dates[dt] != 'undefined')
{
// put a special class to the dates you have events for so
you can distinguish it from other ones
// the "true" parameter is used so we know what are the
dates that are clickable
return [true, " my_class"];
}
return [false, ""];
}
});
});

No comments:

Post a Comment