Question

I’m trying to style some cells of a jquery-ui date picker based on application logic. I need to be able to scan through a table and select cells that contain a specified string of html. Here’s an example table:

   <table class="ui-datepicker-calendar">
      <thead>
      <tr>
         <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th>
         ...
      </tr>
      </thead>
      <tbody><tr>
         <td class="ui-datepicker-week-end ui-datepicker-other-month "> 1 </td>
         ...
      </tr>
      </tbody>
   </table>

How would I, say, scan through the table and select the cell containing “1” so that I could style it? I’d appreciate any help.

Answer 1

You can use the beforeShowDay event to add classes to a cell, like this:

$(function() {
  $("#datepicker").datepicker({
    beforeShowDay: function(date) {
      return [true, date.getDate() === 1 ? 'color' : ''];
    },
    showOtherMonths: true
  });
});​

The second parameter in the array is any additional classes to add to the generated <td>. Then just give it a style that matches, e.g.:

.color.ui-datepicker-other-month .ui-state-default { color: red; }​

You can try out a quick demo here