Primeng: Date in p-calendar doesn't update when date format changes

[Prontsevich]

I'm submitting a ...

[x ] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)

http://plnkr.co/edit/U1mypT4F5N91l0vgKCl0

Current behavior
Date in p-calendar doesn't update when date format changes.

Expected behavior
Date in input field updates when date format changes.

What is the motivation / use case for changing the behavior?
My app has several locations and date format depends on the selected locale. I want that date in the input field changes according to the selected locale.

• PrimeNG version: 1.1.1
  

• Browser: all
  

[Prontsevich]

Have the same problem in PrimeNG 4 :(

[cagataycivici]

What is the use case to change the dateformat dynamically? We don't check for it since I think it is not very common.

[Prontsevich]

We have several languages in our app and user can switch between them. And we use local date format for each language

[pierfreeman]

Actually, it would be useful if we want to add some custom text (computed programmatically) to the dateFormat.

[iariasfallas]

Hi. @Prontsevich
I had that problem.
I solve apply ngDoCheck and reassign the date.

public ngDoCheck(){ this.formatDate = "Here new format"; this.startDate = new Date(this.startDate); }

[vangras]

The issue still persists in v.7
Tried both adding the format in locale and using dateformat property but the date displayed in the field doesn't update when locale/format changes. It only updates after selecting a new date.

[mariaro]

I am facing the same issue in the current version from npm ([email protected]).

It seems the issue could be resolved internally by changing [dateFormat] input to call this.updateInputfield whenever the input is set with a new format, in order to trigger the reformatting of the displayed value.

Maybe the maintainers @cagataycivici @yigitfindikli could confirm if this is ok?

From this (present version below): https://github.com/primefaces/primeng/blob/262a4181fb0882e108aa90c738c6abe9ceb08752/src/app/components/calendar/calendar.ts#L241

to that:

    _dateFormat: string = 'mm/dd/yy';

    @Input() get dateFormat(): string {
      return this._dateFormat;
    }

    set dateFormat(dateFormat: string) {
        this._dateFormat = dateFormat;
        this.updateInputfield();
    }

The same behaviour is already done for [showTime] input setter: (present version below) https://github.com/primefaces/primeng/blob/262a4181fb0882e108aa90c738c6abe9ceb08752/src/app/components/calendar/calendar.ts#L522-L533

Last, but not least, thank you a lot for a very good library :)

[VILLAN3LL3]

This issue is still present in version 11.3.0 - are there plans to fix it? This behavior is not very nice in localised apps.

[quartelh]

This issue is still present in version 11.3.0 - are there plans to fix it? This behavior is not very nice in localised apps.

I have the same issue. When switching language in our app all goes well (using the [locale]) but there is no normal way (either via the [locale] or [dateFormat] to enforce rerendering the selected date(time).