CODEWITHSUNDEEP
angularkendo-uikendo-ui-angular2kendo-datetimepicker
Dmytro Mysak
Dmytro Mysak

Reputation: 1252

Prevent DateTimePicker from autoclose

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?

Upvotes: 0

Views: 806

Answers (1)

xinthose
xinthose

Reputation: 3820

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();
        });
    }
}

Upvotes: 0

Related Questions