Date-picker popup not closed after clicking outside or selecting a date.

[Aadish]

The calendar popup is not getting closed even after selecting the date or clicking outside.

This is how I have integrated data picker in my component.

<kendo-datepicker *ngIf="formControl.allowEditing && !disabled && active" placeholder="mm/dd/yyyy"

    [formControlName] = "controlName" [min]="minDate" [max]="maxDate" [disabledDates]="disableDates" >

   

</kendo-datepicker>

 

 

[Hetali]

Hello Aadish,

Based on the information provided, the issue seems to be pertaining to the PopSettings. By default, the calendar popup is appended to the root. If the Kendo UI DatePicker is within a component, append it to the component.

Let me know if this fixes the described behavior. If you continue to face the issue, please respond with a running example. I can then investigate.

Regards,
Hetali
Progress Telerik

[Aadish]

Hi Hetali,

Thanks for the reply!!

I have tried this approach as well:

Inside datePickerWrapper.component.ts

public popupSettings: PopupSettings = {
        appendTo: "component"
    };

Inside datePickerWrapper.component.html

 <kendo-datepicker #datepicker *ngIf="formControl.allowEditing && !disabled && active" placeholder="mm/dd/yyyy"
        [formControlName]="controlName" [min]="minDate" [max]="maxDate" [disabledDates]="disableDates"
        [popupSettings]="popupSettings"
        (valueChange)="onSelectEvent($event)" (blur)="onBlurEvent($event)">
    </kendo-datepicker>

But still, the issue persists.

My application's  structure is like this:

sharedModule-> datePickerWrapperComponent-> kendo-datepicker.

module1(imports shared module)-> acoountComponent->datePickerComponent.

However, when taking out the <kendo-datepicker> from this wrapper component and using it directly on account.component.html, it works fine.

[Hetali]

Hi Aadish,

Could you please share an isolated Angular application of the described issue? I can then assist you to fix the popup issue upon further investigation.

Regards,
Hetali
Progress Telerik

[Aadish]

Hi Hitali,

It seems like the issue was happening due to the "disabledDates" property, I was passing an empty array.

on removing the [disabledDates] property, it started to work fine.

Now, what should it be initialized with if we want to have the disableDates property in our datePickerWrapper component?

The component starts behaving weirdly if we initialize it with a null, undefined, or empty array.

inside datePIckerWrapper.component.html

 <kendo-datepicker #datepicker *ngIf="formControl.allowEditing && !disabled && active" placeholder="mm/dd/yyyy"
        [formControlName]="controlName" [min]="minDate" [max]="maxDate" [disabledDates]="disableDates"
        [popupSettings]="popupSettings"
        (valueChange)="onSelectEvent($event)" (blur)="onBlurEvent($event)">
    </kendo-datepicker>

Inside datePickerWrapper.component.ts

@Input()
    disableDates: Date[] | Day[] = []

[Hetali]

Hi Aadish,

You can simply declare the disabledDates variable without assigning it to an empty array as seen below:

@Input() disableDates: Date[] | Day[];

I have created a StackBlitz demo of the same. If you continue to see the error, please respond with an updated example and I can then provide further assistance.

Regards,
Hetali
Progress Telerik