DEMO

Question

我正在使用名为PickMeUp的jQuery datepicker插件。

我有datepicker工作，但无法弄清楚如何禁用日期。我的计划是在datepicker日历上禁用一系列日期。

我确实设法使用以前版本的插件（http://www.eyecon.ro/datepicker/）禁用了一个日期，但我无法弄清楚如何添加日期数组。

的jQuery

    $(document).ready(function(){   
        var now2 = new Date();
        now2.addDays(-1);
        now2.setHours(0,0,0,0);
        $('input#cdate').pickmeup({
        position  : 'right',                                        
            mode      : 'range',                        
            render: function(date) {
                return {
                    disabled: date.valueOf() == now2.valueOf()                          
                }
            }                           
        }); 
    });

更新

以下是工作代码。（很多，非常感谢Niloct）

    $(document).ready(function(){   
        var arDates = [new Date("2014-02-14").valueOf(),new Date("2014-02-11").valueOf(),new Date("2014-02-09").valueOf()];
        $('input#cdate').pickmeup({
        position  : 'right',                                        
            mode      : 'range',                        
            render: function(date) {
                return {
                    disabled: arDates.indexOf(date.valueOf()) != -1                         
                }
            }                           
        }); 
    });

Answer 1

好的，只需写下来：

valueOf()是Date对象的一种方法，它获取日期中的毫秒数（自1970年1月1日起）。

indexOf()是Array对象的一种方法，用于检查元素是否是数组的成员。

所以你的第一个代码是现货，你也得到了调整：

var arDates = [new Date("2014-02-14").valueOf(),new Date("2014-02-11").valueOf(),new Date("2014-02-09").valueOf()];

disabled: arDates.indexOf(date.valueOf()) != -1

可能面临的问题是时区问题。例如：new Date("2014-02-17")对我来说不会在2月17日创建日期。由于我的时区，它可以退回3个小时。

Answer 2

你已经清楚地解决了这个问题但是，为了将来的参考，这里有一个小问题的扩展，其中一个新类也被添加到日期数组中。这是因为PickMeUp的禁用日期的默认颜色方案是黑色;这让人很难看到它们。此外，我还包括一些黑客来取消选择当前日期。这是因为，默认情况下，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;
}

jQuery PickMeUp datepicker：禁用日期数组

的jQuery

更新

2 个答案:

DEMO