Comment choisir une plage de dates en matériau angulaire 5.0.0 avec datepicker?
J'utilise le dernier Angular Material 5.0.0-rc0 dans mon application Angular 5. J'essaie de sélectionner une plage de dates avec la variable datepicker fournie avec du matériel angulaire, mais je n'ai trouvé aucune documentation à ce sujet.
Tout ce que je pourrais utiliser, c’est de sélectionner startDate ou de définir minDate et maxDate. Voici le code HTML pour cela
<mat-form-field>
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker startView="year" [startAt]="startDate"></mat-datepicker>
</mat-form-field>
et code TS
import {Component} from '@angular/core';
@Component({
selector: 'datepicker-start-view-example',
templateUrl: 'datepicker-start-view-example.html',
styleUrls: ['datepicker-start-view-example.css'],
})
export class DatepickerStartViewExample {
minDate = new Date(2000, 0, 1);
maxDate = new Date(2020, 0, 1);
}
Ce code m'aide à sélectionner une date dans la plage de ces dates min et max, mais ne permet pas d'en sélectionner une plage. L'utilisation d'une bibliothèque tierce peut résoudre ce problème, mais son interface utilisateur sera différente, ce qui sera différent de l'interface utilisateur de mon application actuelle. S'il vous plaît, aidez-moi à résoudre ce problème.
Il n’existe actuellement aucun moyen de sélectionner une plage de dates, bien qu’il y ait un numéro le demandant.
En attendant, vous ne pouvez avoir que deux sélecteurs de date. Un pour la date de début et un pour la date de fin. Quelque chose comme ça:
<mat-form-field> //start date datepicker
<input matInput [min]="minDate" [max]="maxDate" [formControl]="startDate" [matDatepicker]="picker" placeholder="Choose a start date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker startView="year" [startAt]="minDate"></mat-datepicker>
</mat-form-field>
<mat-form-field> //end date datepicker
<input matInput [min]="startDate" [max]="maxDate" [formControl]="endDate" [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker startView="year" [startAt]="startDate"></mat-datepicker>
</mat-form-field>
Vous pourriez alors avoir un emplacement où s’ils remplacent le endDate par quelque chose avant le startDate il leur affichera une erreur ou réinitialisera le startDate
Il y a un numéro en suspens à la page github.
Dans Angular-Blog, il y a une note pour cela aussi (regardez à la fin).
https://blog.angular.io/taking-advantage-of-the-angular-material-datepicker-237e80fa14b3
Recommander à vérifier Saturn gamme de matériaux Datepicker . Regardez aussi leur page de démonstration . Il s'agit d'un matériel UX complet avec prise en charge intégrée de votre thème Matériel existant.
Vous pouvez l'installer avec npm install saturn-datepicker. Voir leur page Github } _ pour des instructions d'intégration complètes.
Le balisage ressemble à ceci:
<mat-form-field>
<input matInput
placeholder="Choose a date"
[satDatepicker]="picker"
[value]="date">
<sat-datepicker #picker [rangeMode]="true"></sat-datepicker>
<sat-datepicker-toggle matSuffix [for]="picker"></sat-datepicker-toggle>
</mat-form-field>
Et voici à quoi cela ressemble sur la page:
La version angulaire de la bibliothèque Angular UI Bootstrap possède un sélecteur de plage de dates, vous pouvez le vérifier. Je l'utilise dans mes projets.
https://ng-bootstrap.github.io/#/components/datepicker/examples