Jquery ui jQuery Datepicker，选择多个日期，并在选择时通过css永久标记它们

所以我花了一天的时间开发和阅读（另一种方式），以使我的jQuery日期选择器能够选择并突出显示多个日期

为此，我设法将所选日期写入一个数组，该数组在一个简单的文本字段中可视化

我无法管理的是在datepicker中永久修改所选日期的外观

我已经实现了“beforeShowDay:”选项，它在加载日期选择器时工作正常，但在选择日期时当然不会直接调用它。 为此，我猜测，我需要刷新视图“onSelect”，但刷新工作不正常。 现在，我有一些处理datearray的小方法

在添加或删除日期时，我正在尝试刷新日期选择器

选择日期后，我会将其添加到日期数组中，或将其从日期数组中删除。 此外，在选择时，我将匹配所选日期并尝试添加class（）

但再一次，我想我错过了一些东西，因为它没有显示在我的日期选择器

以下是我目前的代码：

var dates = new Array();

function addDate(date) {
    if (jQuery.inArray(date, dates) < 0 && date) {
        dates.push(date);
    }
}

function removeDate(index) {
    dates.splice(index, 1);
}

// Adds a date if we don't have it yet, else remove it and update the dates
// textfield
function addOrRemoveDate(date) {
    var index = jQuery.inArray(date, dates);
    if (index >= 0) {
        removeDate(index);
        updateDatesField(dates);
    } else {
        addDate(date);
        updateDatesField(dates);
    }
    jQuery(calContainer).datepicker("refresh");
}


    var calContainer = document.getElementById("calendar-container");

    jQuery(calContainer).datepicker({
        minDate : new Date(),
        dateFormat : "@",
        onSelect : function(dateText, inst) {
            addOrRemoveDate(dateText);

            jQuery(".ui-datepicker-calendar tbody tr td a").each(function() {
                if (jQuery(this).text() == inst.selectedDay) {
                    jQuery(this).addClass("ui-state-highlight");
                    jQuery(this).parent().addClass("selected");
                }
            });
            // addTimeSelectorColumns(dates);
        },
        beforeShowDay : function(_date) {
            var gotDate = -1;
            for ( var index = 0; index < dates.length; index++) {
                if (_date.getTime() == dates[index]) {
                    gotDate = 1;
                } else {
                    gotDate = -1;
                }
            }

            if (gotDate >= 0) {
                return [ true, "ui-datepicker-today", "Event Name" ];
            }
            return [ true, "" ];
        }
    });
function updateDatesField(dates) {

    if (dates.length > 0) {
        var tmpDatesStrArr = new Array();
        var dateString = "";
        var datesField = document.getElementById("dates");

        for ( var index = 0; index < dates.length; index++) {
            var dateNum = dates[index];

            var tmpDate = new Date();
            tmpDate.setTime(dateNum);

            dateString = tmpDate.getDate() + "." + tmpDate.getMonth() + "."
                    + tmpDate.getFullYear();
            tmpDatesStrArr.push(dateString);
        }

        jQuery(datesField).val(tmpDatesStrArr);
    }
}

var dates=new Array（）；
函数addDate（日期）{
if（jQuery.inArray（date，dates）<0&&date）{
日期。推送（日期）；
}
}
函数移除（索引）{
日期.拼接（索引，1）；
}
//如果我们还没有日期，则添加日期，否则将其删除并更新日期
//文本字段
函数添加或删除日期（日期）{
var index=jQuery.inArray（日期，日期）；
如果（索引>=0）{
移除（索引）；
更新的测试字段（日期）；
}否则{
addDate（日期）；
更新的测试字段（日期）；
}
jQuery（calContainer）.datepicker（“刷新”）；
}
var calContainer=document.getElementById（“日历容器”）；
jQuery（calContainer）.datepicker({
minDate:新日期（），
日期格式：“@”，
onSelect：函数（日期文本，inst）{
添加或删除日期（日期文本）；
jQuery（“.ui日期选择器日历tbody tr td a”）。每个（函数（）{
if（jQuery（this）.text（）==inst.selectedDay）{
jQuery（this.addClass（“ui状态突出显示”）；
jQuery（this.parent（）.addClass（“选定”）；
}
});
//addTimeSelectorColumns（日期）；
},
beforeShowDay:函数（\u日期）{
var gotDate=-1；
对于（var索引=0；索引=0）{
返回[true，“ui datepicker today”，“事件名称”]；
}
返回[真，“]；
}
});
函数updateDatesField（日期）{
如果（dates.length>0）{
var tmpDatesStrArr=新数组（）；
var dateString=“”；
var datesField=document.getElementById（“日期”）；
对于（var索引=0；索引

---

（我仍然是Javascript/jQuery的初学者，因此欢迎对我的编码提供任何帮助或提示，顺便说一句。）

这取决于您是否想坚持使用jQuery UI。如果您对其他库开放，则有一个支持多项选择的jQuery Datepicker:。它可能会为您节省一些麻烦，因为它本身不支持多个选择

编辑：

---

如果您的主库不是jQuery，我认为您应该寻找一个独立的或依赖于原型的库。这个计划看起来很有希望。通过检测Ctrl键，它本机支持多项选择。

好吧，约束条件是：1.）原型和scriptaculous也包含在项目中。2.）日期选择器被内联放置。但是我会试试的，谢谢！