title: JQuery: Datepicker Highlighting a date Range
body: <p>I'm programming a Struts web application using JQuery 1.7 Datepicker on one of my jsps in order to implement a calendar that can highlight reminders for a user.</p>
  
  <p>I have a question: </p>
  
  <p><em>I'd like to highlight a range of dates</em> in the datepicker. With my code, the Javascript console shows no errors but the range of dates is not highlighted when I log in. this is my function:</p>
  
  <pre><code>$(function(){
  
              $('#datepicker').datepicker({
                  flat: true,
                  numberOfMonths: [1,1],
                  dateFormat: 'dd/mm/yy',
                  beforeShowDay: highlightDays
              });
  </code></pre>
  
  <p>I have an array of reminders, each reminder has 3 attributes, startDate, endDate and unit (associated unit)</p>
  
  <p>On the beforeShowDay event, the function highlightDays is activated:</p>
  
  <pre><code>function highlightDays(date) {
  
       //For all reminders in the db
     for (var i = 0; i &lt; reminders.length; i++) { 
  
      //If the current date in between the start and end date of reminder
        if( (new Date(reminders[i].start).getTime())  
                         &lt;= date.getTime()                            
                        &amp;&amp;  (date.getTime())                           
                         &lt;= (new Date(reminders[i].end).getTime()))  date
                  { 
                    //Then highlight the current date             
                     return [true, 'ui-state-highlight',reminders[i].unit];
  
                  }else{   //Otherwise do not highlight                          
                     return [true, ''];  
                  }
             }          
        }
  </code></pre>
  
  <p>Do you have any idea what I could be doing wrong? What I've implemented so far makes sense to me so I'm not sure what could be going wrong. I would really appreciate some guidance! </p>
  
  <p>Thanks a lot for reading!</p>