javascript - Pickadate.js 动态更改禁用日期

标签 javascript jquery pickadate

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

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

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

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

最佳答案

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

the docs指定,

An important thing to note here is that “setting” something as enabled or disabled adds the new elements to the collection of items to disable rather than completely replacing them with the new collection.

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

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

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

关于javascript - Pickadate.js 动态更改禁用日期,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46664105/

相关文章:

javascript - 通过 AJAX 更新 Pickadate 输入

javascript - Not implemented Javascript 错误在 IE7 中绑定(bind)函数时

javascript - 在忽略双击的同时处理 Google Maps JS API v3 中的点击事件

javascript - 在浏览器中加载和显示 DOM 之前修改正文 HTML 内容

jquery - Jquery中的asp标签文本更改事件

jQuery 使用通配符 * 改变所有子元素的颜色

javascript - 使用一个搜索字段在多个表中搜索/过滤行

javascript - 捕捉 Tab 键导航

jquery - 如何强制 npm 使用 jquery 2.1.1

javascript - 启用 DatePicker 的特定日期