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 ];

然后，在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 callback：

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

datepicker回调不在IE中工作

1 个答案: