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
  • /// <reference path="tsfiles/jquery.d.ts" />
    /// <reference path="tsfiles/ej.web.all.d.ts" />
    
    module TimePickerComponent {
        // Use minTime and maxTime property to change the Range of the TimePicker.
        $(function () {
            var timeSample = new ej.TimePicker($("#timepick"), {
                minTime: "10:00 AM",
                maxTime: "9:00 PM"
            });
        });
    }

    Execute the above code to render the following output.