Question

我在使用jQuery UI Datepicker时遇到了一些问题，我试图通过ajax调用来突出显示给定月份的免费日期。

问题是双重的 -

beforeShowDay似乎只在Chrome中正确执行，而不是FF或IE，这些浏览器中根本没有添加免费课程。
即使在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()数组之前freeDays可能已完成执行，因此当页面首次显示时您看不到任何内容渲染。

尝试将$("#datepicker").datepicker()放入$.getJSON的回调函数中。

Answer 2

我想我遵循了同样的教程。我有几乎完全相同的beforeShowDay问题。在其他人的帮助下，我的解决方案可以在这里看到：

jQuery Datepicker beforeShowDay works only after 1st click

Jquery datepicker beforeShowDay浏览器不一致和更新问题

2 个答案: