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

Question

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

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

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

Answer 1

这绝对是可能的。

您需要做的是将数据库中的日期加载到数组中。然后，您可以使用PickMeUp 的object render event 检查此数组，并根据数组中的日期检查每个日期。如果任何日期重合，则返回事件class_name 并带有新的css 类。然后，您可以使用这个 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