Highlight dates in specific range with jQuery's datepicker

I need to highlight the dates between a start date and an end date, whi开发者_如何学编程ch I should be able to specify. Can anyone help me?

You can use the beforeShowDay event. It will get called for each date that needs to be shown in the calendar. It passes in a date and return an array with [0]= isSelectable, [1]= cssClass, [2]=Some tooltip text

$('#whatever').datepicker({
            beforeShowDay: function(date) {
             if (date == myDate) {
              return [true, 'css-class-to-highlight', 'tooltipText'];
              }else{
              //this will allow the cell be selected without been highlighted
              return [true,'']
              }
           }
});

Here's a working example! You will nees to make a package from here with http://jqueryui.com/download with core, widget and datepicker.

The javascript part to put before :

<script>
$(document).ready(function() {

    var dates = ['22/01/2012', '23/01/2012']; //
            //tips are optional but good to have
    var tips  = ['some description','some other description'];      

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

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

});
</script>

The HTML part:

<div id="datepicker"></div>

Add somewhere this CSS:

    td.highlight {border: none !important;padding: 1px 0 1px 1px !important;background: none !important;overflow:hidden;}
td.highlight a {background: #99dd73 url(bg.png) 50% 50% repeat-x !important;  border: 1px #88a276 solid !important;}

And you will need to make a small image called bg.png to make it work

Thought I would throw in my two cents as it seems faster and more light weight than others:

jQuery(function($) {
  var dates = {
    '2012/6/4': 'some description',
    '2012/6/6': 'some other description'
  };

  $('#datepicker').datepicker({
    beforeShowDay: function(date) {
      var search = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate();

      if (search in dates) {
        return [true, 'highlight', (dates[search] || '')];
      }

      return [false, '', ''];
    }
  });
});

Not sure if this will be still useful, but as this was useful to me, I want to share what I did:

In my JavaScript:

var holidays= ["2016/09/18", "2016/09/19", "2016/01/01", "2016/05/01", "2016/06/27", "2016/08/15"];

$("#SomeID").datepicker({ beforeShowDay: highLight });

function highLight(date) {
        for (var i = 0; i < holidays.length; i++) {
            if (new Date(holidays[i]).toString() == date.toString()) {
                return [true, 'ui-state-holiday'];
            }
        }
        return [true];
    }

And in the jquery-ui-theme.css I've added

.ui-state-holiday .ui-state-default {
    color: red;
}

If you want to highlight weekends also, you have to use this CSS instead

.ui-state-holiday .ui-state-default, .ui-datepicker-week-end .ui-state-default {
    color: red;
}

And this is the result:

(Note that I have configured my language to spanish, but this is not important to this code)

If you are using Keith Wood's datepick you can use the following example taken from here

$(selector).datepick({onDate: highlightDays}); 

function highlightDays(date) { 
    return {selectable: true, dateClass: 'highlight-custom', title: 'tooltip'}; 
}

Late to the party, but here's a JSFiddle that I used to test:

https://jsfiddle.net/gq6kdoc9/

HTML:

  <div id="datepicker"></div>

JavaScript:

var dates = ['11/13/2017', '11/14/2017'];
   //tips are optional but good to have
   var tips = ['some description', 'some other description'];

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

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

And CSS:

td.highlight {
  border: none !important;
  padding: 1px 0 1px 1px !important;
  background: none !important;
  overflow: hidden;
}

td.highlight a {
  background: #ad3f29 url(bg.png) 50% 50% repeat-x !important;
  border: 1px #88a276 solid !important;
}

Built on Mike's working example above!

mugur, your code didn't quite work for me in Firefox or Safari, it required the date var to be formatted (which I got from here). Here

function highlightDays(date) {
for (var i = 0; i < dates.length; i++) {

var d = date.getDate();
var m =  date.getMonth();
m += 1;  // JavaScript months are 0-11
var y = date.getFullYear();

var dateToCheck = (d + "/" + m + "/" + y);
    if (dates[i] == dateToCheck) {
        return [true, 'highlight', tips[i]];
    }
    }
return [true, ''];
}

And, of course, as the above function stands it doesn't account for leading-zeroes padding so the dates array needed to be changed to:

var dates = ['22/1/2014', '23/1/2014'];