如何從中獲取輸入值 <p-calendar> 在primeNG？

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

要從Input獲取值，您可以按照以下步驟操作，

• 在代碼段中聲明引用變量“ #myCalender”和“（點擊）”事件，如以下代碼段所示，
• 在.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>