`object render event`

Question

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

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

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

Answer 1

这绝对是可能的。

您需要做的是将数据库中的日期加载到数组中。然后，您可以使用PickMeUp的{{3}}检查此数组，并根据数组中的日期检查每个日期。如果任何日期重合，则使用新的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;
}

在PickMeUp插件

1 个答案:

`object render event`