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

您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后清除这些属性:

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

那么#datepicker应该回应你的点击.你可能也希望将你evt.preventDefault();的$.get回调转移到click处理程序.

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

如果你想在选择日期之后调用你的点击处理程序(而不是"而不是像我想的那样选择日期"),那么你想要onSelect回调:

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