Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Calendar: Property [defaultDate] makes the calendar unresponsive in reactive forms #15388

Closed
ThoSap opened this issue Apr 28, 2024 · 3 comments
Closed
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible

Comments

@ThoSap
Copy link
Contributor

ThoSap commented Apr 28, 2024

Describe the bug

When the PrimeNG Calendar is used with Angular reactive forms, setting the input binding [defaultDate] makes the Calendar unresponsive and the user can no longer select a date, month, or year.

Environment

StackBlitz - PrimeNG CalendarReactiveFormsDemo [defaultDate] broken

Reproducer

https://stackblitz.com/edit/ukbf3f?file=src%2Fapp%2Fdemo%2Fcalendar-reactive-forms-demo.html,src%2Fapp%2Fdemo%2Fcalendar-reactive-forms-demo.ts

Angular version

17.3.6 and 17.3.1 (from StackBlitz)

PrimeNG version

17.15.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

v20.11.1

Browser(s)

Chrome 123.0.6312.124

Steps to reproduce the behavior

StackBlitz - PrimeNG CalendarReactiveFormsDemo [defaultDate] broken

Expected behavior

The PrimeNG Calendar should work with Angular reactive forms when the input binding [defaultDate] is set.

@ThoSap ThoSap added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Apr 28, 2024
@ThoSap
Copy link
Contributor Author

ThoSap commented Apr 28, 2024

My current workaround is the following, remove the input binding [defaultDate] from the template and set the internal _defaultDate in the AfterViewInit lifecycle.
See StackBlitz - PrimeNG CalendarReactiveFormsDemo [defaultDate] workaround

  @ViewChild('myCalendar')
  private myCalendar!: Calendar;

  ngAfterViewInit(): void {
    // Workaround for the buggy <p-calendar [defaultDate]="getMaxDate()"> property binding in reactive forms
    this.myCalendar._defaultDate = this.getMaxDate();
  }
<form [formGroup]="formGroup">
  <p-calendar #myCalendar formControlName="date"/>
</form>

@ThoSap
Copy link
Contributor Author

ThoSap commented Aug 18, 2024

@cetincakiroglu this is still an issue with PrimeNG v17.18.9

@mertsincan
Copy link
Member

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation and try the latest PrimeNG version(v19). If there is no improvement on this, can you open a new issue so we can include it in our roadmap?

Thanks a lot for your understanding!
Best Regards,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible
Projects
None yet
Development

No branches or pull requests

2 participants