jquery - 在 PickMeUp 插件中突出显示日期数组

Question

我正在使用PickMeUp我的项目中的 JS 日历插件。

我遇到的问题是，我希望能够让用户选择多个日期，同时显示服务器端数据库中预先选择的日期。但是，我无法让它工作:PickMeUp 似乎没有这样的选项。

有人知道如何在日期选择器中突出显示一组给定的日期吗？

Answer 1

这绝对是可能的。

您需要做的是将数据库中的日期加载到数组中。然后，您可以使用 PickMeUp 的 object render event 检查此数组。并根据数组中的日期检查每个日期。如果任何日期重合，您将返回带有新 css 类的事件 class_name。然后，您可以使用此 css 类突出显示数据库中的日期。

例如，以下 Javascript/jQuery 说明了我的意思:

// Creating some 'sample' dates (you just load this from the database instead)
var datesFromDatabase = [];
var d = new Date();
for (i = 2; i < 7; i++) {
    var tempDay = new Date(); tempDay.setHours(0,0,0,0);
    tempDay.setDate(d.getDate()-i);
    datesFromDatabase.push(tempDay.getTime());
}

$(function () {
    $('.multiple').pickmeup({
        flat: true,
        mode: 'multiple',
        // Before rendering dates, highlight if from database
        render: function(date) {
            if ($.inArray(date.getTime(), datesFromDatabase) > -1){
                return {
                    class_name : 'highlight'
                }
            }
        }
    });
});
// Little hack to deselect current day: PickMeUp forces you to have a default date :(
$('.pmu-today').click();

使用以下CSS:

.highlight:not(.pmu-today) {
    background: #8FC490;
}
.highlight:not(.pmu-today):hover {
    background: #136a9f !important;
}

DEMO