格式更改

Question

我有情况，必须从输入的p-calendar显示选定的值。
如何从输入中获取此值并以相同的格式显示在下面？
我将补充一点，这里使用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>

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

2 个答案:

格式更改