Comment choisir la date de plage angulaire matériel 5.0.0 avec datepicker?
Je suis en utilisant la dernière Angular Material 5.0.0-rc0
dans mon Angulaire 5 app. Je suis en train de sélectionner une plage de dates avec les datepicker
fourni avec Angulaire de matériel, mais je ne pouvais pas trouver toute la documentation en la matière.
Tout ce que je pouvais travailler avec elle est de sélectionner un startDate
ou de définir la minDate
et maxDate
. Voici le code HTML pour que
<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 TS code
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 me permet de sélectionner une date dans la gamme de celles min et max des dates, mais ne permet pas de choisir une gamme d'entre eux. Bien que l'utilisation d'une bibliothèque tierce, peut-être de résoudre ce problème, mais sa va avoir un autre de l'INTERFACE utilisateur, qui va être différente de celle de mon actuel de l'application de l'INTERFACE utilisateur. Merci de m'aider à résoudre ce problème.
OriginalL'auteur starlight | 2017-11-08
Vous devez vous connecter pour publier un commentaire.
Il n'y a actuellement pas possible de sélectionner une plage de dates, même si il y a un question requérant.
OriginalL'auteur Edric
Vous recommandons de vérifier Saturne gamme de Matériel Datepicker. Jetez un oeil aussi à leur page de démonstration. C'est une gamme complète de Matériel de UX avec un support intégré pour votre Matériel existant thème.
Vous pouvez l'installer avec
npm install saturn-datepicker
. Voir leur page Github pour l'intégration complète des instructions.Balisage ressemble à ceci:
Et voici ce qu'il finit par ressembler sur la page:
OriginalL'auteur H Dog
Il y a un problème ouvert à la page github.
Angulaire du Blog, il y a une note pour cela aussi (à la fin).
En mars 2019 - vous toujours ne pouvez pas sélectionner une plage de dates
Angulaire Matériel développeurs promettent de libérer en v8.0 github.com/angular/material2/issues/4763#issuecomment-458650255
OriginalL'auteur Oswald
Dans le temps, peut-être vous avez deux sélecteurs de date. Un pour la date de début et une pour la date de fin. Quelque chose comme ceci:
Vous pourriez ensuite, où s'ils changent de
endDate
à quelque chose, avant lastartDate
il affiche une erreur ou réinitialise lestartDate
OriginalL'auteur mariogarcia
C'est même pas possible dans Angulaire Matériel 7.0.0. Il existe différents plugins pour le faire. Je suis venu avec ngx-aaa-datepicker. Il a travaillé pour moi.
Vous pouvez vérifier cela dans NPM
OriginalL'auteur Nahid Rezvee
L'angle de la version de l'Angulaire de l'UI Bootstrap bibliothèque a une date sélecteur de plage, vous pouvez vérifier que l'. Je l'utilise dans mes projets.
https://ng-bootstrap.github.io/#/components/datepicker/examples
OriginalL'auteur anurag619