Introduction

Nous rencontrons souvent divers forums et sites Web sur lesquels nous devons saisir notre date de naissance ou sélectionner une date pour un rendez-vous, quelle qu'en soit la raison, et une icône en forme de calendrier apparaît juste devant nos yeux. Comment et d'où cela apparaît-il ? Il doit s'agir d'un calendrier spécifique et dynamique qui reconnaît intelligemment et nous présente les dates de notre choix. C'est là qu'intervient React Date Picker. Dans ce didacticiel, nous apprendrons toutes ces méthodes de zéro au niveau avancé sur la façon dont elles sont implémentées dans React et comment elles peuvent être personnalisées. Poursuivons la discussion.

Le Réagir Date Picker est un composant utile et abondant utilisé pour afficher les dates en utilisant le format de boîte de dialogue de calendrier. Il existe généralement de nombreuses options de sélecteur de date disponibles de nos jours. Tous peuvent avoir des aspects techniques et des applications différents. Dans ce tutoriel, nous allons spécifiquement traiter de React Date Picker. Pour cela, nous avons besoin d’un package qui affiche l’heure et la date. Pour une meilleure compréhension, nous allons créer une application qui nous aidera à mieux comprendre React Date Picker. Mais avant cela, installons-le comme indiqué dans les étapes ci-dessous.

Installation

Pour installer Date Picker pour notre application React, nous devons avoir Node.js préinstallé sur notre système. Bien qu'il ne soit pas important d'avoir toujours des modules de nœuds, il est fortement recommandé de les télécharger afin que toutes les dépendances soient servies efficacement. Par conséquent, la commande pour installer React Date Picker est donnée ci-dessous.

Le package peut être installé via npm :

sinon java

 npm install react-datepicker --save 

Ou via Fil:

 yarn add react-datepicker 

Il peut s'avérer nécessaire d'installer React et ses Proptypes individuellement car, sans ces dépendances, il est impossible de créer un sélecteur de date React. En outre, nous devrons peut-être utiliser le CSS des packages externes pour que le sélecteur de date soit visuellement superbe. Pour démarrer avec notre application, nous devons importer le sélecteur de date React dans notre fichier principal et nous devons continuer à le vérifier via la vue React.

 import React, { useState } from 'react'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; // CSS Modules, react-datepicker-cssmodules.css // import 'react-datepicker/dist/react-datepicker-cssmodules.css'; const Example = () => { const [startDate, setStartDate] = useState(new Date()); return ( setStartDate(date)} /> ); }; 

Exemple de React Datepicker

En supposant que notre système soit configuré avec toutes les exigences et dépendances d'installation, nous apprendrons comment créer une application React à partir de zéro. Cette implémentation est entièrement basée sur l'application de React datepicker.

Dans la discussion ci-dessus, nous supposons que nous avons installé React et PropTypes indépendamment puisque ces dépendances ne sont pas incorporées dans le package lui-même. Pour poursuivre les méthodes de création de notre application, nous devons suivre les étapes ci-dessous.

 npx create-react-app react-datepicker-app 

Déplacez-vous dans le dossier du projet avec la commande.

 cd react-datepicker-app 

Démarrez l'application React.

 npm start 

Une fois le moteur Node démarré, nous pouvons vérifier notre application via le numéro de port 3000 de l'hôte local. En outre, nous devons inclure l'extrait de code ci-dessous dans notre fichier app.js afin que les composants importants de React Date Picker soient importés dans notre fichier.

chaîne comparer c#

 // app.js import React, { Component } from 'react'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; import 'bootstrap/dist/css/bootstrap.min.css'; class App extends Component { constructor (props) { super(props) this.state = { startDate: new Date() }; this.handleChange = this.handleChange.bind(this); this.onFormSubmit = this.onFormSubmit.bind(this); } handleChange(date) { this.setState({ startDate: date }) } onFormSubmit(e) { e.preventDefault(); console.log(this.state.startDate) } render() { return ( Show Date ); } } export default App; 

Notre application ressemblerait maintenant à ceci.

Dans l'exemple codé ci-dessus, nous avons d'abord importé les packages de Sélecteur de date et Amorcer dans le modèle React. Ensuite, nous l'avons défini pour lier le gérer le changement et soumettez le composant dans le calendrier des événements. Ces événements seront automatiquement déclenchés lorsqu'un utilisateur soumet ou modifie les valeurs de valeur d'entrée du Datepicker. Plus tard, nous avons initialisé l'état du formulaire Datepicker avec un nouveau Date() objet à l’intérieur du constructeur. Enfin, nous avons lancé le Datepicker avec la directive ci-dessous pour lui ajouter quelques propriétés.

Nous pouvons visualiser la sortie sous la forme d’un format de sélecteur de date centré sur le calendrier. Le Datepicker ci-dessus ajoute des propriétés personnalisées aux composants de l'application React indiqués ci-dessus. Cela nous permet de choisir les dates sous forme de mois, jours, et années .

De plus, pour personnaliser le sélecteur de date, nous disposons de diverses autres méthodes, qu'il s'agisse de colorer les composants ou d'appliquer intelligemment les fonctions pour récupérer les dates. Nous pouvons également les personnaliser facilement si nous disposons de composants HTML et CSS liés au fichier app.js.

Localisation du sélecteur de date

Un autre exemple que nous allons découvrir est la localisation du Datepicker. Le sélecteur de date que nous allons créer dépend fortement de l'internationalisation de date-fns. En effet, il sert à localiser les éléments qui seront affichés. Si nous devons utiliser une locale autre que la valeur par défaut en-US, nous devrons peut-être l'importer dans le projet à partir du date-fns.

De plus, l'anglais est la langue par défaut qui se compose de 3 méthodes pour définir la langue.

s'inscrire localement (string, object) : charge un objet de paramètres régionaux importé à partir de date-fns.

Définir les paramètres régionaux par défaut (chaîne) : définit une locale enregistrée comme valeur par défaut pour toutes les instances de datepicker.

qu'est-ce que la structure dans la structure des données

getDefaultLocale : renvoie une chaîne affichant les paramètres régionaux par défaut actuellement définis.

Nous pouvons importer ces services dans les paramètres régionaux de la vue du calendrier à l'aide de l'extrait de code ci-dessous.

 import { registerLocale, setDefaultLocale } from 'react-datepicker'; import es from 'date-fns/locale/es'; registerLocale('es', es) 

Lors de l'importation et de l'enregistrement de ces services de paramètres régionaux dans notre fichier app.js, notre application ressemblera à ceci.

Dans un autre cas, pour modifier les paramètres régionaux, nous devons principalement modifier le code des paramètres régionaux ou utiliser l'internationalisation de date-fns afin que la révision du code puisse être prise en charge.

 setDefaultLocale('es') 

Définition de la plage de dates du calendrier dans Datepicker.

Nous apprendrons comment implémenter la fonctionnalité de plage en utilisant la date min et Propriété maxDate dans cette étape. Pour ce faire, nous importons le ajouterDays AP Je viens du date-fns bibliothèque en haut de notre composant React. Il ajoutera le nombre spécifique de jours à la date attribuée pour définir la plage.

 import addDays from 'date-fns/addDays' 

Le ajouterJours() La méthode prend généralement deux paramètres :

Date: La date qui doit être mise à jour.

Montant: Le nombre important de jours devait être inclus.

Nous pouvons facilement définir la plage de dates du jour actuel aux sept jours suivants dans le calendrier React. Cela peut être compris lorsque nous mettons en œuvre le Date min et datemax méthodes dans l’exemple de code ci-dessous.

 render() { return ( Show Date ); } 

L'extrait de code complet de notre application après la mise en œuvre de toutes les étapes indiquées ci-dessus est présenté ci-dessous.

npm nettoyer le cache

 import React, { Component } from 'react'; import DatePicker from 'react-datepicker'; import addDays from 'date-fns/addDays' import 'react-datepicker/dist/react-datepicker.css'; import 'bootstrap/dist/css/bootstrap.min.css'; class App extends Component { constructor (props) { super(props) this.state = { startDate: new Date() }; this.handleChange = this.handleChange.bind(this); this.onFormSubmit = this.onFormSubmit.bind(this); } handleChange(date) { this.setState({ startDate: date }) } onFormSubmit(e) { e.preventDefault(); console.log(this.state.startDate) } render() { return ( Show Date ); } } export default App; 

Dans l'exemple d'extrait ci-dessus, nous avons créé Date min en tant que composant d'enregistrement, et l'utilisateur ne peut choisir que la date antérieure à aujourd'hui. Nous avons utilisé la valeur de date pour le composant de départ, ce qui signifie que l'utilisateur ne peut pas choisir une date avant la date d'arrivée.

Dans la prochaine étape, nous enregistrerons la valeur de notre état et définirons le fonctionnement de chaque handle. L'idée principale est de l'implémenter en créant simplement un état pour chaque enregistrement et vérifier date avec les valeurs définies et y enregistrer les données. La seule différence réside dans le Date min méthode du composant de check-out, car elle dépend uniquement du composant d'enregistrement. Ainsi, en s'assurant que tout est réglé en termes de valeurs ni avant ni après, nous pouvons désormais sélectionner facilement les dates et définir le départ.

Conclusion

Dans ce didacticiel, nous avons pu suivre un guide simple étape par étape sur la création d'un composant React Datepicker personnalisé qui peut être facilement utilisé en remplacement du composant natif. Sélecteur de date HTML5 éléments d’entrée. Nous avons appris comment configurer l'application React en priorité car le rendu des composants React peut sembler complexe pour les débutants, donc la configuration des dépendances serait toujours préférée par un débutant. Nous avons également rencontré divers exemples pour établir un concept clair d'utilisation des composants de Datepicker dans notre application. Nous avons également découvert le processus de localisation du sélecteur de date afin que le processus de sélection des dates ne pose pas de problème si elles sont sélectionnées pour une durée spécifique sur le calendrier.

Bien que le sélecteur de date personnalisé créé dans ce didacticiel fonctionne comme prévu, il ne répond pas à toutes les exigences avancées pour un élément datepicker. D'autres améliorations peuvent être apportées, telles que la mise en œuvre du maximum et du minimum via des accessoires, le changement du type d'entrée du texte à la date et l'amélioration de l'accessibilité. Nous pouvons également développer des méthodes de conception pour le sélecteur de date que nous avons implémenté dans ce didacticiel en important des packages Bootstrap et en ajoutant un style personnalisé et des propriétés de survol pour lui donner une meilleure apparence.