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
  • <div align="center">
        <input type="text" ej-timepicker [(ngModel)]="value" minTime="10:00 AM" maxTime="9:00 PM"/>
  • html
  • import { Component } from '@angular/core';
      selector: 'ej-app',
      templateUrl: './default.component.html'
    export class DefaultComponent {

    Execute the above code to render the following output.