在 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 检索的日期。第二次触发时，选择器似乎不再更新。我想必须以某种方式再次呈现选择器以反映更改。我试过.stop()和.start()和.render()，没有任何效果。

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

Answer 1

在 success/error 处理程序中进行更改并尝试在禁用之前启用所有日期：

function disableDates() {

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

    $.ajax({  
        url: 'partners/getInactiveDays',
        dataType: 'json',
        async: false,
        success: function(data) {
            $.each(data.days, function(i, d) {
                disabledDays.push(parseInt(d.Day.id));
            });

            picker.set('enable', true);
            picker.set('disable', disabledDays);
        },
        error: function() {
            picker.set('disable', true);
        }
    });
}

Answer 2

我不能放过它，所以我对它进行了广泛的测试。归根结底，它会像它应该的那样工作。没有必要 stop、start 或 render 它。问题一定出在您的 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 天可以使用。

Answer 3

¿您确定您的 ajax 请求正在调用吗？

一些旧的、烦人的、已弃用的、功能不全的浏览器（是的，IE，我说的是你）会在缓存中存储 ajax 请求，并在每个 return 中存储第一个结果后续请求。由于您没有将您的请求标记为 POST，因此 partners/getInactiveDays 可能真的只被调用了一次。

将 method: 'POST' 添加到您的请求中，或将随机字符串（甚至 POST 请求有时存储在 IE8 中）附加到您的 url 作为未使用的参数（例如 url:'partnets/getInactiveDays?randomizer='+new Date().getTime()) 以防止缓存存储，如果它们没有被执行。

Answer 4

我知道现在回答为时已晚，但只是分享一下我是如何解决它的。我只是在禁用前将 enable 设置为 true 。像这样：

timePicker.set('enable', true)
timePicker.set('disable', disabledDays)

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

Disable dates in pickadate-picker and refresh it

javascript

jquery

pickadate