ReactJS - Sélecteur de date : Un guide pour débutants

Bonjour, aspirants développeurs ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde des sélecteurs de date ReactJS. Ne vous inquiétez pas si vous n'avez jamais codé auparavant - je serai votre guide amical, expliquant tout étape par étape. À la fin de ce tutoriel, vous serez capable d'ajouter un sélecteur de date ingénieux à vos applications React. C'est parti !

Qu'est-ce qu'un sélecteur de date ?

Avant de commencer à coder, comprenons ce qu'est un sélecteur de date. Imaginez que vous réservez un vol en ligne. Vous devez sélectionner votre date de voyage, non ? Ce calendrier qui apparaît et vous permet de choisir une date ? C'est un sélecteur de date ! C'est un élément d'interface utilisateur qui rend la sélection des dates facile et intuitive.

Pourquoi utiliser un sélecteur de date dans React ?

React est tout au sujet de la création d'interfaces utilisateur interactives, et un sélecteur de date est un excellent exemple de cela. Il améliore l'expérience utilisateur en fournissant un calendrier visuel pour la sélection des dates, réduisant les erreurs et rendant votre application plus conviviale.

Commencer avec le sélecteur de date React

Pour utiliser un sélecteur de date dans React, nous allons utiliser une bibliothèque populaire appelée react-datepicker. Cette bibliothèque fournit un composant personnalisable que nous pouvons intégrer facilement dans nos applications React.

Étape 1 : Configurer votre projet React

Premièrement, créons un nouveau projet React. Si vous en avez déjà un, vous pouvez ignorer cette étape.

npx create-react-app mon-app-selecteur-date
cd mon-app-selecteur-date

Cette commande crée une nouvelle application React nommée "mon-app-selecteur-date" et vous déplace dans le répertoire du projet.

Étape 2 : Installer la bibliothèque du sélecteur de date

Maintenant, installons la bibliothèque react-datepicker :

npm install react-datepicker

Cette commande ajoute la bibliothèque du sélecteur de date à votre projet.

Appliquer le composant du sélecteur de date

Maintenant comes la partie amusante - utiliser réellement le sélecteur de date dans notre application !

Étape 1 : Importer les modules nécessaires

Ouvrez votre fichier src/App.js et ajoutez ces instructions d'importation en haut :

import React, { useState } from 'react';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

Voici ce que fait chaque ligne :

• Nous importons useState de React pour gérer l'état de notre composant.
• Nous importons le composant DatePicker de la bibliothèque que nous avons installée.
• Nous importons le fichier CSS pour styliser notre sélecteur de date.

Étape 2 : Créer un composant fonctionnel

Créons un composant fonctionnel qui utilise notre sélecteur de date :

function App() {
const [selectedDate, setSelectedDate] = useState(null);

return (
<div className="App">
<h1>Mon sélecteur de date incroyable</h1>
<DatePicker
selected={selectedDate}
onChange={date => setSelectedDate(date)}
dateFormat="dd/MM/yyyy"
placeholderText="Sélectionnez une date"
/>
<p>Date sélectionnée : {selectedDate ? selectedDate.toDateString() : "Aucune date sélectionnée"}</p>
</div>
);
}

Reprenons cela :

1. Nous utilisons useState pour créer une variable d'état selectedDate et une fonction setSelectedDate pour la mettre à jour.
2. Nous rendons un composant DatePicker avec plusieurs props :

• selected : La date actuellement sélectionnée
• onChange : Une fonction à appeler lorsque une nouvelle date est sélectionnée
• dateFormat : Comment nous voulons que la date soit affichée
• placeholderText : Ce qui doit être affiché lorsque aucune date n'est sélectionnée

3. Nous affichons la date sélectionnée sous le sélecteur, ou un message si aucune date n'est sélectionnée.

Étape 3 : Personnaliser le sélecteur de date

L'une des grandes choses à propos de react-datepicker est sa personnalisation. Jetons un œil à quelques manières dont nous pouvons modifier notre sélecteur de date :

function App() {
const [selectedDate, setSelectedDate] = useState(null);

return (
<div className="App">
<h1>Mon sélecteur de date personnalisé</h1>
<DatePicker
selected={selectedDate}
onChange={date => setSelectedDate(date)}
dateFormat="dd/MM/yyyy"
minDate={new Date()}
filterDate={date => date.getDay() !== 6 && date.getDay() !== 0}
showYearDropdown
scrollableYearDropdown
/>
</div>
);
}

Dans cet exemple :

• minDate={new Date()} assure que les dates passées ne peuvent pas être sélectionnées.
• filterDate est utilisé pour désactiver les week-ends (samedi et dimanche).
• showYearDropdown et scrollableYearDropdown ajoutent une liste déroulante pour changer rapidement les années.

Méthodes du sélecteur de date

La bibliothèque react-datepicker fournit plusieurs méthodes utiles. Voici un tableau résumant quelques-unes d'entre elles :

Méthode	Description
setOpen(boolean)	Définit manuellement l'état ouvert du calendrier.
setFocus()	Définit manuellement le focus sur l'input.
handleCalendarClose()	Ferme manuellement le calendrier.
handleCalendarOpen()	Ouvre manuellement le calendrier.

Vous pouvez utiliser ces méthodes en créant une ref vers le composant DatePicker :

const datePickerRef = useRef(null);

// Plus tard dans votre JSX
<DatePicker ref={datePickerRef} />

// Pour utiliser une méthode
datePickerRef.current.setOpen(true);

Conclusion

Félicitations ! Vous venez d'apprendre à implémenter et personnaliser un sélecteur de date dans React. Cet outil puissant rendra la sélection des dates dans vos applications un jeu d'enfant pour les utilisateurs.

Souvenez-vous, la clé pour maîtriser React (ou n'importe quel concept de programmation) est la pratique. Essayez d'ajouter des sélecteurs de date à vos projets, expérimentez avec différents props, et n'ayez pas peur de plonger dans la documentation pour des fonctionnalités plus avancées.

Bonne programmation, et que vos dates soient toujours parfaitement choisies ! ?️?‍?

Credits: Image by storyset