在pickadate-picker中禁用日期并刷新它 [英] Disable dates in pickadate-picker and refresh it

问题描述

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

I try to disable some dates after I have initialised the Date Picker.

我正在这样初始化选择器：

I am initialising the picker like this:

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

用户现在执行一些操作，触发 onChange（）事件。 disableDates（）函数准备更多日期以禁用，并使用 set 方法将其设置为选择器：

The user now performs some action that triggers an onChange() event. The disableDates() function prepares some more dates to disable and sets it to the picker using the set method:

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/#禁用日期）。

Please note that in my case disableDays contains integers (reffering to weekdays) and dates according to the documentation (http://amsul.ca/pickadate.js/date/#disable-dates).

首次触发 disableDates（）函数时，它正确地禁用了我用AJAX检索的日期。一旦第二次触发，选择器似乎不再更新。我想必须以某种方式再次渲染选择器来反映变化。我试过。 stop（）和 .start（）和 .render（），没有任何影响。

When the disableDates() function is triggered for the first time, it correctly disables the dates that I retrieved with AJAX. As soon as it is triggered a second time, the picker does not seem to be updated anymore. I guess the picker has to be rendered again somehow to reflect the changes. I tried to .stop() and .start() and .render(), without any effect.

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

How can I disable dates and refresh the picker correctly?

推荐答案

我不能放过这个，所以我对它进行了相当广泛的测试。在一天结束时，它的工作方式应该如此。无需停止，开始或渲染它。问题必须与您的json数据或一般数据（日期，整数）有关。

I couldn't let this go, so I've tested it quite extensively. In the end of the day, it works like it should. There is no need to stop, start or render it. The issue must be with your json-data, or the data in general (dates, ints).

我创建了 jsfiddle中的两个例子，证明它确实适用于你似乎期待的数据类型。

I created two examples in jsfiddle, demonstrating that it does indeed work with the type of data you seem to be expecting.

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

I would advise you to log data.days, d.Day.id and finally disabledDays to console to check what they actually contain. If nothing else I hope you can have my fiddle examples as reference.

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

A note about the code though. The first time you initialize the picker you can assign it to a variable:

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

然后，当您需要获取此实例时，您只需：

And then, when you need to get this instance, you just do:

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

换句话说无需重新初始化。

No need to reinitialize it in other words.

另外，最后一个注释。设置已禁用日期不会清除以前设置的日期。您只是继续添加到禁用日期的集合中，当您使用日期时，您只需要1-7就可以在禁用所有内容之前使用。

Also, a last note. Setting disabled dates doesn't clear previously set dates. You just keep adding to the collection of disabled dates, and when you use days you only have 1-7 to work with before everything is disabled.

这篇关于在pickadate-picker中禁用日期并刷新它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！