Ngx-Bootstrap DateRange Picker et Date Picker


introduction

Dans cet article, nous allons apprendre l’utilisation de Ngx-Bootstrap DateRange Picker et Date Picker dans Angular 8.

Ngx-Bootstrap a publié un ensemble d’outils open-source qui sont des directives natives Angular pour Bootstrap 3 et 4. Il contient tous les composants principaux alimentés par Angular. Dans cet article, nous découvrirons le composant DatePicker, une fonctionnalité intéressante de Ngx-bootstrap.

Conditions préalables

  • Connaissances de base d’Angular
  • Le code Visual Studio doit être installé
  • La CLI angulaire doit être installée
  • Le nœud JS doit être installé

Étape 1

Créons un nouveau projet angulaire à l’aide de la commande NPM suivante,

Étape 2

Maintenant, créons un nouveau composant en utilisant la commande suivante,

Étape 3

Installez ngx-bootstrap à partir de npm à l’aide de la commande suivante.

Ou,

Étape 4

Ajoutons maintenant des styles d’amorçage dans notre fichier index.html.

Pour Bootstrap 3,

Pour Bootstrap 4,

Étape 5

Ajoutons le modèle dans notre ngx-bootstrap-datepicker.component.html.

Dans la méthode bsConfig, nous pouvons formater la date et l’heure. showWeekNumbers est une valeur booléenne qui est vraie par défaut et affiche le numéro de la semaine.

Nous pouvons également sélectionner la date min. date max, etc.

Étape 6

Maintenant, ouvrez le fichier ngx-bootstrap-datepicker.component.ts et ajoutez le code suivant dans ce fichier.

Étape 7

Créez un service de données de service à l’aide de la commande NPM suivante

Maintenant, ouvrez le fichier data.service.ts et ajoutez le code suivant,

Étape 8

Maintenant, ouvrez le fichier app.component.html et ajoutez le code suivant dans le fichier,

Étape 9

Ouvrons le fichier app.module.ts et ajoutons le code suivant dans le fichier,

Il est maintenant temps pour la sortie,

Le sélecteur de plage de dates est l’endroit où nous pouvons sélectionner une plage de données. Après avoir sélectionné la date, un événement se déclenchera, qui est un tableau,

L’image ci-dessous montre qu’elle ne récupérera que les données comprises entre le 1er et le 14 avril.

L’image ci-dessous montre le sélecteur de date ngx-bootstrap normal.

Conclusion

J’espère que vous avez apprécié cet article autant que j’ai aimé écrire et coder les exemples.

Veuillez me faire savoir comment l’améliorer.

Close Menu