Clicking on the date first time does not pick the date value in Calendar control

[avallab88]

Hi,

I am working on a Angular 4 application and I am using PrimeNg calendar control to display the dates. The following is the code that I am using in the page:

<p-calendar id="date" showIcon="true" (onSelect)="onDateSelected($event)" (onBlur)="onDateChanged($event)"
[(ngModel)]="selectedDate" >
</p-calendar>

I am using onBlur to detect the values changed through keyboard. So when I have both these events in place the $event.target.value is returning " " the very first time when the value is selected. So we have to click twice on the date for the value to be displayed in the control. Please follow the steps below to reproduce the issue:

1) Use the code above in .html file.
2) In the typescript file please use the following code:

public onDateChanged(event: any) {
if (!this.isValidDateTime(event.target.value)) { // function to check for valid date time
this.selectedDate = "";
} else {
if (event.target.value != "") {
this.selectedDate = this.moment(event.target.value).format('MM/DD/YYYY HH:mm');
} else {
this.selectedDate = "";
}
}

}


public onDateSelected(value: any) {
this.selectedDate = this.moment(value).format('MM/DD/YYYY HH:mm');
}

3) Initially when the form loads the control has no value. Now try to pick a value and this value is not displayed in the control. We need to click on the value for the second time and then the value is dislpayed.
4) This happens only for the first time and works fine for next selections.

Could you please let me know how this issue could be resolved.

Thanks and Regards,
Avinash Vallabhaneni

[tomerstern]

The last couple of days I was facing the same issue using an Angular 9 application, and just found a workaround which works well for me.
Basically the problem is that while clicking on the datepicker, the onBlur event triggers and conflicts with the onSelect event.
This problem only happens when I try to change the ngModel value from the onInputBlur() function.
If I remove the this.ngModelDPcalendar = date; line, the issue does not occur. However, this line in necessary for what I'm trying to accomplish.
So what I did is I created a valiable which holds the last input date. If that date equals the current input date, exit the method before executing the line this.ngModelDPcalendar = date;.

Here is a simplified exhibition of my solution:


lastInputDate: Date;

onSelectedDate(selectedDate: Date) {
this.lastInputDate = selectedDate;
}

onInputBlur(event: Event) {
let input = (<HTMLInputElement>event.target).value;
let date = new Date();
// validate input and convert to date object
date = validateInput(input);

if (this.lastInputDate !== undefined && this.lastInputDate.getDate() === date.getDate()) {
return;
}

this.lastInputDate = date;
// set the formatted date in the control
this.ngModelDPcalendar = date;
}