All Components

Forms Support

You can use the TimePicker in Template-driven and Reactive forms.

Template-Driven Forms

The template-driven forms enable you to bind the TimePicker to the model by using the ngModel directive.

The following example demonstrates how to use the TimePicker in template-driven forms.

export interface User {
       birthDate: Date;
   }

   @Component({
       selector: 'my-app',
       template: `
           <form #form="ngForm">
               <div class="example-config">
                   <p>The selected birth date is <strong>{{ user.birthDate | kendoDate: 't' }}</strong></p>
                   <p *ngIf="!form.valid">
                       Only values between 02:00 AM and 10:00 PM are valid!
                   </p>
               </div>
               <label>
                   Select Birthdate:
                   <kendo-timepicker
                       name="birthDate"
                       [(ngModel)]="user.birthDate"
                       [min]="min"
                       [max]="max"
                   ></kendo-timepicker>
               </label>
           </form>
       `
   })
   class AppComponent implements OnInit {
       public user: User;
       public min: Date = new Date(2000, 11, 31, 2);
       public max: Date = new Date(2000, 11, 31, 22);
       ngOnInit() {
           this.user = {
               birthDate: new Date(2000, 11, 31, 4)
           };
       }
   }

Reactive Forms

The FormGroup decorator provides a way to render reactive forms. For more details, refer to the Angular documentation.

The following example demonstrates how to use the TimePicker in a reactive form.

import {
       FormsModule,
       ReactiveFormsModule,
       FormGroup,
       FormControl
   } from '@angular/forms';

   @Component({
       selector: 'my-app',
       template: `
           <form [formGroup]="myForm">
               <div class="example-config">
                   <p>The form is valid: <strong>{{myForm.controls.birthDate.valid}}</strong></p>
                   <p>The form.birthDate value is: <strong>{{myForm.controls.birthDate.value | kendoDate: 't'}}</strong></p>
                   <p *ngIf="!myForm.valid">
                       Only values between 02:00 AM and 10:00 PM are valid!
                   </p>
                   <p>
                        Errors: {{ myForm.controls.birthDate.errors | json }}
                    </p>
               </div>

               <label>
                   Select Birthdate:
                   <kendo-timepicker
                       formControlName="birthDate"
                       [min]="min"
                       [max]="max"
                       required
                   ></kendo-timepicker>
               </label>
           </form>
       `
   })
   class AppComponent {
       public min: Date = new Date(2000, 11, 31, 2);
       public max: Date = new Date(2000, 11, 31, 22);

       public myForm: FormGroup = new FormGroup({
           birthDate: new FormControl(new Date(2000, 11, 31, 10))
       });
   }
In this article