Question

I am using datepicker with php and jQuery to show events however this script will not work in IE and I cant figure out why. I think it has something to do with the $.get jQuery but not sure why this will not work

<?
// DB CONNECTION
?>

<link type="text/css" href="/css/calendar-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" />    
<script type="text/javascript" src="/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.16.custom.min.js"></script>
<?
// DB QUERY DB
$sql = "SELECT MONTH(eStart) as mon, DAY(eStart) as day, YEAR(eStart) as year FROM events WHERE eStart LIKE '%$date%' ORDER BY eStart ASC";
$rows = $db->query($sql);
while ($record = $db->fetch_array($rows)) {

    $dates .= "new Date(".$record[year].", ".$record[mon]."-1, ".$record[day]."),";

}

$dates = rtrim($dates, ',');

?> 

<script type="text/javascript">
$(document).ready(function() {


    var dates = [<?= $dates; ?>];


        $('#datepicker').datepicker({
            numberOfMonths: [1,1],
            beforeShowDay: highlightDays
        });


        $('#datepicker').click(function(evt){
            // put your selected date into the data object
            var data = $('#datepicker').val();


            $.get('/getdata.php?date='+ encodeURIComponent(data), function(data) {
                $('#events').empty();
                $('#events').html(data).show();
                evt.preventDefault();

            });
        });

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

        }  

    });
</script>

<style>
#highlight, .highlight {
background-color: #000000;
}
</style>  



<div id="datepicker" style="float:left;margin: 0 10px 0 0;font-size: 72.5%;"></div>

<div id="events" style="float:left;font-size: 10pt;height: 300px;">
<p>Select a date on the calendar to see events.</p>
</div>

<div style="clear:both"></div>

Here it is with no php, just the HTML output

<link type="text/css" href="/css/calendar-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" />    
<script type="text/javascript" src="/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.16.custom.min.js"></script>


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


var dates = [new Date(2011, 11-1, 3),new Date(2011, 11-1, 11),new Date(2011, 11-1, 19),new Date(2011, 11-1, 26),new Date(2011, 12-1, 11),new Date(2012, 6-1, 16),new Date(2012, 7-1, 1),new Date(2012, 9-1, 20),new Date(2012, 10-1, 25)];


$('#datepicker').datepicker({
numberOfMonths: [1,1],
beforeShowDay: highlightDays
});


$('#datepicker').click(function(evt){
// put your selected date into the data object
var data = $('#datepicker').val();


$.get('/getdata.php?date='+ encodeURIComponent(data), function(data) {
$('#theevents').empty();
$('#theevents').html(data).show();
evt.preventDefault();

});
});

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

}  

});
</script>

<style>
#highlight, .highlight {
background-color: #000000;
}
</style>  



<div id="datepicker" style="float:left;margin: 0 10px 0 0;font-size: 72.5%;"></div>

<div id="theevents" style="float:left;font-size: 10pt;height: 300px;">
<p>Select a date on the calendar to see theevents.</p>

</div>

<div style="clear:both"></div>

Answer 1

Your dates array in JavaScript will have a stray trailing comma and that is probably making IE append a stray null to your array:

$dates .= "new Date(".$record[year].", ".$record[mon]."-1, ".$record[day]."),";
                                              # ----------------------------^

So your JavaScript looks like this:

var dates = [ new Date(...), new Date(...), ..., ];

and IE thinks that you mean this:

var dates = [ new Date(...), new Date(...), ..., null ];

And then, in your for loop inside highlightDays, you’ll try to call getTime() on null:

for (var i = 0; i < dates.length; i++) {
    if (dates[i].getTime() == date.getTime()) { // <---------- Right here
        return [true, 'highlight'];
    }
}

That will give you a run-time error in your JavaScript and then all your JavaScript stops working.

Fix your var dates to not include the trailing comma.

---

Once that’s out of the way, it looks like you have a stacking problem with IE. The individual cells within the calendar will look something like this:

<td class=" " onclick="DP_jQuery_1323234722897.datepicker._selectDay('#datepicker',11,2011, this);return false;">
    <a class="ui-state-default" href="#">1</a>
</td>

The return false in the onclick attribute is your problem. If you clear those attributes after binding the datepicker:

$('#datepicker td').attr('onclick', '');

then #datepicker should respond to your click. You’ll probably want to move your evt.preventDefault(); from the $.get callback up to the click handler as well.

Demo: http://jsfiddle.net/ambiguous/XanvW/4/

---

And if you want your click handler to be called after the date is chosen (rather than “instead of selecting the date” as I thought), then you want the onSelect callback:

Allows you to define your own event when the datepicker is selected.