Popup Options

The DateTimePicker accepts several configuration options to customize the popup and its content.

Customizing the Popup

The popupSettings allows the user to specify the desired container where the popup will be appended, to disable the popup animation and to append user-defined css classes to the popup element.

The following example demonstrates how appending the popup in the wrapper element of the DateTimePicker component works. It also shows how to turn of the default open animation and how to assign a css class to the popup, in order to encapsulate the custom calendar header styles.

import { Component, ViewEncapsulation } from '@angular/core';
import { PopupSettings } from '@progress/kendo-angular-dateinputs';

@Component({
    selector: 'my-app',
    template: `
        <div class="container">
            <kendo-datetimepicker
                [popupSettings]="popupSettings"
            >
            </kendo-datetimepicker>
        </div>
    `,
    encapsulation: ViewEncapsulation.None,
    styles: [`
        .container {
            min-height: 490px;
        }

        .crimson .k-calendar-header,
        .crimson .k-calendar-header .k-today {
            background: crimson;
            color: white;
        }
    `]
})
class AppComponent {
    public popupSettings: PopupSettings = {
        appendTo: 'component',
        animate: false,
        popupClass: 'crimson'
    };
}

Toggling the Cancel Button

By default, the DateTimePicker renders a Cancel button in the popup. To toggle the button, set the cancelButton property to false.

@Component({
    selector: 'my-app',
    template: `
       <kendo-datetimepicker
            [cancelButton]="false"
        >
        </kendo-datetimepicker>
    `
})
class AppComponent { }

Setting the Default Tab

When the popup of the DateTimePicker opens, the Date tab is displayed by default. To display the Time tab on open, set the defaultTab value to 'time'.

@Component({
    selector: 'my-app',
    template: `
       <kendo-datetimepicker
            [defaultTab]="'time'"
        >
        </kendo-datetimepicker>
    `
})
class AppComponent { }

In this article