CODEWITHSUNDEEP
javascriptjqueryhtml
Hassam Munir
Hassam Munir

Reputation: 17

JQuery timepicker time slots are not disabling

I am trying to disable a time slot in my jQuery timepicker, however it idoesn't get disabled. My HTML is:

$( document ).ready(function() {
    $('input[name="datetime"]').timepicker({
        minTime: '10:00am',
        maxTime: '04:40pm',
        interval: '20', // 15 minutes
        disableTimeRanges: [
            ['10:00am', '10:20am'],
            ['4:20pm', '5:00pm']
        ],
        // 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/timepicker/1.3.5/jquery.timepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.js"></script>

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

I have done some research, and tried different things but couldn't get it working. Does anyone know how to fix this?

Upvotes: 1

Views: 2390

Answers (1)

James
James

Reputation: 22246

There are two libraries, Timepicker for jQuery and jQuery Timepicker, I wonder if you're using one and reading the documentation for the other.

Here I switched to the Timepicker for jQuery library and your code seems to work, although "interval" becomes "step" and takes an integer (minutes).

I don't see support for "disableTimeRanges" in jQuery Timepicker

$( document ).ready(function() {
    $('input[name="datetime"]').timepicker({
    minTime: '10:00am',
    maxTime: '04:40pm',
    step: 20, // 15 minutes
    disableTimeRanges: [
        ['10:00am', '10:20am'],
        ['4:20pm', '5:00pm']
    ],
    // 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/>

Upvotes: 2

Related Questions