Forms Support

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

Template-Driven Forms

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

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

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 DatePicker in a reactive form.

Copy Code    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: 'M/d/yyyy'}}</strong></p>
                    <p *ngIf="!myForm.valid">
                        Only values between 1/1/1917 and 12/31/2000 are valid!
                    </p>
                    <p>
						Errors: {{ myForm.controls.birthDate.errors | json }}
					</p>
                </div>

                <label>
                    Select Birthdate:
                    <kendo-datepicker
                        formControlName="birthDate"
                        [min]="min"
                        [max]="max"
                        required
                    ></kendo-datepicker>
                </label>
            </form>
        `
    })
    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 DatePicker within a FormField with hint and error messages.

Suggested Links

• API Reference of the DatePicker