web-dev-qa-db-fra.com

Comment désactiver toutes les dates avant une date particulière en angulaire?

Je construis un composant (html, css, spec.ts, ts) dans angular dans lequel je veux toujours endDate> startDate. J'ai suivi ce lien https: // matériel .angular.io/components/datepicker/overview afin de créer plusieurs datepickers.

Voici mon code HTML pour startDate et endDate:

date de début:

<div class="start-date" fxFlex="50%" fxFlexOrder="1">
          <mat-form-field>
            <input matInput [matDatepicker]="picker1" placeholder="{{'PORTAL.STARTDATE' | translate}}" type="text" formControlName="startDate" [(ngModel)]="unavailability.startDate" [readonly]="!componentPermission.writePermission">
            <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
            <mat-datepicker #picker1></mat-datepicker>
          </mat-form-field>
        </div>

date de fin:

<div class="end-date" fxFlex="50%" fxFlexOrder="2">
           <mat-form-field>
      <input matInput [matDatepicker]="picker2" placeholder="{{'PORTAL.ENDDATE' | translate}}" type="text" formControlName="endDate" [(ngModel)]="unavailability.endDate" [readonly]="!componentPermission.writePermission">
      <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
      <mat-datepicker #picker2></mat-datepicker>
   </mat-form-field>
        </div>

Voici ci-dessous mon angular (ts) où j'appelle la méthode validateForm lors du chargement de la page).

ngOnInit() {
    ....
    this.validateForm();
}

validateForm() {
    this.unavailabilityForm = this.formBuilder.group({
     'startDate': ['', Validators.required],
     'endDate': ['', Validators.required],
     'unavailabilityReason': ['']
    });
}

Déclaration de problème:

Maintenant, ce que je dois faire est - si j'ai sélectionné une date dans startDate (par exemple le 23 novembre), alors dans le sélecteur de date endDate, toutes les dates antérieures et y compris le 23 novembre devraient être désactivées afin que je ne peux sélectionner que des dates après le 23 novembre. Est-ce possible de faire en angulaire?

Pouvons-nous y parvenir en plaçant minDate et maxDate quelque part en HTML ou TS?

enter image description here

htmlangularangular-materialangular-componentsangular-forms
6
john

Puisque vous utilisez un formulaire réactif, utilisez les contrôles de formulaire. Il n'est pas recommandé d'avoir deux liaisons (ngModel et formControl). Laissez donc tomber le ngModel comme je l'ai suggéré dans une question précédente: https://stackoverflow.com/a/47426879/6294072

Remplissez donc vos contrôles de formulaire avec les valeurs de votre objet unavailability.

constructor(private formBuilder: FormBuilder) { 
  this.unavailabilityForm = this.formBuilder.group({
    startDate: [this.unavailability.startDate],
    endDate: [this.unavailability.endDate]
  });  
}

si vous recevez les valeurs ultérieurement, vous pouvez utiliser patchValues:

this.unavailabilityForm.setValue({
  startDate: this.unavailability.startDate;
  endDate: this.unavailability.endDate;
})

sinon, vous pouvez définir les valeurs lorsque vous créez le formulaire.

Ensuite, la seule chose que vous devez ajouter à votre deuxième sélecteur de date est [min] comme l'autre réponse mentionnée. Il utilise la valeur de contrôle de formulaire:

<input matInput 
       [min]="unavailabilityForm.controls.startDate.value" 
       formControlName="endDate" ...>

DÉMO

5
AJT82

La reliure avec [min] fonctionne parfaitement pour n'importe quelle date

Fichier .ts

//today's date
todaydate:Date = new Date();

//any date
someDate: Date = new Date(anydate);

fichier .html

 <mat-form-field>
        <input matInput [matDatepicker]="picker" [min]="todayDate" placeholder="Appointment date" formControlName="appointment_date"> 
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
12
Vedha Peri

Sauf s'il me manque quelque chose, vous pouvez utiliser la propriété de date [min]="":

<div class="item item-2" fxFlex="50%" fxFlexOrder="2">
   <mat-form-field>
      <input matInput [min]="startDate" [matDatepicker]="picker2" placeholder="{{'PORTAL.ENDDATE' | translate}}" type="text" formControlName="endDate" [(ngModel)]="unavailability.endDate" [readonly]="!componentPermission.writePermission">
      <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
      <mat-datepicker #picker2></mat-datepicker>
   </mat-form-field>
</div>

Quel que soit startDate, les dates de calendrier disponibles pour endDate seront limitées. Si vous devez le définir avant que startDate soit choisi, utilisez une autre variable et définissez-la dans consturctor() ou ngOnInit() de votre composant.

Voir: https://material.angular.io/components/datepicker/overview#date-validation

2
Milo

J'ai utilisé

[min] = "startDate.value"
1
estebanlobo
<mat-form-field >
    <input placeholder="Enter Date" matInput
        [matDatepicker]="picker1"
        formControlName="voucherExpirationDate"
        [min]="minDate">
    <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
    <mat-datepicker    #picker1></mat-datepicker>
</mat-form-field>
0
atul