time picker disable using string returned from PHP

Question

I am using This timepicker to make the user select booking time. In order to disable the time which are already booked, i am getting a string form php which looks something like this

['10:00 AM ' , '10:10 AM'],['11:00 AM ' , '11:10 AM'],['12:20 PM ' , '12:30 PM'],['10:20 AM ' ,'10:30 AM']

But when i use this array in disable Time range, it does not work.

I'm using ajax go get values from php and disabling it on return.

Many Thanks, Hassam

$(document).ready(function(){
    $('.timepicker').click(function(){
        var ajaxurl = 'Ajax.php',
        data =  {'action': 'Hassam'};
        $.post(ajaxurl, data, function (response) {
            $('input[name="datetime"]').timepicker({
              disableTimeRanges: [ response ],
            });
     //      disableTime = response;
           alert(response);

    });

});
});

var disTime; 
disTime= "['10:00am', '10:20am'],['4:20pm', '4:40pm']";
$( document ).ready(function() {
    $('input[name="datetime"]').timepicker({
    minTime: '10:00am',
    maxTime: '04:40pm',
    step: 20, // 20 minutes
    disableTimeRanges: [disTime ],
    // showDuration: true
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><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-timepicker/1.10.0/jquery.timepicker.min.js"></script>


<input id="timepicker"
       type="text" 
       class = "timepicker"
       name="datetime"
       placeholder = "Time*"
       required/>

Answer 1

According to the timepicker's docs, disableTimeRanges requires an array of ranges to be passed to it. Instead, you are passing it a string.

Parse your response from the server and it should work.

disableTimeRanges: [JSON.parse(response)]