Pickadate發生呈現新的禁用時間

Question

我想使2個輸入 - 一個用pickadate，其他用pickatime。當用戶選擇一個日期時，禁用時間數組被傳遞給pickatime函數。我有兩個數組從後端與PHP傳遞。我正在採取這些和使用哪些時間/日期需要被禁用。我的代碼：

 $('#myfield1').pickadate({ 
     format: 'yyyy-mm-dd', 
     //array with dates 
     disable: exclude_days_real, 
     //I want to render new pickatime every time I choose a new date 
     onSet: function() { 
      //check if there are disabled hours in a date user have chosen 
      var chosen_date = $('#myfield1').val(); 
      var disabled_time_real = []; 
      //if there are disabled hours, make them correct array from js object 
      if (time_array[chosen_date]) { 
       var disabled_time = time_array[chosen_date]; 
       for (i = 0; i < disabled_time.length; i++) { 
        var time = disabled_time[i]; 
        var time_synt = time.split(':'); 
        disabled_time_real.push(time_synt); 
       } 
      } 
      //make time input field blank 
      $('#myfield2').val(''); 
      //and here I think it should render time select every time date is set, but it works only one time 
      $('#myfield2').pickatime({ 
       format: 'H:i', 
       interval: 60, 
       min: [10, 00], 
       max: [16, 00], 
       disable: disabled_time_real 
      }); 
     } 
    }); 

我怎樣才能讓它在每次用戶選擇一個新的日期時渲染？我想過除去輸入和插入新的輸入，但我認爲它應該有更好的解決方案。

Answer 1

使用選項調用.pickatime將pickatime與輸入一次綁定到這些初始選項。根據我的經驗，用不同的選項再次調用它什麼也不做。相反，您需要使用picker API來獲取picker API的句柄。然後，您可以使用API​​方法更改已在初始化程序中設置的選項。

我修改了你的代碼來演示。我沒有測試過，但我的應用程序中有類似的代碼。

// save a reference to the pickatime object 
var time_field = $('#myfield2').pickatime({ 
    format: 'H:i', 
    interval: 60, 
    min: [10, 00], 
    max: [16, 00], 
}); 

// get and save the 'picker' API object 
var time_picker = time_field.pickatime('picker'); 

$('#myfield1').pickadate({ 
    format: 'yyyy-mm-dd', 
    //array with dates 
    disable: exclude_days_real, 
    //I want to render new pickatime every time I choose a new date 
    onSet: function() { 
     //check if there are disabled hours in a date user have chosen 
     var chosen_date = $('#myfield1').val(); 
     var disabled_time_real = []; 
     //if there are disabled hours, make them correct array from js object 
     if (time_array[chosen_date]) { 
      var disabled_time = time_array[chosen_date]; 
      for (i = 0; i < disabled_time.length; i++) { 
       var time = disabled_time[i]; 
       var time_synt = time.split(':'); 
       disabled_time_real.push(time_synt); 
      } 
     } 
     //make time input field blank 
     $('#myfield2').val(''); 

     // reset previously disabled times, if any, through the picker API 
     time_picker.set('enable', true); 

     // set the new disabled times through the picker API 
     time_picker.set('disable', disabled_time_real); 
    } 
}); 

請參閱the documentation瞭解詳細說明。文檔非常好。