angularprimengprimeng-calendar

PrimeNG Calendar - Date displayed incorrectly

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