New to Kendo UI for Angular? Start a free 30-day trial

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 to append the popup in the wrapper element of the DateTimePicker. It also shows how to turn off the default open animation and assign a CSS class to the popup to encapsulate the custom calendar header styles.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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'.

Example
View Source
Edit In Stackblitz  
Change Theme: