Modification du format de date Transfert de p-Calendar

Question

J'ai un composant, p-Calendar.

Je n'ai eu aucune difficulté à trouver un moyen de recevoir la date que j'ai sélectionnée et de la modifier. Par conséquent, lorsque je clique sur une date différente dans le calendrier, la date est correctement saisie. Il va transférer cette information: "Thu Dec 08 2016 00:00:00 GMT-0500 (heure normale de l'Est)"

Bien que je puisse voir que tous ces détails sont utiles, je veux juste que mon composant reçoive: 12/08/16.

Existe-t-il un moyen simple de faire cela, peut-être une méthode inhérente qui vient avec le calendrier, sans faire manuellement des modifications de chaîne dans mon code? J'ai lu la documentation et je n'ai pas trouvé l'information que je cherchais.

La méthode onBlur semble transférer les données comme je le souhaite. Malheureusement, onBlur ne fonctionne que lorsque vous tapez la date manuellement, ou lorsque vous avez une sélection de date derrière. Ce serait génial d'appeler en quelque sorte la méthode onBlur de PrimeNG après avoir fait une sélection dans le menu déroulant du calendrier.

Answer 1

Je recommande pas particulièrement qu'il en est une solution hacky, il est sans doute préférable de faire des transformations du myDate selon le cas pour l'affichage ou autres.

Si vous voulez vraiment, vraiment faire cela pour que le myDate dans votre composant ne contienne qu'une courte date sans toutes ces informations de temps et d'emplacement, vous pouvez aller de l'avant et séparer les liaisons du modèle pour qu'elles fonctionnent comme suit:

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()}`; 
} 

Voici une démonstration de fonctionnement: En cas http://plnkr.co/edit/IGRfXjtqIo0TEr2iDC06?p=preview

vous interrogez sur l'application d'un tuyau, vous feriez une liaison [(ngModel)]="myDate" droite et où vous voulez voir la date courte dans le modèle ne {{myDate | date: 'MM/dd/yy'}}