2017-10-10 121 views
0

我在结帐页面上使用Pickadate.js库以供客户选择订购产品的收集日期。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; 

    } 

一旦存储被选择的I拨打:

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

此函数正确返回天的阵列(如整数),并阻挡了右天。

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

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

回答

1

如果我正确理解这一点,则需要重置datepicker中的日期,以便在选择新的商店时仅禁用与该商店有关的日期。

由于the docs指定,

这里要注意的重要一点是启用的“设置”的东西或禁用增加了新的元素项的集合禁用,而不是用新的完全替换它们采集。

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

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

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