p日历primeng无法使用ngmodel和管道

时间:2018-11-13 14:36:45

标签: angular typescript angular5 primeng

我正在尝试使用ng-prime和ngmodel中的p-calendar绑定服务器中的日期

 <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>

这段代码可以满足我的要求,我只遇到一个问题。我已将选定的日期设置为今天,但不是我希望用于显示的日期。我想在p日历上显示出生日期

当我从日历中选择一个日期时,它将绑定到该段落 通常我只会用管道,但没有用

1 个答案:

答案 0 :(得分:0)

我发现的唯一情况是当您没有selectedDate时,尝试将selectedDate设置为currentUserData.person.dateOfBirth

在我的示例中,我只是设置为当前日期

模板

<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>

组件

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

demo