обратный вызов DatePicker не работает в IE

Question

Я использую datepicker с php и jQuery для отображения событий, однако этот скрипт не будет работать в IE, и я не могу понять, почему. Я думаю, что это как-то связано с $ .get jQuery, но не уверен, почему это не сработает

<?
// 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>

Здесь нет php, только вывод HTML

<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

В вашем массиве dates в JavaScript будет запаздывающая запятая, и это, вероятно, заставляет IE добавлять в ваш массив беспризорный null:

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

Итак, ваш JavaScript выглядит так:

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

и IE думает, что вы имеете в виду это:

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

А затем, в вашем for цикле внутри highlightDays, вы попытаетесь вызвать getTime() на null:

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

Это даст вам ошибку во время выполнения вашего JavaScript, и тогда весь ваш JavaScript перестанет работать.

Исправьте ваш var dates, чтобы он не включал запятую.

---

Раз уж это не так, похоже, у вас проблема со стеком в IE. Отдельные ячейки в календаре будут выглядеть примерно так:

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

Ваша проблема связана с return false в атрибуте onclick. Если вы очистите эти атрибуты после привязки указателя даты:

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

тогда #datepicker должен ответить на ваш клик. Возможно, вы захотите переместить ваш evt.preventDefault(); с обратного вызова $.get на обработчик click.

Демо: http://jsfiddle.net/ambiguous/XanvW/4/

---

И если вы хотите, чтобы ваш обработчик щелчков вызывался после выбора даты (а не «вместо выбора даты», как я думал), вам нужен onSelect обратный вызов :

Позволяет вам определить собственное событие, когда выбран указатель даты.