2017-08-22 38 views
1

入力pカレンダーから選択した値を表示する必要がある場合があります。
この値を入力から取得し、その下に同じ形式で表示するにはどうすればよいですか?
私は日付の配列が単一の値ではないので、ここでangular2の日付パイプを使用することは不可能だと付け加えます。primeNGの<p-calendar>から入力値を取得するにはどうすればよいですか?

マイコード:あなたは私が知っている何か他のものを探しているなら、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> 

答えて

2

は、単に形式

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

の変化のためにそこ

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

値をバインドします。

+0

この場合、日付の形式が間違っています。私は入力のような同じ形式が必要です。 – Italik

+0

更新されたメソッドを確認してください。 –

関連する問題