Angulaire Matériel Datepicker: événement de Changement de pas de tir lors de la sélection de date

Je suis en utilisant Angulaire et Angulaire du Matériau Datepicker. Tout fonctionne bien pour la plupart, cependant, j'ai ajouté un (change) événement qui ne fonctionne que lorsque l'utilisateur manuellement types dans une date. Il ne fait pas déclenché lorsque l'utilisateur clique sur une date dans le datepicker popup. Pour être clair, la valeur pour date n'en fait changer lorsque l'utilisateur clique sur une date, c'est juste la (change) événement, et, finalement, mon updateCalcs() fonction qui pour une raison quelconque ne pas se déclencher. Comment puis-je déclencher un événement lorsque l'utilisateur clique sur une date dans le datepicker?

<md-input-container>
    <input mdInput [mdDatepicker]="datePicker" placeholder="Choose Date" name="date" [(ngModel)]="date" (change)="updateCalcs()" required>
    <button mdSuffix [mdDatepickerToggle]="datePicker"></button>
</md-input-container>
<md-datepicker #datePicker></md-datepicker>

OriginalL'auteur Brett | 2017-07-14

  1. 5

    Utilisation selectedChanged à l'intérieur de md-datepicker.

    <md-datepicker #datePicker (selectedChanged)="updateCalcs($event)"></md-datepicker>

    $event émettent de la nouvelle valeur que vous pouvez utiliser dans votre updateCalcs() fonction.

    updateCalcs(event){
  console.log(event);
}

    Similaire démo

    As-tu veux dire, md-datepicker au lieu de md-saisie semi-automatique? De toute façon, je l'ai eu à travailler avec votre changement.

    OriginalL'auteur Nehal

  2. 9

    Remplacer change avec ngModelChange

    Changement de

    <input mdInput 
       [mdDatepicker]="datePicker" 
       placeholder="Choose Date" 
       name="date" [(ngModel)]="date" 
       (change)="updateCalcs()" required>

    À 

    <input mdInput 
       [mdDatepicker]="datePicker" 
       placeholder="Choose Date" 
       name="date" [(ngModel)]="date" 
       (ngModelChange)="updateCalcs()" required>
    Merci, cela a fonctionné pour moi. L'on a accepté la réponse n'a pas.

    OriginalL'auteur Long Field

  3. 5
    <mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Input & change events"
         (dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

    Et .ts

    addEvent(type: string, event: MatDatepickerInputEvent<Date>) {
    //console.log(event.value)
}

    Vérifier ici

    Ce doit être la accepté de répondre (comme pour la version > 6.4.7)

    OriginalL'auteur Frank Nguyen

  4. 0

    Je dois ajouter que (dateInput) n'était pas toujours de tir pour moi, fini à l'aide de (keyup)

    code HTML

      <mat-form-field>
        <input #fromInput matInput [matDatepicker]="pickerFrom" placeholder="סנן תאריך התחלה" 
          (dateChange)="filterFrom($event)" (keyup)="filterInputKeyupFrom()">
        <mat-datepicker-toggle matSuffix [for]="pickerFrom"></mat-datepicker-toggle>
        <mat-datepicker #pickerFrom></mat-datepicker>
    </mat-form-field>

    code final TS

     private parseInputDate(v):Date{
      //this was a manual change in the input and needs to be parsed
      let a:Array<any> = v.split('.')
      a.forEach((v, i) => a[i] = parseInt(v) + (i == 1 ? -1 : 0))
      console.log(new Date(a[2], a[1], a[0]))
      return  new Date(a[2], a[1], a[0])
  }

  //(dateInput) wasn't always firing for me, ended up using (keyup)
  filterInputKeyupFrom(){
    this.lastFrom = this.parseInputDate(this.fromInput.nativeElement.value)
    if (this.lastFrom) {
      this.lastFrom.setSeconds(-1)
    }
    this.filterDates()
  }

  filterInputKeyupUpTo(){
    this.lastTo = this.parseInputDate(this.toInput.nativeElement.value)
    if (this.lastTo) {
      this.lastTo.setDate(this.lastTo.getDate()+1)
    }
    this.filterDates()
  }

  filterFrom(e:MatDatepickerInputEvent<Date>){
    console.log('filterFrom')
    //changing manually the input and then exit from it fires here
    if(e.value){
      //need to clone the date or changes are applied on the Picker
      this.lastFrom = new Date(e.value)
      if (this.lastFrom) {
        this.lastFrom.setSeconds(-1)
      }
      this.filterDates()
    }
  }

  filterUpTo(e:MatDatepickerInputEvent<Date>){
    console.log('filterUpTo')
    if(e.value){
      this.lastTo = new Date(e.value)
      if (this.lastTo) {
        this.lastTo.setDate(this.lastTo.getDate()+1)
      }
      this.filterDates()
    }
  }

    OriginalL'auteur bresleveloper

  5. 0

    Il y a un dateChange événement qui a soulevé à la fois lorsque la date est édité dans la zone de texte et quand la date est modifiée via le calendrier de contrôle.
    Voir ici

    <mat-form-field>
  <input matInput [matDatepicker]="datepicker" required placeholder="Choose a date" (dateChange)="valueChanged()">
  <mat-datepicker-toggle matSuffix [for]="datepicker"></mat-datepicker-toggle>
  <mat-datepicker #datepicker></mat-datepicker>
</mat-form-field>

    OriginalL'auteur Stuart Hallows