web-dev-qa-db-fra.com

Datepicker angulaire de 2 matériaux

Je souhaite utiliser Matériel angulaire Datepicker pour obtenir une date dans ma page . J'utilise ce code, mais je ne peux pas comprendre comment accéder correctement à la valeur sélectionnée.

<md-input-container>
  <input mdInput [mdDatepicker]="myDatepicker">
  <button mdSuffix [mdDatepickerToggle]="myDatepicker"></button>
</md-input-container>
<md-datepicker #myDatepicker></md-datepicker>

J'ai essayé le champ [value] en entrée mais comment puis-je obtenir la date pour l'envoyer à mon serveur? Merci.

angulardatepickerangular-material2
7
hawxs

Vous pouvez accéder à la valeur datepicker en utilisant ngModel. La ngModel doit être dans la balise input. Voir le Plunker demo .

9
Nehal

comme indiqué dans docs , il existe 2 événements (dateChange) et (dateInput) qui peuvent être utilisés si vous préférez. le $event a 3 accessoires, target est la MatDatepickerInput, targetElement pour l'élément HTML natif et value qui est l'objet Date.

<input matInput [matDatepicker]="pickerFrom" placeholder="From" 
      (dateChange)="changeFunc($event)"      <<---- you can send $event
      (dateChange)="dateInput($event.value)" <<---- or just $event.value 
>
3
bresleveloper

Comme Nehal l'a dit, vous pouvez utiliser la fonction[(ngModel)]binding; J'ai aussi oublié l'attribut "name":

  <md-form-field>
    <input mdInput [(ngModel)]="myDateValue" name="myDate"
      [mdDatepicker]="picker" placeholder="Select a date">
1
hestellez