2017-10-10 75 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));