All Components

Forms Support

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

The component accepts Date values and updates the model each time a selection is changed.

Template-Driven Forms

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

The following example demonstrates how to accomplish a two-way binding by using the ngModel directive.

@Component({
  selector: 'my-app',
  styles: ['.k-invalid { color: red; padding: 5px 0; }'],
  template: `
    <div class="example-config">
        Form value: {{ form.value | json }}
    </div>

    <form #form="ngForm">
      <kendo-multiviewcalendar name="date" [(ngModel)]="model.date" #date="ngModel" required></kendo-multiviewcalendar>
      <div [hidden]="date.valid" class="k-invalid">Date required. Please select one.</div>
    </form>
  `
})
class AppComponent {
    public model: any = { date: undefined };
}

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

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

@Component({
  selector: 'my-app',
  styles: ['.k-invalid { color: red; padding: 5px 0; }'],
  template: `
    <div class="example-config">
        Form value: {{ form.value | json }}
    </div>

    <form [formGroup]="form">
      <kendo-multiviewcalendar formControlName="date" required></kendo-multiviewcalendar>
      <div [hidden]="isDateValid()" class="k-invalid">Date required. Please select one.</div>
    </form>
  `
})
class AppComponent {
    public form: FormGroup;

    constructor() {
        this.form = new FormGroup({
            date: new FormControl(null, Validators.required)
        });
    }

    public isDateValid(): boolean {
        return this.form.controls.date.valid;
    }
}
In this article