JavaScript: jQuery Datepicker - simple highlighting of specific days, who can help? (source inside)

Question

Hi guys,

i want to use the Datepicker for highlighting specific dates. Here is my latest code:

<script type="text/javascript">

var dates = [30/04/2010, 01/05/2010];

$(function(){

    $('#datepicker').datepicker({
        numberOfMonths: [2,3],                
        dateFormat: 'dd/mm/yy',
        beforeShowDay: highlightDays
    });

    function highlightDays(date) {
        for (var i = 0; i < dates.length; i++) {
            if (dates[i] == date) {
                          return [true, 'highlight'];
                  }
          }
          return [true, ''];

 }   

});
 </script>

my CSS is:

#highlight, .highlight {
    background-color: #cccccc;
}

Well the calendar comes up, but there is nothing highlighted. Where is the problem in my code? If anyone could help that would be great.

Another option/solution could be: disable all dates, but make available only dates in an array.

Thanks!

Answer 1

let tell you some of the problems...

1 . var dates = [30/04/2010, 01/05/2010];

would not store your dates as expected... it will do math operations...

2.  change it to string but in this format: mm/dd/yy
so, you should have something like:

var dates = ['04/30/2010', '05/01/2010'];

3.  use this function:

function highlightDays(date) {
        for (var i = 0; i < dates.length; i++) {
            if (new Date(dates[i]).toString() == date.toString()) {              
                          return [true, 'highlight'];
                  }
          }
          return [true, ''];

 } 

4.  CSS as:

td.highlight {
    background-color: red;
    border: 1px blue solid;
}

5.  demo