jQuery PickMeUp日期选择器：禁用日期数组

Question

我正在使用一个名为PickMeUp的jQuery日期选择器插件。

我已经让日期选择器正常工作，但是无法禁用其中的日期。我的计划是创建一个日期数组，在日期选择器日历中将这些日期禁用。

我曾尝试使用插件先前版本的文档（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                         
                }
            }                           
        }); 
    }); 

- ss888

---

假设您有一个日期数组arDates，每个日期都有.valueOf()而不是对象，如果您在最后一行说disabled: arDates.indexOf(date.valueOf()) != -1，会发生什么？ - Niloct

好的...我应该如何编写数组？像这样吗？var arDates = ["2014-02-14","2014-02-11","2014-02-10"]; - ss888

不要使用日期字符串，而是设置例如 new Date("2014-02-14").valueOf()。你的日历也有时间吗？先试试这个。 - Niloct

哈哈，看起来可以了！！！非常感谢你：))) - ss888

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个小时。

- Niloct

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;
}

DEMO

的英文内容为：

DEMO

。

- Jean-Paul