7

初始化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()没有任何影响。

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

4

4 回答 4

7

我不能放过这个，所以我已经对它进行了广泛的测试。归根结底，它按应有的方式工作。没有必要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 天可以使用，然后所有内容都被禁用。

于 2015-05-01T18:28:41.747 回答
3

从成功/错误处理程序中进行更改，并尝试在禁用之前启用所有日期：

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);
        }
    });
}
于 2015-05-01T09:02:03.590 回答
0

¿ 你确定你的 ajax 请求被调用了吗？

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

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

于 2015-06-22T15:22:35.097 回答
0

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

timePicker.set('enable', true)
timePicker.set('disable', disabledDays)
于 2021-05-22T11:11:50.963 回答