更改日期格式的p日曆轉移

我毫不費力就找到了一種接收我選定的日期，並對其進行修改。

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

因此，基本上，當我在日曆中點擊不同的日期時，它確實能夠正確記錄日期。它會傳送下列信息：「Thu Dec 08 2016 00:00:00 GMT-0500（Eastern Standard Time）」

儘管我可以看到所有這些細節都很實用，但我真的只想讓我的組件接收： 012/12/08/16。

有沒有什麼簡單的方法來做到這一點，也許是自帶的日曆，而無需手動做在我的代碼串修改一些固有的方法？我閱讀了文檔並找不到我要查找的信息。

使用onBlur方法似乎在我想它的方式來傳送數據。不幸的是，只有當您手動輸入日期，或者您在後面選擇了一個日期選擇時，Blur纔有效。在日曆下拉列表中進行選擇後，以某種方式調用PrimeNG的onBlur方法會很棒。

來源

2016-12-13 J.Doe

你有沒有嘗試設置'dateFormat'？ – jonrsharpe

@jonrsharpe他顯然意味着在（onSelect）方法中它將接收ISO標準日期作爲事件值。 http://plnkr.co/edit/IGRfXjtqIo0TEr2iDC06?p=preview是如何得到這一概念也許他指的是他指明MyDate變量。 – silentsod

如果您在其他地方使用myDate變量進行顯示，那麼您可以使用日期管道。它綁定到一個'Date'，所以可以預期它會像'Date'對象那樣工作。 – silentsod

我不會特別推薦這個，因爲這是一個hacky解決方案，它可能更好地適合於顯示或其他目的的轉換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()}`; 
}

這裏有一個功能演示：http://plnkr.co/edit/IGRfXjtqIo0TEr2iDC06?p=preview

如果你想知道有關應用的管道，你會做直[(ngModel)]="myDate"綁定，並在你想看到在模板中的短日期都{{myDate | date: 'MM/dd/yy'}}

來源

2016-12-13 23:44:26 silentsod

你好，這似乎工作。非常好，謝謝！！ –

更改日期格式的p日曆轉移

回答

相關問題