jquery timepicker and ajax

Question

I'm trying to pass time values ​​to timepicker. I take time from the database using ajax. when i pass the values ​​from the database to the parameter disableTimeRanges ,

$(function() {
        $("#id_time_visit").timepicker({
             timeFormat: 'H:i',
             minTime: '8', 
             maxTime: '19',
             step: 60,
             disableTimeRanges: []
        });
    });
    $('.pole').change('input', function() {
     var datetime = $(this).val();//I get the value from the form field
       $.ajax({
       url: '/your-url/',
       type: 'get', 
       data: {'datetime': datetime},
        success: function(e){
             console.log(e)
             var time=e;
             $("#id_time_visit").timepicker({
                 timeFormat: 'H:i',
                 minTime: '8', 
                 maxTime: '19',
                 step: 60,
                 disableTimeRanges: time
             });
        },
        error: function(e){
             console.log(e);
        }
    })

time becomes unavailable, but when I select another day, which has a different time, then the time for that day becomes inaccessible only if I reload the page. How to make time update when changing days without rebooting

Answer 1

To update a timepicker in this case, we update only the specific targeted option. The array in this code is meant to simulate your Ajax call.

 let disRange = [ [ "11.00 am", "16.00 am" ] ]; $(function() { $("#id_time_visit").timepicker({ timeFormat: 'H:i', minTime: '8', maxTime: '19', step: 60, disableTimeRanges: [] }); $('#id_time_visit').timepicker('option', 'disableTimeRanges', disRange); });

 <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.js"></script> <input id="id_time_visit" type="text">

PS:If it's not working, please share your other part of code where you using events on (calendar) Days inputs...