0

我在结帐页面上使用 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));

此函数正确返回天数数组(作为整数)并阻止正确的天数。

一旦客户更改商店,我的问题就会出现。它不是重置禁用天数数组,而是简单地添加所选商店的禁用天数。因此,如果客户选择了第二家商店,日历将屏蔽第一家选择的商店和第二家选择的商店的日期。

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

4

1 回答 1

2

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

正如文档指定的那样,

这里要注意的重要一点是,将某些内容“设置”为启用或禁用会将新元素添加到要禁用的项目集合中,而不是用新集合完全替换它们。

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

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

picker.set('disable', get_disabled_days(store_id));
于 2017-10-10T11:43:00.810 回答