Question

我在结帐页面上使用Pickadate.js库，客户可以选择订购产品的收集日期。

在后端，客户端可以阻止某些天，以便客户端无法选择这一天。例如。周日，因为商店周日休息。

我正在初始化这个库：

/* Initiate the Datepicker */
        var $dateInput = $('#collection-date').pickadate({
            firstDay: 2,
            onSet: function(e) {
                if(e.select) {
                    $('#select-time').slideDown();
                    var timeInput = $('#collection-time').pickatime();
                } else {
                    $('#select-time').slideUp();
                }
            },
        });
        var picker = $dateInput.pickadate('picker');

在结帐页面上，客户可以选择具有不同收集时间的2个商店，因此日历需要能够选择正在选择的商店，并根据该商店显示可用的收集日期。

我像这样设置了残疾人日：

function get_disabled_days(store_id) {

        var days_array = [];
        days_array = $('#store-' + store_id).find('.disabled-days').attr('data-disabled-dates').split(',').map(function(item) {
            return parseInt(item, 10);
        });

        //console.log(days_array);

        return days_array;

    }

选择商店后，我致电：

picker.set('disable', get_disabled_days(store_id));

此函数正确返回天数数组（以整数形式）并在正确的日期之前阻止。

一旦客户更换商店，我的问题就出现了。它不是重置禁用的天数组，而是简单地添加所选商店的禁用日期。因此，如果客户选择第二个商店，则日历将阻止第一个选定商店和第二个选定商店的日期。

我试图停止（）库并重新初始化它并不起作用，但我无法弄清楚如何清除禁用的日期数组并在客户选择新商店后重新设置它。

Answer 1

如果我理解正确，您需要重置日期选择器中的日期，以便在选择新商店时，它仅禁用与该商店相关的日期。

由the docs指定，

这里要注意的一件重要事情是，将某些内容设置为启用或禁用会将新元素添加到项目集合中以禁用，而不是将其全部替换为新集合。

那么你可以在运行禁用呼叫之前启用所有日期吗？

// Enable all the dates
picker.set('enable', true)
picker.set('disable', false)

picker.set('disable', get_disabled_days(store_id));

Pickadate.js动态更改已禁用的日期

1 个答案: