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

Question

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

我目前只有以下代码：

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

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

Answer 1

您需要做的是将日期加载到数组中。然后，您可以使用 PickMeUp 的 object render event 检查此数组，并根据数组中的日期检查每个日期。如果任何日期重合，您只需 return 对象 disabled: true 并且用户将无法 select 这些日期。

此外，我还 return class 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 日期选择器 - 禁用日期数组

PickMeUp date picker - disable array of dates

jquery

datepicker

DEMO