Highlight dates in specific range with jQuery's datepicker

Question

I need to highlight the dates between a start date and an end date, which I should be able to specify. Can anyone help me?

Answer 1

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

Answer 2

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