p-calendar primeng 无法使用 ngmodel 和管道答案

【问题标题】：p-calendar primeng unable to use ngmodel and pipep-calendar primeng 无法使用 ngmodel 和管道
【发布时间】：2019-04-16 10:13:10
【问题描述】：

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

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

这段代码可以满足我的要求，我只是有一个问题。我设置为今天的选定日期，但它不是我希望用来显示的日期。我想在日历上显示出生日期

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

【问题讨论】：

为什么你使用 ngMode 两次你只能使用 selectedDate
我第二次使用它来将它绑定到段落。没有它就没有约束力
你能看看这个例子吗stackblitz.com/edit/angular-primeng-6-calendar
我知道如何获取在这种情况下显示的日期。我的问题是我希望显示来自我的服务器的日期而不是 selecteddate，这只是一个停止，直到我找到一个永久的解决方案。我希望在 p 日历和段落中显示用户生日作为默认日期。我不想在任何地方显示甚至使用选定的日期

标签： angular typescript angular5 primeng

【解决方案1】：

我发现的唯一情况是当你不初始化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

【讨论】：

我不希望它被选为日期。我希望我从服务器检索的日期是显示的日期。 Selecteddate 只是一个障碍，直到我找到解决 currentUserData.person.dateOfBirth 不显示的方法