[FIXED] PrimeNG Calendar – Date displayed incorrectly

Issue

I’m working with Angular and PrimeNG and I’m facing this problem: there is a form and a specific field is obtained with a calendar. When I pick the date, the format is incorrect, because the year is duplicated: i.e. 25/01/20222022 rather than 25/01/2022.

TS

setDate(event, formControlName) {
    this.formGroup.controls[formControlName].patchValue(event);
}

HTML

<p-calendar id="tempoAdeguamento" aria-describedby="tempoAdeguamentoHelp"
            formControlName="tempoAdeguamento" [readonly]="isReadyOnlyForm()" [showIcon]="true"
            class="esiti col-md-12 pl0 pr0" dateFormat="dd/mm/yyyy" [minDate]="minDate" [monthNavigator]="true"
            [yearNavigator]="true" [yearRange]="yearRange" (onSelect)="setDate($event,'tempoAdeguamento')">
</p-calendar>

Solution

According to PrimeNG Calendar (DateFormat section),

yy – year (four digit)

Hence you should apply the date format with ‘yy’ as below:

dateFormat="dd/mm/yy"

Sample Demo on StackBlitz

Answered By – Yong Shun

Answer Checked By – Mary Flores (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published