datepicker回調不工作在IE

Question

我使用datepicker與PHP和jQuery來顯示事件，但是這個腳本將無法在IE中工作，我不知道爲什麼。我認爲這事做與$不用彷徨的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 ]; 

，然後在裏面highlightDays你for循環，你會嘗試調用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', ''); 

然後應該到你的點擊反應。您可能還想將evt.preventDefault();從$.get回調移至click處理程序。

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

---

如果你想選擇之後的日期（而不是「而不是選擇日期」，因爲我以爲）稱爲你的點擊處理程序，那麼你想要的onSelect callback：

允許您在選擇日期選擇器時定義自己的事件。