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.
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: 'M/d/yyyy' }}</strong></p>
<p *ngIf="!form.valid">
Only values between 1/1/1917 and 12/31/2000 are valid!
</p>
</div>
<label>
Select Birthdate:
<kendo-datepicker
name="birthDate"
[(ngModel)]="user.birthDate"
[min]="min"
[max]="max"
></kendo-datepicker>
</label>
</form>
`
})
class AppComponent implements OnInit {
public user: User;
public min: Date = new Date(1917, 0, 1);
public max: Date = new Date(2000, 11, 31);
ngOnInit() {
this.user = {
birthDate: new Date(1990, 0, 1)
};
}
}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.
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))
});
}