Components / Date Inputs / DateTimePicker

Getting Started with Kendo UI for Angular DateTimePicker

The DateTimePicker enables the user to select date and time values.

The component combines the Kendo UI DateInput, Calendar, and TimePicker.

Basic Usage

The following example demonstrates the DateTimePicker in action.

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            Selected value is: {{value | date:format}}
        </div>
        <div class="example-wrapper">
            <p>Select date and time:</p>
            <kendo-datetimepicker
                [format]="format"
                [(value)]="value"
            >
            </kendo-datetimepicker>
            <p>(use Alt + ↓ to open the calendar, Alt + ← and Alt + →  to change the tabs)</p>
        </div>
    `
})

class AppComponent {
    public value: Date = new Date(2019, 5, 1, 22);
    public format: string = 'MM/dd/yyyy HH:mm';
}

Functionality and Features

Methods and Events

The following example demonstrates the basic valueChange, focus, blur, open, and close events of the DateTimePicker.

import { Component } from '@angular/core';
import { IntlService } from '@progress/kendo-angular-intl';
import { PreventableEvent } from '@progress/kendo-angular-dateinputs';

@Component({
    selector: 'my-app',
    template: `
    <div class="container-fluid">
        <div>
            <div class="col-12 example-config">
                <div>
                    <input type="checkbox" class="k-checkbox" id="prevent-open" [(ngModel)]="preventOpen">
                    <label class="k-checkbox-label" for="prevent-open">Prevent open</label>
                </div>
                <div>
                    <input type="checkbox" class="k-checkbox" id="prevent-close" [(ngModel)]="preventClose">
                    <label class="k-checkbox-label" for="prevent-close">Prevent close</label>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <kendo-datetimepicker
                    (focus)="log('focus')"
                    (blur)="log('blur')"
                    (open)="handlePreventableEvent($event, 'open', preventOpen)"
                    (close)="handlePreventableEvent($event, 'close', preventClose)"
                    (valueChange)="log('valueChange', $event)"
                >
                </kendo-datetimepicker>
                <event-log
                    title="Event log"
                    [events]="events"
                >
                </event-log>
            </div>
        </div>
    </div>
  `
})
export class AppComponent {
    public events: string[] = [];

    public preventOpen: boolean;
    public preventClose: boolean;

    constructor(private intl: IntlService) { }

    public handlePreventableEvent(event: PreventableEvent, eventName: string, preventDefault: boolean): void {
        if (preventDefault) {
            event.preventDefault();
        }

        this.log(eventName);
    }

    public log(event: string, value?: Date): void {
        const formattedDateValue = value ? ` - ${this.intl.formatDate(value, 'g')}` : '';
        this.events = [`${event}${formattedDateValue}`, ...this.events];
    }
}

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { DateInputsModule } from '@progress/kendo-angular-dateinputs';

import { AppComponent } from './app.component';
import { EventLogComponent } from './event-log.component';

@NgModule({
    bootstrap: [AppComponent],
    declarations: [AppComponent, EventLogComponent],
    imports: [BrowserModule, BrowserAnimationsModule, DateInputsModule, FormsModule]
})

export class AppModule { }

import { Component, Input } from '@angular/core';

@Component({
    selector: 'event-log',
    template: `
        <div class="example-config">
            <h5>{{ title }}</h5>
            <ul class="event-log">
                <li *ngFor="let event of events">{{ event }}</li>
            </ul>
        </div>
    `
})
export class EventLogComponent {
    @Input() public title: string;
    @Input() public events: string[];
}

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

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

The DateTimePicker exposes a set of methods for programmatic component control.

To open or close the DateTimePicker, you can use the toggle method. toggle does not trigger the open and close events of the component.

import { Component, ViewChild } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <div class="example-wrapper">
            <kendo-datetimepicker
                #datetimepicker
            >
            </kendo-datetimepicker>
            <button class="k-button" (click)="handleToggle(true)">Open</button>
            <button class="k-button" (click)="handleToggle(false)">Close</button>
        </div>
    `
})
class AppComponent {
    @ViewChild('datetimepicker') public dateTimePicker: DateTimePickerComponent;

    public ngAfterViewInit(): void {
        // Prevents the popup from closing when blurred, on selecting a value, on cancel, and so on.
        // With the default prevention of the close trigger, you can use only the `toggle` method to close the component.
        this.dateTimePicker.close.subscribe(event => event.preventDefault());
    }

    public handleToggle(shouldOpen: boolean): void {
        this.dateTimePicker.toggle(shouldOpen);
        this.dateTimePicker.focus();
    }
}

In this article