禁用PickMeUp jquery插件中的日期数组

时间:2014-11-03 14:26:24

标签: jquery date jquery-plugins datepicker calendar

如何在初始化时禁用PickMeUp中的日期数组?

我有一系列日期。我想要做的是禁用这些日期,因此用户无法选择它们。

2 个答案:

答案 0 :(得分:0)

我对(安静的)派对有点迟,但这是解决方案。

您需要做的是将日期加载到数组中。然后,您可以使用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;
}

object render event

答案 1 :(得分:0)

pickmeup('.clndr', {
        flat      : true,
        mode      : 'range',
        calendars : 1,
        format: 'Y-m-d',
        separator: ',',
        min : new Date(),
        select_month :false,
        select_year  : false,
        render: function(date) { 
        //удаляем отсюда--
        if ((today.getMonth() + 1) < 10)  { monday_mec = '0' + (today.getMonth() + 1); } 
        var date1 = today.getUTCFullYear() + '-' + monday_mec + '-' + (today.getDate() + 3) + 'T21:00:00.000Z';
        var date2 = today.getUTCFullYear() + '-' + monday_mec + '-' + (today.getDate() + 4) + 'T21:00:00.000Z';
                //--до сюда
        //вместо date1 и date2 ставим свои даты в формате 2017-09-30T21:00:00.000Z
        var disabled_days = [new Date(date1), new Date(date2)];

        for(i = 0; i < disabled_days.length; i++) 
            if (date.toString() == disabled_days[i].toString()) { 
            return {
                    disabled   : true,
                    class_name : 'disabled_dates'
                } 
            }
         }
    }).clear();

https://jsfiddle.net/peretc001/us55fztz/