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

Question

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

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

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

Answer 1

这绝对有可能。

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

例如下面的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;
}

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

Highlight an array of dates in PickMeUp plugin

jquery

jquery-plugins

datepicker

highlight

DEMO