Is there a way to create jquery datepicker days?

Question

Let's say I want 5/2/2011 (or any other day) to be a different color than the rest of the days. Is it possible?

This is a sample item for a specific day.

<td class=" " onclick="DP_jQuery_1305738227207.datepicker._selectDay('#datepicker',4,2011, this);return false;"><a class="ui-state-default ui-state-hover" href="#">11</a></td> 

I don't know if there is a way to override how datepicker creates ids / classes for each day.

Answer 1

Working example: http://jsfiddle.net/hunter/UBPg5/

---

You can do this by adding a callback beforeShowDay

Bind the callback:

 $("input:text.date").datepicker({ beforeShowDay: SetDayStyle }); 

Create your function with some static array of bad dates or create this array somewhere else:

 var badDates = new Array("5/2/2011"); function SetDayStyle(date) { var enabled = true; var cssClass = ""; var day = date.getDate(); var month = date.getMonth() + 1; //0 - 11 var year = date.getFullYear(); var compare = month + "/" + day + "/" + year; var toolTip = badDates.indexOf(compare) + " " + compare if (badDates.indexOf(compare) >= 0) cssClass = "bad"; return new Array(enabled, cssClass, toolTip); } 

Create your styles

 .bad { background: red; } .bad a.ui-state-active { background: red; color: white; } 

---

http://jqueryui.com/demos/datepicker/#event-beforeShowDay

The function accepts the date as a parameter and should return an array with [0] equal to true / false, indicating whether this date is selected, [1] is equal to the name (s) of the CSS class or '' for the default view and [2] an additional pop-up pop-up hint for this date. It is called for every day in the datepicker before displaying it.