Calendar: Updating the dateFormat does not reflect the changes on input without opening the datepicker

[mehmet-erim]

Describe the bug

Despite making updates to the dateFormat using either the setTranslation method or by directly modifying the dateFormat input value, the date format on the input does not get refreshed. However, when I change the date value or close the date picker by clicking on the input, it then updates the displayed date format.

Environment

Stackblitz, PrimeNG issue reporting template
https://stackblitz.com/edit/zzrr7l

Reproducer

https://stackblitz.com/edit/zzrr7l

Angular version

16.2.0

PrimeNG version

16.7.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.18.0

Browser(s)

Chrome, Arc

Steps to reproduce the behavior

1. Visit the stackblitz example that I've created: https://stackblitz.com/edit/zzrr7l
2. Select a different date format from the HTML select element and then click the 'Change date format' button.

You will see the date formats on the p-calendar inputs do not get updated instantly.
If you click on an input, and close the datepicker popup, you'll see the date format on input will update properly.

Expected behavior

Date format on the p-calendar input should be updated instantly once we changed the date format.

[DaniCima]

there isn't a solution yet?

[mehmet-erim]

@DaniCima I implemented a temporary workaround while awaiting a fix from the PrimeNG team.

I have created a directive:

@Directive({ selector: '[appPrimengCalendarLocaleFix]', standalone: true })
export class PrimengCalendarLocaleFixDirective
  implements OnInit
{
  private _pCalendar = inject(Calendar, { host: true, self: true });
  private _dateTimeService = inject(DateTimeService);
  private _destroyRef = inject(DestroyRef);

  public ngOnInit(): void {
    this._dateTimeService.dateFnsLocale$
      .pipe(delay(50), takeUntilDestroyed(this._destroyRef))
      .subscribe(() => {
        this._pCalendar.updateInputfield();
        this._pCalendar.cd.detectChanges();
      });
  }
}

It can be used as below:

  <p-calendar
    appPrimengCalendarLocaleFix
    appendTo="body"
    [showIcon]="true"
    formControlName="fromDate"
  >
  </p-calendar>

Please note that I can listen the language changes using DateTimeService in my codebase. You should update the directive accordingly.

[mertsincan]

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,