Forms Support

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

Template-Driven Forms

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

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

@Component({
    selector: 'my-app',
    template: `
        <form>
            <div class="example-config">
                <strong>Value: {{checkIn | json}}</strong> |
                <strong>Valid: {{model.valid}}</strong> |
                <strong>Touched: {{model.touched}}</strong> |
                <strong>Pristine: {{model.pristine}}</strong> |
                <strong>Errors: {{model.errors | json}}</strong>
            </div>
            <label>
                <div>
                    Select check-in date and time:
                </div>
                <kendo-datetimepicker
                    #model="ngModel"
                    required
                    name="check-in"
                    [min]="min"
                    [(ngModel)]="checkIn"
                >
                </kendo-datetimepicker>
            </label>
            <button type="button" class="k-button" (click)="model.reset()">Reset</button>
        </form>
    `
})
class AppComponent implements OnInit {
    public checkIn: Date = null;
    public min: Date;

    public ngOnInit(): void {
        const currentDay = new Date();
        const nextDayNoon = new Date(currentDay.getFullYear(), currentDay.getMonth(), currentDay.getDate() + 1, 12);

        this.min = nextDayNoon;
    }
}

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

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

   @Component({
       selector: 'my-app',
       template: `
           <form [formGroup]="form">
               <div class="example-config">
                   <strong>Value: {{form?.controls.checkIn.value | json}}</strong> |
                   <strong>Valid: {{form?.controls.checkIn.valid}}</strong> |
                   <strong>Touched: {{form?.controls.checkIn.touched}}</strong> |
                   <strong>Pristine: {{form?.controls.checkIn.pristine}}</strong> |
                   <strong>Errors: {{form?.controls.checkIn.errors | json}}</strong>
               </div>
               <label>
                   <div>
                       Select check-in date and time:
                   </div>
                   <kendo-datetimepicker
                       required
                       formControlName="checkIn"
                       [min]="min"
                   >
                   </kendo-datetimepicker>
               </label>
               <button type="button" class="k-button" (click)="form.reset()">Reset</button>
           </form>
       `
   })
   class AppComponent {
       public min: Date;

       public form: FormGroup = new FormGroup({
           checkIn: new FormControl(null)
       });

       public ngOnInit(): void {
           const currentDay = new Date();
           const nextDayNoon = new Date(currentDay.getFullYear(), currentDay.getMonth(), currentDay.getDate() + 1, 12);

           this.min = nextDayNoon;
       }
   }

FormField Association

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

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { getDate, addMonths } from '@progress/kendo-date-math';

@Component({
    selector: 'my-app',
    template: `
        <div class="example">
            <form class="k-form" [formGroup]="form">
                <kendo-formfield>
                    <kendo-label [for]="appointment" text="Appointment Date"></kendo-label>
                    <kendo-datetimepicker
                        #appointment
                        [formControlName]="'appointment'"
                        [min]="min"
                        [max]="max"
                        [format]="format"
                    >
                    </kendo-datetimepicker>
                    <kendo-formhint>Select a time slot in the next three months</kendo-formhint>
                    <kendo-formerror>
                        <span *ngIf="!appointment.value">Required</span>
                        <span *ngIf="appointment.value && (appointment.value < min || appointment.value > max)">
                            The selected time slot is outside the allowed period
                        </span>
                    </kendo-formerror>
                </kendo-formfield>
            </form>
        </div>
    `,
    styles: [`
        .example {
            display: flex;
            justify-content: center;
        }
        .k-form {
            width: 400px;
        }
    `]
})
export class AppComponent {
    public form: FormGroup = new FormGroup({
        appointment: new FormControl(null, Validators.required)
    });

    public min: Date = getDate(new Date());
    public max: Date = addMonths(getDate(new Date()), 3);

    public format = 'MM/dd/yyyy HH:mm';
}
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { LabelModule } from '@progress/kendo-angular-label';

import { AppComponent } from './app.component';

@NgModule({
    bootstrap: [AppComponent],
    declarations: [AppComponent],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        DateInputsModule,
        ReactiveFormsModule,
        InputsModule,
        LabelModule
    ]
})
export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article