p-calendar primeng unable to use ngmodel and pipe

user_9773926 0
Viewed 2969

I am trying to use p-calendar from ng-prime with ngmodel to bind a date from the server

 <p-calendar [(ngModel)]="selectedDate"
             [locale]="es"
             [hidden]="!editing"
             dateFormat="d/mm/yy"
             appendTo="body"
             class="pos-cal mar-left-txt"
             [(ngModel)]="currentUserData.person.dateOfBirth">
 </p-calendar>

 <p [hidden]="editing">
     {{currentUserData.person.dateOfBirth | date: 'dd/MM/yyyy'}}
 </p>

this code does what i want i just have one problem. selected date i have set as today but its not what i wish to use to display. i want to display the date of birth on p-calendar

when i select a date from the calendar it binds to the paragraph usually i would just use a pipe but it hasnt worked

angular5 primeng angular typescript
1 Answers

The only case I have found is when you don't inilized selectedDate,try to set selectedDate to currentUserData.person.dateOfBirth

in my example Ijust set to current date

template 

<p-calendar [(ngModel)]="selectedDate"
             [hidden]="!editing"
             dateFormat="d/mm/yy"
             appendTo="body" (onBlur)="editing = !editing"  >
 </p-calendar>

 <p [hidden]="editing" (click)="editing = !editing">
     {{selectedDate | date: 'dd/MM/yyyy'}}
 </p>

component

  selectedDate;
  editing = false
  constructor() {
    this.selectedDate = new Date();
  }

demo

user_39806210
Related