datepicker call back not working in IE - php

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.