datepicker 回调在 IE 中不起作用

Question

我正在使用带有 php 和 jQuery 的 datepicker 来显示事件，但是这个脚本在 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

您在 JavaScript 中的 dates 数组将有一个杂散的尾随逗号，这可能会使 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 ];

然后，在highlightDays 内的for 循环中，您将尝试在null 上调用getTime()：

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>

onclick 属性中的return false 是您的问题。如果在绑定日期选择器后清除这些属性：

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

那么#datepicker 应该会响应您的点击。您可能还希望将 evt.preventDefault(); 从 $.get 回调移动到 click 处理程序。

演示：http://jsfiddle.net/ambiguous/XanvW/4/

---

如果您希望在选择日期后调用您的点击处理程序（而不是像我想的那样“而不是选择日期”），那么您需要 onSelect callback:

允许您在选择日期选择器时定义自己的事件。