pカレンダーの転送日付形式を変更する

Question

私は、コンポーネント、pカレンダーがあります。

私は選択した日付を受信して​​変更する方法を見つけることができました。

<p-calendar 
       [showIcon]="true" 
       (onSelect)="onSelectMethod($event)" 
       [(ngModel)]="myDate" 
       [dataType]="date" 
       > 
</p-calendar> 

基本的に、私がカレンダーで別の日付をヒットしたとき、それは正しく日付をキャッチします。 「Thu Dec 08 2016 00:00:00 GMT-0500（東部標準時）」

この詳細情報はすべて役立ちますが、実際にはコンポーネントに受信してもらいたいと思います。 12/08/16。

私のコードで手動で文字列を変更することなく、カレンダーに付属しているいくつかの固有の方法があります。これを行う簡単な方法はありますか？私はドキュメントを読んで、私が探している情報を見つけることができませんでした。

onBlurメソッドは、必要な方法でデータを転送しているようです。残念ながら、onBlurは手動で日付を入力する場合、または日付の後ろに日付を選択する場合にのみ機能します。カレンダーのドロップダウンで選択した後は、何とかPrimeNGのonBlurメソッドを呼び出すことは素晴らしいことです。

Answer 1

I は、これがハックな解決策であるため特にお勧めできませんが、myDateの変換を表示やその他の目的に応じて行う方が良いでしょう。

コンポーネント内のmyDateには、時間と場所の情報がすべて含まれていない短い日付しか含まれていないため、実際にはこのようにしてください。

template.html

<p-calendar [ngModel]="myDate" 
      (onSelect)="onSelectMethod($event)" 
      [dataType]="date"> 
</p-calendar> 

component.ts

onSelectMethod(event) { 
    let d = new Date(Date.parse(event)); 
    this.myDate = `${d.getMonth()+1}/${d.getDate()}/${d.getFullYear()}`; 
} 

ここで機能のデモです：あなたは、パイプの適用に疑問を抱いた場合、あなたはまっすぐ[(ngModel)]="myDate"バインドを行うだろうhttp://plnkr.co/edit/IGRfXjtqIo0TEr2iDC06?p=preview

と、テンプレートに短い日付を表示したい場所を{{myDate | date: 'MM/dd/yy'}}