javascript - jQuery 日期选择器使用 Ajax 更新可用日期

Question

尝试在 #tour_region 字段更改后动态更新 jQuery Datepicker。我从 Salman 的 Web 博客中获取了这段代码，并将 CSS 标识符更改为我的，显然还更改了 Ajax 调用的 url。

当我构建 JSON 响应时，我使用 .ajax 调用对其进行了测试，但 Salman 有一个 .getJSON 调用。

我收到的错误是: “未捕获类型错误:无法读取未定义的属性‘条目’”

让我觉得 JSON 响应可能有问题。我对 .getJSON 调用不太熟悉。

提前致谢。

$(document).ready(function(){
    $(function() {
        var dateList = null;
        var date1 = new Date;
        date1.setHours(0, 0, 0, 0);
        date1.setDate(1);
        var date2 = new Date;
        date2.setHours(0, 0, 0, 0);
        date2.setMonth(date2.getMonth() + 12, 0);
        $("form #date").datepicker({
            minDate: date1,
            maxDate: date2,
            beforeShowDay: function(date) {
                var r = [true, ""];
                if (dateList === null) {
                    r[1] = "dp-highlight-unknown";
                } else {
                    var key = $.datepicker.formatDate("yy-mm-dd", date);
                    if (key in dateList) {
                        r[1] = "dp-highlight-available";
                        r[2] = dateList[key].join(", ");
                    }
                }
                return r;
            }
        });
        $("#tour_region").on("change", function(){
            var region = $(this).val();
            $.getJSON("/dates?region=" + region, {
                "alt": "json",
                "start-min": $.datepicker.formatDate("yy-mm-dd", date1),
                "start-max": $.datepicker.formatDate("yy-mm-dd", new Date(date2.getTime() + 86400000)),
                "orderby": "starttime",
                "max-results": 100
            }, function(data) {
                dateList = {};
                $.each(data.feed.entry, function(i, entry) {
                    var key = entry.gd$when[0].startTime.substr(0, 10);
                    if (key in dateList == false) {
                        dateList[key] = [];
                    }
                    dateList[key].push(entry.title.$t);
                });
                $("form #date").datepicker("refresh");
            });
        });
    });
});

Answer 1

这允许日期选择器仅显示从 .getJSON 返回的日期。谢谢大家。

 var dateList = null;
  $(function() {    
  var date1 = new Date;
  date1.setHours(0, 0, 0, 0);
  date1.setDate(1);

var date2 = new Date;
date2.setHours(0, 0, 0, 0);
date2.setMonth(date2.getMonth() + 12, 0);

$("form #date").datepicker({
    minDate: date1,
    maxDate: date2,
    beforeShowDay: function(date) {                 
        var r = [false, ""];
        if (dateList === null) {
            r[1] = "dp-highlight-unknown";
        } else {
            var key = $.datepicker.formatDate("yy-mm-dd", date);                        
            if ($.inArray(key, dateList) != -1) {
                r[0] = true;                            
                r[1] = "dp-highlight-available";                            
            }
        }
        return r;
    }
}); 

$("#tour_region").on("change", function(){
    var region = $(this).val();
    $.getJSON("/dates?region=" + region, {
        "alt": "json",
        "start-min": $.datepicker.formatDate("yy-mm-dd", date1),
        "start-max": $.datepicker.formatDate("yy-mm-dd", new Date(date2.getTime() + 86400000)),
        "orderby": "starttime",
        "max-results": 100
    }, function(data) {
        console.log(data);
        dateList = [];
        $.each(data, function(i, entry) {               
            if ($.inArray(entry, dateList) == -1) {
                dateList.push(entry);
            }               
        });
        $("form #date").datepicker("refresh");
    });
 });        
});