如何从 primeNG 中的 <p-calendar> 获取输入值？

Question

我遇到的情况是，必须显示输入 p 日历中的选定值。
如何从输入中获取此值并以相同的格式显示在下方？
我要补充一点，这里不可能使用 angular2 日期管道，因为我有日期数组而不是单个值。

我的代码：https://plnkr.co/edit/md3rRokf7FynTD5fz2gz?p=preview

<h3>Angular 4.2.6, PrimeNG 4.1.3, Calendar example</h3>
<div class="box-body">
    <div class="row">
        <div class="col-md-12">
            <p-calendar maxDateCount="2" placeholder="Choose days" [(ngModel)]="dates" selectionMode="multiple" readonlyInput="true"></p-calendar>
        </div>
        <div class="col-md-12">
            <p-calendar placeholder="Choose range of date" [(ngModel)]="rangeDates" selectionMode="range" readonlyInput="true"></p-calendar>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            Your days:
        </div>
        <div class="col-md-12">
            Your range of date:
        </div>
    </div>
</div>

Answer 1

只需绑定那里的值

<div class="col-md-12">
   Your days: {{dates}}
 </div>
 <div class="col-md-12">
   Your range of date: {{rangeDates}}
 </div>

格式变更

<div class="col-md-12">
   Your days: <span *ngFor='let date of dates'>{{date | date}}</span>
 </div>
 <div class="col-md-12">
   Your range of date: <span *ngFor='let rangeDate of rangeDates'>{{rangeDate | date}}</span>
 </div>

如果您正在寻找其他东西，请告诉我。

Answer 2

要从输入中获取值，您可以按照以下步骤操作，

在代码段中声明引用变量“#myCalender”和“(click)”事件，
在 .ts 文件中定义 "test()" 函数

  test(event, mc){
    console.log(mc.inputFieldValue)
  }

<p-calendar #myCalender (click)="test($event, myCalender)" [(ngModel)]="value"  showButtonBar="true" showTime="showTime" hourFormat="24" [utc]="true"></p-calendar>

如何从 primeNG 中的 <p-calendar> 获取输入值？

How to get input value from <p-calendar> in primeNG?

javascript

angular

primeng

格式变更