在pickadate-picker中禁用日期并刷新它

Question

我在初始化日期选择器后尝试禁用某些日期.

我正在初始化这样的选择器:

$( document ).ready(function() {
    $('#inputDatetime').pickadate({
        format: 'dd. mmmm yyyy',
        formatSubmit: 'yyyy-mm-dd',
        min: dt,
        selectYears: 2,
        selectMonths: true
    });
});

用户现在执行一些触发onChange()事件的操作.该disableDates()函数准备了更多日期以禁用并使用以下set方法将其设置为选择器:

function disableDates() {

    var disabledDays = [];

    $.ajax({  
        url: 'partners/getInactiveDays',
        dataType: 'json',
        async: false,
        success: function(data) {

            $.each(data.days, function(i, d) {
                disabledDays.push(parseInt(d.Day.id));
            });
        }
    });

    var $input = $('#inputDatetime').pickadate();
    var picker = $input.pickadate('picker');

    picker.set({
        disable: disabledDays
    });
}

请注意,根据文档(http://amsul.ca/pickadate.js/date/#disable-dates),在我的情况下,disableDays包含整数(平日的工作日)和日期.

当disableDates()第一次触发该函数时,它会正确地禁用我使用AJAX检索的日期.一旦第二次触发,选择器似乎不再更新.我想必须以某种方式再次渲染选择器来反映变化.我试过了 .stop()和.start()和.render(),没有任何效果.

如何禁用日期并正确刷新选择器？

Answer 1

我不能放过这个,所以我对它进行了相当广泛的测试.在一天结束时,它的工作方式应该如此.没有必要stop,start或者render它.问题必须与您的json数据或一般数据(日期,整数)有关.

我在jsfiddle中创建了两个示例,证明它确实适用于您似乎期望的数据类型.

我建议你将data.days,d.Day.id和最后的disabledDays记录到控制台以检查它们实际包含的内容.如果没有别的,我希望你可以把我的小提琴例子作为参考.

关于代码的说明.第一次初始化选择器时,可以将其分配给变量:

var myvar = $('#inputDatetime').pickadate({
    format: 'dd. mmmm yyyy',
    formatSubmit: 'yyyy-mm-dd',
    min: dt,
    selectYears: 2,
    selectMonths: true
});

然后,当您需要获取此实例时,您只需执行以下操作:

var picker = myvar.pickadate('picker');
picker.set('disable', [1,7]); //disables all saturdays & sundays

换句话说,无需重新初始化它.

还有,最后一点.设置禁用日期不会清除以前设置的日期.您只是不断添加到禁用日期的集合中,当您使用日期时,只有1-7才能在禁用所有内容之前使用.