title: How to highlight dates with jQuery's datepicker
body: <p>I'm using <em>Jquery UI datepicker</em> to allow a user to fill a date input by selecting a date out of a displayed a calendar. </p>
  
  <p>So far, everything works as expected : <a href="http://jsfiddle.net/Aut9b/374/" rel="nofollow">http://jsfiddle.net/Aut9b/374/</a></p>
  
  <p>Then, I wanted to highlight certain dates, to help the user choose, so I looked into the <code>beforeShowDay</code> option which makes that possible. </p>
  
  <blockquote>
    <p>beforeShowDayType: Function( Date date )</p>
  
  <pre><code>Default: null
  
  A function that takes a date as a parameter and must return an array with:
  
    [0]: true/false indicating whether or not this date is selectable 
    [1]: a CSS class name to add to the date's cell or "" for the default presentation 
    [2]: an optional popup tooltip for this date
  
  The function is called for each day in the datepicker before it is displayed.
  </code></pre>
  </blockquote>
  
  <p>Here is the demo : <a href="http://jsfiddle.net/Aut9b/375/" rel="nofollow">http://jsfiddle.net/Aut9b/375/</a></p>
  
  <p>The next step is not only to highlight certain dates but to do it dynamically, based on what the user had previously selected in other inputs (in the same form), so I have used <code>ajax</code> in order to retrieve the dates to highlight</p>
  
  <p>This is my (incomplete) code so far.</p>
  
  <pre><code>$(function() {
      $('.datepicker').datepicker({
          dateFormat : 'yy-mm-dd'
      });
  }); 
  
  function fillDates() {
          $('.datepicker').datepicker({
              beforeShowDay: function( date ) {
                  var highlight = dates[date];
                  if( highlight ) {
                      return [true, 'highlight', highlight];
                  } else {
                      return [true, '', ''];
                  }
              }
          });
  }   
  
  function getDates() {
      $.ajax({    
          type : "POST", 
          dataType: "text",
          url : "ajaxFindDates",
          data : {departure:$('#departure option:selected').val(),
              arrival:$('#arrival option:selected').val()},
  
          success : function(data) {              
              var dateStr = JSON.parse(data);
              var dates=[];
              for (var i = 0; i &lt; dateStr.length; i++) {
                  date=new Date(dateStr[i]);
                  dates.push(date);
              }
              fillDates(dates);
          }
              ,
              error : function(data) {
                  alert("Problem!" );
              }
          }); 
  }
  </code></pre>
  
  <p>The function <code>getDates()</code> is called when the value of the <code>&lt;select&gt;</code> changes.</p>
  
  <p>I have tried to debug using the browser developer tool and it seems that the function defined in the <code>beforeShowDay</code> is never executed.</p>
  
  <p>Any help will be much appreciated!
  Thanks.</p>