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