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!

回答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

回答2:

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, ''];
 }

来源：https://stackoverflow.com/questions/2735207/javascript-jquery-datepicker-simple-highlighting-of-specific-days-who-can-he

标签

jquery

datepicker

highlight