0

这有点涉及，我会尽量说清楚。我还将首先说这在 Chrome 和更高版本的 IE 中按预期工作，但在 Firefox 或更旧的 IE 中没有，这是我问题的主要内容。

我已将 jquery datepicker 日历添加到具有事件列表的页面中。每个事件都被赋予了名称，表明它们发生的日期，并且都具有 css 类“列表”。我创建了一个数组（列表），它使用 getElementsByClassName("listing") 获取所有这些事件。然后我创建了另一个数组（事件）并遍历“列表”中的所有元素，将一个对象推送到为 datepicker 格式化的新数组的每个元素中。然后我在 datepicker 'beforeShowDay' 函数中使用这个数组（事件）来突出显示/链接所有有事件的日期。

同样，这在 Chrome 和较新的 IE 中效果很好，但在 Firefox（日期选择器显示但没有突出显示的日期）或较旧的 IE 版本（日期选择器日历不显示）中无效。关于如何让它在所有浏览器上工作的任何想法？

这是我的代码：

$(document).ready(function() {

    var listing = document.getElementsByClassName("listing");
    var events = new Array();

    for (var i = 0; i < listing.length; i++) {
        // something wrong with this line...?
        events.push({Title : listing[i].getAttribute("name"), Date: new Date(listing[i].getAttribute("name"))});
    }
    $("#calendar").datepicker({
        beforeShowDay: function(date) {
            var result = [false, '', null];
            var matching = $.grep(events, function(event) {
                return event.Date.valueOf() === date.valueOf();
            });

            if (matching.length) {
                result = [true, 'highlight', null];
            }
            return result;
        },
        onSelect: function(dateText) {
            var selectedDate = new Date(dateText);
        var day = selectedDate.getDate();
        var month = selectedDate.getMonth() + 1;
        var year = selectedDate.getFullYear();
        location.hash = "#" + month + "-" + day + "-" + year;
        //alert(month + "-" + day + "-" + year);
        }
    });

});

我注意到的一件事是，如果我用每个值的显式定义替换生成“事件”数组的 for 循环，它将在 Firefox 中工作，但仍然不能在较旧的 IE 中工作。

换句话说，替换这个：

    for (var i = 0; i < listing.length; i++) {
        events.push({Title : listing[i].getAttribute("name"), Date: new Date(listing[i].getAttribute("name"))});
    };

有了这个：

    var events = [ 
        { Title: "Event 1", Date: new Date("9/12/2012") }, 
        { Title: "Event 2", Date: new Date("9/25/2012") }, 
        { Title: "Event 3", Date: new Date("9/29/2012") }
    ];

在此先感谢您的帮助，在任何地方都找不到答案。

编辑*：
更改document.getElementsByClassName("listing");为$(".listing");现在在所有版本的 IE 中都能正常工作（getElementsByClassName在 IE<9 中不起作用）。FF 中仍然没有突出显示的日期。我在 FF 控制台中看到的唯一错误与不相关的 CSS 和 prettyPhoto/slideshow js 相关，不认为这些与这个问题有关..？

编辑*：
不确定我是否应该替换原始问题的内容或附加，如果我做的时间太长，请道歉......继续尝试不同的事情，仍然没有运气。除 FF 外，所有浏览器中的一切都运行良好，日历弹出正常，但没有突出显示/链接事件日期。我尝试显式填充“事件”数组，而不是迭代地推入它，这很好。似乎迭代推送部分在 FF 中不起作用。

换句话说，替换这个： 

    var events = [];
    for (var i = 0; i < listing.length; i++) {
        events.push({Title : listing[i].getAttribute("name"), Date: new Date(listing[i].getAttribute("name"))});
    }

有了这个：

    var events = [ 
        { Title: "Event 1", Date: new Date("9/20/2012") }, 
        { Title: "Event 2", Date: new Date("9/27/2012") }, 
        { Title: "Event 3", Date: new Date("10/4/2012") }
    ];

在 FF 中运行良好。有人看到上面的 for 循环有问题吗？再次感谢您的任何见解...

4

1 回答 1

0

好的，花了很多摆弄，但发现了问题。最终很愚蠢，但现在我知道了。显然，当你用破折号扔new Date()它时，FF 有问题，但它适用于斜线。所以我的主要错误（我应该在原始帖子中更具体，道歉）是在每个事件元素的名称标签中使用格式“MM-DD-YYYY”。我将每个事件元素的名称标签更改为“MM/DD/YYYY”格式，更新了链接功能以反映这一点，现在所有测试浏览器（Chrome、IE 9、IE<9、FF）似乎都运行良好）。

感谢您的所有建议，绝对帮助我找到最终解决方案。

于 2012-09-20T20:50:14.787 回答