Range

8 Feb 20181 minute to read

TimePicker widget provide options to set the Range (minTime & maxTime) for the time.

Steps to change minTime & maxTime of the TimePicker

The following steps explains you to change the Range of the TimePicker.

In the HTML page, add a <input> element to configure TimePicker widget.

HTML

<input type="text" id="time" />

JAVASCRIPT

// Use minTime and maxTime property to change the Range of the TimePicker.
    $(function () {
        $('#time').ejTimePicker({
            minTime: "10:00 AM",
            maxTime: "9:00 PM"
        });
    });

Execute the above code to render the following output.

DisableTime Ranges

Specifies the list of time range to be disabled. you can set it by usingdisableTimeRanges property.

JAVASCRIPT

$(function () {
        // Set the disableTimeRanges value during initialization.

        $("#timepicker").ejDatePicker({ disableTimeRanges: [{ startTime: "3:00 AM", endTime: "6:00 AM" }]});
            
        });
    });

Execute the above code to render the following output.