Forms Support

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

Template-Driven Forms

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

View Source
Edit In Stackblitz  
Change Theme:

Reactive Forms

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

    import {
    } from '@angular/forms';

        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: 'M/d/yyyy'}}</strong></p>
                    <p *ngIf="!myForm.valid">
                        Only values between 1/1/1917 and 12/31/2000 are valid!

                    Select Birthdate:
    class AppComponent {
        public min: Date = new Date(1917, 0, 1);
        public max: Date = new Date(2000, 11, 31);

        public myForm: FormGroup = new FormGroup({
            birthDate: new FormControl(new Date(2000, 10, 10))

FormField Association

The following example demonstrates the usage of the DateInput within a FormField with hint and error messages.

In this article

Not finding the help you need?