`object render event`

Question

我正在使用PickMeUp日期选择器来选择多个日期。我希望能够传递一组日期，禁用这些日期并以不同的颜色显示它们。

我目前只有以下代码：

$('.multiple').pickmeup('clear');
$('.multiple').pickmeup({
    flat: true,
    mode: 'multiple'
});

如果有人知道如何做到这一点，我将非常感激。

Answer 1

您需要做的是将日期加载到数组中。然后，您可以使用PickMeUp的{{3}}检查此数组，并根据数组中的日期检查每个日期。如果任何日期重合，您只需返回对象disabled: true，用户将无法选择日期。

此外，我还返回班级disabled以改善禁用日期的CSS颜色。这是因为PickMeUp的禁用日期的默认颜色方案是黑色;这让人很难看到它们。

以下 Javascript / jQuery 可实现您的目标：

// Creating some 'sample' dates 
var datesArray = [];
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);
    datesArray.push(tempDay.getTime());
}

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

使用以下 CSS ：

.disabled {
    color: #5C5C8A !important;
    background: #000033;
}

PickMeUp日期选择器 - 禁用日期数组

1 个答案:

`object render event`