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

Question

我尝试在初始化 Date Picker 后禁用一些日期.

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

$( 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
    });
}

请注意，在我的例子中，disableDays 包含整数(引用工作日)和文档中的日期(http://amsul.ca/pickadate.js/date/#disable-dates)。

当第一次触发 disableDates() 函数时，它会正确地禁用我使用 AJAX 检索的日期。第二次触发时，选择器似乎不再更新。我想必须以某种方式再次呈现选择器以反射(reflect)更改。我尝试了 .stop() 和 .start() 和 .render()，但没有任何效果。

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

Answer 1

我不能放过它，所以我对其进行了广泛的测试。归根结底，它会像它应该的那样工作。无需停止、开始或呈现。问题一定出在您的 json 数据或一般数据(日期、整数)上。

我创建了 two examples in jsfiddle ，证明它确实适用于您似乎期望的数据类型。

我建议您将 data.days、d.Day.id 和最后的 disabledDays 记录到控制台以检查它们实际包含的内容.如果不出意外，我希望您可以引用我的 fiddle 示例。

关于代码的注释。第一次初始化选择器时，您可以将其分配给一个变量:

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 天可以使用。