<http://jsfiddle.net/K5upK/>

I've been trying to figure out how to hi-light all days before/after a selected date but I can't seem to get the background colors for the table cells to change while hovering. The effect I'm looking for is similar to the hovering functionality on www.kayak.com. What I have working so far lets a user select a start/end date and it hi-lights all days between with a light blue color. What am I forgetting to do? Here's the code:

index.html:

```
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel='stylesheet' href='jquery-ui-1.10.3/themes/base/jquery-ui.css'></link>
    <script src="jquery-ui-1.10.3/jquery-1.9.1.js"></script>
    <script src="jquery-ui-1.10.3/ui/jquery-ui.js"></script>
    <script src="jquery-ui-1.10.3/ui/jquery.ui.core.js"></script>
    <script src="jquery-ui-1.10.3/ui/jquery.ui.datepicker.js"></script>
    <link rel='stylesheet' href='css/main.css'>

    <title>Demo</title>
</head>
<body>

    <div class="datepicker">
        Dates:
        <label><b>To:</b></label>
        <input type="text" id="input1" size="10">
            <label><b>From:</b></label>
        <input type="text" id="input2" size="10">

    </div>

    <script src="js/main.js"></script> 
</body>
</html>

```

main.js

```
$( document ).ready(function() {
    $(".datepicker").datepicker({
        showOtherMonths: false,
        minDate: 0,
        numberOfMonths: 2,

        beforeShowDay: function(date) {
            var startDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
            var endDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
            var className;

            if (startDate && (date.getTime() == startDate.getTime())) {
                className = "start-date"
            }
            else if (endDate && (date.getTime() == endDate.getTime())) {
                className = "end-date";
            }
            else if ((startDate && endDate) && (startDate < date && date < endDate)) {
                className = "between-date";
            }
            else {
                className = "";
            }

            return [true, className];
        },
        onSelect: function(dateText, inst) {
            var startDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
            var endDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
            var selectedDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, dateText);

            if (!startDate || endDate) {
                $("#input1").val(dateText);
                $("#input2").val("");
                $(this).datepicker();
            } else if( selectedDate < startDate ) {
                $("#input2").val( $("#input1").val() );
                $("#input1").val( dateText );
                $(this).datepicker();
            } else {
                $("#input2").val(dateText);
                $(this).datepicker();
            }
        }
    });

    $('.datepicker').on('mouseenter', 'td a', function() {
        console.log('in mouseenter');
        var startDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
        var endDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());

        if (startDate) {
            var cell = $(this);
            cell.addClass('between-date');            
            console.log(cell);
        }

    })
});

```

main.css

```
.start-date .ui-state-default, .end-date .ui-state-default {
    background: #0000FF;
    color: #FFFFFF;
}

.between-date .ui-state-default {
    background: #9999FF;
}

```