title: How To Highlight Selected Dates In Date Picker
body: <p>First is there a way to not highlight the current day.  Second is there a way to highlight specific days like the way the current day was highlighted?</p>
  
  <p>Here is the code i have:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link type="text/css" href="css/calendar-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" /&gt; 
  &lt;script type="text/javascript" src="js/jquery-1.6.2.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"&gt;&lt;/script&gt;
  
  
  &lt;script type="text/javascript"&gt;
  var dates = [new Date(2011, 9 - 1, 19),
               new Date(2011, 9 - 1, 20),
               new Date(2011, 9 - 1, 20),
               new Date(2011, 9 - 1, 21),
               new Date(2011, 10 - 1, 31)];
  
  $(function() {
  
      $('#datepicker').datepicker({
          numberOfMonths: [1, 1],
          beforeShowDay: highlightDays,
      });
  
  
      $('#datepicker').click(function() {
          // put your selected date into the data object
          var data = $('#datepicker').val();
  
          $.get('getdata.php?date=' + data, function(data) {
              $('#events').html(data).show('slow');
          });
      });
  
      function highlightDays(date) {
          for (var i = 0; i &lt; dates.length; i++) {
              if (dates[i].getTime() == date.getTime()) {
                  return [true, 'highlight'];
              }
          }
          return [true, ''];
      }
  });
  &lt;/script&gt;
  
  &lt;style&gt;
  #highlight, .highlight {
      background-color: #000000;
  }
  &lt;/style&gt;  
  
  &lt;/head&gt;
  &lt;body&gt;
  
  
  &lt;div id="datepicker" style="float:left;margin: 0 10px 0 0;font-size: 72.5%;"&gt;&lt;/div&gt;
  
  &lt;div id="events" style="float:left;font-size: 10pt;"&gt;
  &lt;p&gt;Select a date on the calendar to see events.&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div style="clear:both"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>