I have situation, when have to show selected value from input p-calendar.
How to get this value from inputs and show underneath in the same format?
I will add that it is impossible here to use angular2 date pipe, because I have array of dates not a single value.

My code:

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

I have situation, when have to show selected value from input p-calendar.
How to get this value from inputs and show underneath in the same format?
I will add that it is impossible here to use angular2 date pipe, because I have array of dates not a single value.

My code: 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>

• javascript
• angular
• primeng

2 Answers 2

Simply Bind the values there

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

For changes in format

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

if you are looking for something else let me know.

To get the value from Input you can follow below steps,

• Declare reference variable "#myCalender" and "(click)" event in tag as below snippet,
• Define "test()" function in .ts file

  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>