Range

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.