0
votes

Matériau angulaire DatepickerRange obtenir une valeur lors du changement

J'ai DatePickerRange of Angular Material et je veux exécuter une fonction lors de la modification de la valeur dans DatePicker J'ai essayé avec la fonction (changement) mais cela n'a pas fonctionné, je serais heureux de votre aide pour le faire. Merci!

Ceci est mon html:

   @Output() newItemEvent = new EventEmitter<bookedDate>();
      addNewDate() {
        this.dateRange.dateStart = this.range.get('start').value;
        this.dateRange.dateEnd = this.range.get('end').value;
        this.newItemEvent.emit(this.dateRange);
      }

Et c'est la fonction que je souhaite activer:

<mat-form-field class="form-field">
    <mat-label>Enter a date range</mat-label>
    <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
        <input matStartDate formControlName="start" placeholder="Start date">
        <input matEndDate formControlName="end" placeholder="End date">
    </mat-date-range-input>
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-date-range-picker #picker></mat-date-range-picker>

    <mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">Invalid start date
    </mat-error>
    <mat-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">Invalid end date

    </mat-error>
    </mat-form-field>

angular angular-material

0 commentaires

4 Réponses :

1
votes

Essayez plutôt dateChange

<mat-date-range-input [formGroup]="range" [rangePicker]="picker" (dateChange)="addNewDate()">
    <input matStartDate formControlName="start" placeholder="Start date">
    <input matEndDate formControlName="end" placeholder="End date">
</mat-date-range-input>

5 commentaires

Comme le dit la documentation, "L'événement (dateInput) se déclenchera chaque fois que la valeur change en raison de la saisie par l'utilisateur ou de la sélection d'une date dans le calendrier. L'événement (dateChange) se déclenchera chaque fois que l'utilisateur aura fini de taper l'entrée (sur <input> flou) , ou lorsque l'utilisateur choisit une date dans le calendrier. " Ou essayez (dateChange)="addNewDate($event)"

Pouvez-vous créer un exemple de stackblitz avec un code minimal?

Cela ne fonctionnera pas pour le moment car mat-date-range-input n'a pas d'événements de sortie

Comme indiqué dans la documentation, mat-date-range-input a un événement de sortie @Output() dateChange: EventEmitter<MatDatepickerInputEvent<D, S>> . Vous pouvez vous référer ici material.angular.io/components/datepicker/api

@Kirubel non, ce n'est pas le cas. les entrées à l'intérieur ont.

1
votes

J'ai quelque chose de similaire à votre problème, cela fonctionne pour moi, alors j'espère que cela pourra vous aider ou vous donner un indice sur une solution, voici mon html:

     saveDate(event: any) {
    // look at how the date is emitted from save
    console.log(event.target.value.begin);
    //this.session.dateDebut = event.target.value.begin;
    console.log(event.target.value.end);

    // change in view
     this.dateRangeDisp = event.target.value;


    // save date range as string value for sending to db

    // ... save to db
  }

et la fonction est:

<mat-form-field class="dialogform">
  <mat-label>Duree du Session : </mat-label>
    <input matInput
       required
       placeholder=""
       [satDatepicker]="picker"
       [value]="dateRangeDisp"
       (dateChange)="saveDate($event)"
    >
  <sat-datepicker #picker [rangeMode]="true"></sat-datepicker>
  <sat-datepicker-toggle matSuffix [for]="picker"></sat-datepicker-toggle>
  </mat-form-field>

4 commentaires

j'ai oublié cette déclaration: satDatePicker: {begin: Date; date de fin; }; dateRangeDisp: tout;

Cela ne fonctionne pas pour moi, cela n'entre pas du tout dans ma fonction AddNewDate. Merci quand même.

cela peut être basique mais appuyez sur F12 et voyez quelle est l'erreur s'il n'y a personne, cela signifie qu'il n'atteint même pas votre fonction et bonne chance

J'ai vérifié clairement ... mais je ne vois aucun problème.

0
votes

@Kirubel et @Irad Amri Merci!

Cela fonctionne pour moi à la fin de cette façon:

HTML-

@Output() newItemEvent = new EventEmitter<bookedDate>();

  addNewDate(type: string, event: MatDatepickerInputEvent<Date>) {
    this.dateRange.dateStart = this.range.get('start').value;
    this.dateRange.dateEnd = this.range.get('end').value;
    this.newItemEvent.emit(this.dateRange);
  }

TS-

<mat-form-field class="form-field">
    <mat-label>Enter a date range</mat-label>
    <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
        <input **(dateInput)="addEvent('input', $event)" 
(dateChange)="addEvent('change', $event)"** matStartDate
            formControlName="start" placeholder="Start date">
        <input **(dateInput)="addNewDate('input', $event)" 
 (dateChange)="addNewDate('change', $event)"** matEndDate
            formControlName="end" placeholder="End date">
    </mat-date-range-input>
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-date-range-picker #picker></mat-date-range-picker>

    <mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">Invalid 
 start date
    </mat-error>
    <mat-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">Invalid end 
 date

    </mat-error>
</mat-form-field>

Et encore une fois, merci beaucoup pour l'aide!

0 commentaires

0
votes

Mon approche consistait à ajouter des variables de référence de modèle aux entrées pour matStartDate et matEndDate . Il s'agit de dateRangeStart et dateRangeEnd dans l'exemple de modèle ci-dessous:

// Component

dateRangeChange(dateRangeStart: HTMLInputElement, dateRangeEnd: HTMLInputElement) {
  console.log(dateRangeStart.value);
  console.log(dateRangeEnd.value);
}

Les valeurs de ces entrées peuvent être accessibles par une fonction appelée par la dateChange sortie sur matEndDate .

// Template

<mat-form-field appearance="standard">
  <mat-label>{{reportField.value.label}}</mat-label>
  <mat-date-range-input [rangePicker]="dateRangePicker">
    <input matStartDate
      placeholder="Start date"
      #dateRangeStart>
    <input matEndDate
      placeholder="End date"
      #dateRangeEnd
      (dateChange)="dateRangeChange(dateRangeStart, dateRangeEnd)">
  </mat-date-range-input>
  <mat-datepicker-toggle matPrefix
    [for]="dateRangePicker">
  </mat-datepicker-toggle>
  <mat-date-range-picker #dateRangePicker></mat-date-range-picker>
</mat-form-field>

Cela évite la nécessité d'un événement dateChange sur les deux entrées.

0 commentaires