Jquery datepicker перед браузером ShowSay несовместимость и проблемы с обновлением

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

1021 * CSS *

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

.free-day a {
  opacity: 0.7;
}

Пару месяцев назад я написал об этом учебник, который может содержать некоторую дополнительную информацию, которая здесь .

Answer 1

Я думаю, что следовал тому же учебнику. У меня были почти точно такие же проблемы beforeShowDay. С помощью других, мое решение можно увидеть здесь:

jQuery Datepicker beforeShowDay работает только после первого клика

Answer 2

Проблема в том, что fetchFreeDays() является асинхронным, поэтому вполне возможно, что $("#datepicker").datepicker() завершит выполнение до того, как вы заполните массив freeDays, поэтому вы ничего не увидите, когда страница будет отображаться впервые.1005 * Попробуйте поместить $("#datepicker").datepicker() в функцию обратного вызова $.getJSON.