CODEWITHSUNDEEP
jquerydatepickerhighlight
Klicker.eu
Klicker.eu

Reputation: 51

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

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!

Upvotes: 5

Views: 12760

Answers (2)

Reigel Gallarde
Reigel Gallarde

Reputation: 65254

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

Upvotes: 10

geo
geo

Reputation: 31

There is problem with timezone. 

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

Upvotes: 3

Related Questions