Question

所以我花了一天时间开发和阅读（反过来）以使我的jQuery日期选择器能够选择并突出显示多个日期。

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

我无法管理的是永久修改日期选择器中所选日期的外观。

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

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

选择日期，我要么将其添加到日期数组中，要么将其从日期数组中删除。另外，onSelect，我匹配选定的日期并尝试addClass（）。

但是我再一次认为我错过了一些东西，因为它没有出现在我的日期选择器中。

这是我现在的代码：

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

（我仍然是Javascript / jQuery的初学者，所以欢迎任何有关我编码的帮助或提示，顺便说一句......）

Answer 1

这取决于您是否要坚持使用jQuery UI。如果您对其他库开放，则有一个支持多项选择的jQuery Datepicker：jquery.datePicker with multiple select enabled。它可能会让你无法摆弄jQuery UI，因为它本身不支持多种选择。

编辑：

如果您的主库不是jQuery，我认为您应该寻找独立或原型相关的库。 JS Calendar看起来很有希望。它本身支持通过检测Ctrl键进行多项选择。

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

1 个答案: