Jquery datepicker beforeShowDay瀏覽器不一致和更新問題

Question

我有一個jQuery UI Datepicker的問題，我試圖通過ajax調用來確定給定月份中的空閒日期。

問題是雙重的 -

1. 的beforeShowDay只似乎在Chrome，不FF或IE正確執行時，自由天類根本就沒有被在這些瀏覽器中加入。

2. 即使在Chrome中，當滾動到前一個月時，直到返回到該月份纔會添加免費日班，換句話說，免費日在該月的第一個視圖上不會突出顯示。這似乎不是一個月前進的問題。

的JavaScript

// declare freeDays global 
var freeDays = []; 

// perform initial json request for free days 
fetchFreeDays(); 

$(document).ready(function() 
{ 

    // fairly standard configuration, importantly containing beforeShowDay and onChangeMonthYear custom methods 
    $("#datepicker").datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     showOtherMonths: true, 
     selectOtherMonths: true, 
     dateFormat: 'DD, d MM, yy', 
     altField: '#date_due', 
     altFormat: 'yy-mm-dd', 
     beforeShowDay: highlightDays, 
     onChangeMonthYear: fetchFreeDays, 
     firstDay: 1 // rows starts on Monday 
    }); 
}); 

// query for free days in datepicker 
function fetchFreeDays(year, month) 
{ 
    var start_date = ''; 

    // if a month and year were supplied, build a start_date in yyyy-mm-dd format 
    if (year != undefined && month != undefined) { 
     start_date = year +'-'; 
     start_date += month +'-'; 
     start_date += '01'; 
    } 

    $.getJSON("ajax.todos.php?start_date="+ start_date, function(data){ 
     $.each(data, function(index, value) { 
      freeDays.push(value.freeDate); // add this date to the freeDays array 
     }); 
    }); 
} 

// runs for every day displayed in datepicker, adds class and tooltip if matched to days in freeDays array 
function highlightDays(date) 
{ 
    for (var i = 0; i < freeDays.length; i++) { 
     if (new Date(freeDays[i]).toString() == date.toString()) { 
     return [true, 'free-day', 'no to-do items due']; // [0] = true | false if this day is selectable, [1] = class to add, [2] = tooltip to display 
     } 
    } 

    return [true, '']; 
} 

PHP

// ajax.todos.php 
$i = 0; // counter prevents infinite loop 
$cutoff = '61'; // limit on timespan (in days) 
$result = array(); 

// if date is provided, use it, otherwise default to today 
$start_date = (!empty($start_date)) ? mysql_real_escape_string($start_date) : date('Y-m-d'); 
$check_date = $start_date; 
$end_date = date('Y-m-d', strtotime("$start_date +$cutoff days")); // never retrieve more than 2 months 

while ($check_date != $end_date) 
{ 
    // check if any incomplete todos exist on this date 
    if (mysql_result(mysql_query("SELECT COUNT(id) FROM " . DB_TODOS . " WHERE date_due = '$check_date'"), 0) == 0) 
    { 
     $result[] = array('freeDate' => $check_date); 
    } 

    // +1 day to the check date 
    $check_date = date('Y-m-d', strtotime("$check_date +1 day")); 

    // break from loop if its looking like an infinite loop 
    $i++; 
    if ($i > $cutoff) break; 
} 

header('Content-type: application/json'); 
echo json_encode($result); 

CSS

/* override free days background in jquery ui datepicker */ 
.free-day { 
    background: #2e9500; 
} 

.free-day a { 
    opacity: 0.7; 
} 

我幾個月前寫的教程這個是可能有一些額外的信息，這是here 。

Answer 1

的問題是，fetchFreeDays()是異步的，所以它可能是$("#datepicker").datepicker()完executeing你已經填充了freeDays陣列之前，所以你看不到任何東西，當頁面呈現第一。

試着把$("#datepicker").datepicker()放在你的$.getJSON的回調函數中。

Answer 2

我想我遵循相同的教程。我有幾乎完全相同的問題beforeShowDay。與其他人的幫助下，我的解決方案可以在這裏看到：

jQuery Datepicker beforeShowDay works only after 1st click