Sélecteur de date en Angular

1. Utilisation du sélecteur de date dans Angular
2. Utilisation de la balise input pour créer un sélecteur de date simple dans Angular
3. Utilisation de l’événement onChange pour obtenir la date sélectionnée du sélecteur de date dans Angular
4. Utilisation de l’événement onClick pour enregistrer la date après avoir cliqué sur un bouton dans Angular
5. Utilisation du DatePipe pour modifier le format de date dans le sélecteur de date dans Angular

Nous présenterons un moyen simple d’ajouter un sélecteur de date dans notre application Angular avec des exemples.

Nous présenterons également la bibliothèque de sélecteur de date Angular pour afficher un sélecteur de date dans Angular.

Utilisation du sélecteur de date dans Angular

Dans cette ère moderne des systèmes de gestion, le sélecteur de date est l’un des éléments de formulaire les plus courants. Le sélecteur de date permet à un utilisateur de choisir une date connue, telle que la date de naissance ou la date de l’événement.

Un sélecteur de date peut nous permettre de sélectionner la date composée d’un jour, d’un mois et d’une année dans notre interface utilisateur personnalisée. Il s’agit d’une variante d’un élément de formulaire de saisie.

Passons en revue un exemple pour comprendre comment nous pouvons utiliser un sélecteur de date pour sélectionner et obtenir la date sélectionnée sur les événements onChange et onSubmit.

La différence entre ces événements est qu’il serait préférable d’obtenir les valeurs de l’événement onSubmit du formulaire si nous avons plus d’un champ.

Mais si nous n’avons qu’un sélecteur de date et que nous voulons obtenir la date une fois que l’utilisateur l’a sélectionnée, nous pouvons utiliser l’événement onChange pour obtenir la valeur.

Utilisation de la balise input pour créer un sélecteur de date simple dans Angular

Créons une nouvelle application en utilisant la commande suivante.

# angular
ng new my-app

Après avoir créé notre nouvelle application dans Angular, nous irons dans notre répertoire d’application à l’aide de cette commande.

# angular
cd my-app

Maintenant, exécutons notre application pour vérifier si toutes les dépendances sont correctement installées.

# angular
ng serve --open

Nous allons maintenant créer un sélecteur de date dans le fichier app.component.html en utilisant la balise input.

# Angular
<input type="date" />

Cette ligne de code créera un sélecteur de date, comme indiqué ci-dessous.

Production:

Nous pouvons donc créer ce type de sélecteur de date en utilisant cette simple ligne de code. Maintenant, obtenons la date sélectionnée chaque fois que nous sélectionnons la date.

Utilisation de l’événement onChange pour obtenir la date sélectionnée du sélecteur de date dans Angular

Dans app.component.ts, nous allons créer une fonction SendDataonChange qui prendra un event en paramètre et console.log les données sélectionnées.

# Angular
SendDataonChange(event: any) {
console.log(event.target.value);
}

Maintenant, définissons cette fonction dans le modèle, qui sera déclenchée chaque fois que la date est modifiée.

# Angular
<input type="date" (change)="SendDataonChange($event)" />

Production:

Utilisation de l’événement onClick pour enregistrer la date après avoir cliqué sur un bouton dans Angular

Supposons que nous voulions enregistrer la date après avoir cliqué sur un bouton. Nous pouvons créer un bouton dans app.component.html et le lier avec une fonction onClick() créée dans app.component.ts.

Ainsi, notre code dans app.component.html ressemblera à ci-dessous.

# Angular
<input type="date" (change)="SendDataonChange($event)" />
<br>
<button (click)="onClick()">Change</button>

Nous devons lier notre sélecteur de date avec [(ngModel)]. Donc, notre code ressemblera à ci-dessous.

# Angular
<input type="date" (change)="SendDataonChange($event)" [(ngModel)]="changed" />
<br>
<button (click)="onClick()">Change</button>

Maintenant, ajoutons un peu de CSS pour rendre notre bouton et notre sélecteur de date élégants. Ainsi, notre code dans app.component.css ressemblera à ci-dessous.

# Angular
button {
padding: 10px;
background-color: black;
border: none;
color: white;
margin-top: 10px;
}
input{
padding: 5px;
font-size: 15px;
}

Production:

Dans app.component.ts, nous allons définir la variable que nous lions à notre sélecteur de date.

# Angular
changed: Date;

Maintenant, nous allons créer une fonction onClick qui va console.log la valeur du date picker une fois le bouton cliqué.

# Angular
onClick() {
console.log(this.changed);
}

Production:

Utilisation du DatePipe pour modifier le format de date dans le sélecteur de date dans Angular

Voyons maintenant comment nous pouvons changer le format de la date.

De nombreux développeurs sont bloqués avec différents formats de date, car le meilleur développeur de logiciels développe des logiciels pour qu’ils fonctionnent efficacement et sans erreur.

La meilleure façon de changer notre format de date est de créer une fonction pour enregistrer la date et la récupérer. Ainsi, le format dans la base de données reste le même, mais nous pouvons facilement l’afficher dans n’importe quel format nécessaire à l’aide de fonctions.

Tout d’abord, nous allons importer DatePipe dans app.component.ts, comme indiqué ci-dessous.

# Angular
import { DatePipe } from '@angular/common';

Maintenant, nous allons définir une nouvelle variable, newDate, qui sera utilisée pour enregistrer la valeur de la date après le changement et le retour du format.

Créons une fonction changeFormat() qui prendra changed comme paramètre et transformera le format de date au format requis à l’aide de DatePipe.

Nous allons définir une variable pipe qui stockera le fuseau horaire de la date.

Notre code dans app.component.ts ressemblera à ci-dessous.

# Angular
import { Component, VERSION } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
name = 'Angular ' + VERSION.major;
changed: Date;
pipe = new DatePipe('en-US');
newDate: string;
changeFormat(changed){
let ChangedFormat = this.pipe.transform(this.changed, 'dd/MM/YYYY');
this.newDate = ChangedFormat;
}

onClick() {
console.log(this.changed);
}
SendDataonChange(event: any) {
console.log(event.target.value);
}
}

Nous allons maintenant passer la valeur de date de notre fonction onClick() et console.log la nouvelle valeur de date avec un nouveau format.

# Angular
onClick() {
this.changeFormat(this.changed);
console.log(this.newDate);
}

Production:

Comme vous le voyez dans l’exemple ci-dessus, lorsque nous sélectionnons la date, elle affiche 2022-01-19, mais lorsque nous cliquons sur le bouton, elle appelle la fonction changeFormat() à l’intérieur de la fonction onClick() et renvoie la date avec le format modifié.

De cette façon, nous pouvons utiliser un sélecteur de date dans notre application pour enregistrer la valeur de la date lors de la sélection de la date ou enregistrer la valeur lorsque le bouton est cliqué. Et nous avons également appris comment changer le format de la date en utilisant DatePipe.

Vous pouvez vérifier le code complet ici.