Prevent DateTimePicker from autoclose

Question

I have a kendo component kendo-datetimepicker (angular project, kendo-angular)

When I open the calendar, start typing the date (day, month, year) and time (hours, minutes) in the input, right at the end when I select minutes - the calendar closes automatically.

The issue could be checked here: https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/date-time-limits/

Any way to prevent the calendar from closing?

And close, only when I click on cancel or set button?

Answer 1

I think you can call the toggle method on the blur event to keep it open. Stackblitz example here. setTimeout is needed so that the method is call is put on the stack and does not run immediately.

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

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

@Component({
    selector: 'my-app',
    template: `
        <div class="container-fluid">
            <div class="row">
                <p class="col-md-6">
                    <kendo-datetimepicker #datePickerChild
                        (blur)="onBlur()"
                    >
                    </kendo-datetimepicker>
                </p>
            </div>
        </div>
    `,
})

export class AppComponent {
    @ViewChild('datePickerChild', { static: false })
    public datePickerChild!: DateTimePickerComponent;
    constructor() {
        setTimeout(() => {
            this.datePickerChild.toggle();
        });
    }

    public onBlur(): void {
        setTimeout(() => {
            this.datePickerChild.toggle();
        });
    }
}