How to get input value from in primeNG?

Question

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>

Pardeep Jain · Accepted Answer · 2017-08-22T12:18:24.957

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.

edited Aug 22 '17 at 12:18

answered Aug 22 '17 at 11:54

Pardeep Jain

84,110
37
165
215

But in this case the format of date is wrong. I need the same format like in input. – Italik Aug 22 '17 at 12:00
check the Updated Method. – Pardeep Jain Aug 22 '17 at 12:02

score 0 · Answer 2 · answered Aug 18 '18 at 07:46

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>

How to get input value from in primeNG?

2 Answers2

For changes in format

Linked