【问题标题】:Disable array of dates in PickMeUp jquery plugin在 PickMeUp jquery 插件中禁用日期数组
【发布时间】:2014-12-30 05:22:52
【问题描述】:

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

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

【问题讨论】:

    标签: jquery date jquery-plugins datepicker calendar


    【解决方案1】:

    我参加(安静的)派对有点晚了,但这是解决方案。

    您需要做的是将日期加载到数组中。然后,您可以使用PickMeUp 的object render event 检查此数组,并根据数组中的日期检查每个日期。如果任何日期重合,您只需返回对象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;
    }
    

    DEMO

    【讨论】:

    • 几天后我找到了解决方案,不得不深入研究代码。不过还是谢谢你的回答!对不起,我的英语很差,我不是母语人士。
    • @Nice 很高兴听到这个消息。无需道歉:我也不是本地人。作为记录,您可能希望接受我的回答,以便将来遇到此问题的人可以更轻松地看到解决方案:)
    【解决方案2】:
    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/

    【讨论】:

    • 请解释你的答案。 好的答案将始终解释所做的事情以及为什么以这种方式完成,不仅适用于 OP,而且适用于 SO 的未来访问者。
    猜你喜欢
    • 1970-01-01
    • 2015-09-24
    • 1970-01-01
    • 2018-05-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-03-27
    相关资源
    最近更新 更多