Dynamically changed disabledTime in Jquery timepicker

Question

I would like to change disabledTime in Jquery Timepicker. When user select a date in datepicker the disabled time value in timepicker have to be changed. But it isn`t working fine.

HTML code

<label>Date:</label>
<input type="text" id="datepicker"/>
<label>Time: </label>
<input type="text" id="timepicker"/>

JS code

$(document).ready(function () {
        $("#datepicker").datepicker({
            dateFormat: "dd-mm-yy",
            minDate: 0,
            onSelect: function(dateText) {
                var disabledTime = [['13:00', '18:00'], ['19:00', '20:00']];
                $('#timepicker').datepicker('option', 'disableTimeRanges', disabledTime);
            }
        });
        var disabledTime = [['15:00', '16:00']];
        $('#timepicker').timepicker({
            'minTime': '10:00',
            'maxTime': '22:00',
            'showDuration': true,
            'timeFormat': 'H:i',
            'show2400': true,
            'step': 60,
            'disableTimeRanges' : disabledTime
        });
    });

For the first time, when the document is ready, disabling time works fine, but then it doest not.

Answer 1

Really, my mistake. I was using another function to range timepicker and didn`t see that now i am using "datepicker". Thanks @leo_ap and @ndreivictor for help.