Pickadate onset рендеринг новых отключенных времен

Question

Я пытаюсь сделать 2 входа - один с pickadate, другой с pickatime. Когда пользователь выбирает дату, массив отключенных времен передается функции pickatime. У меня есть два массива, которые передаются из backend с 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, чтобы получить дескриптор 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. Документы превосходны.