ReactJS UI Ant Design Composant DatePicker

Afficher la discussion

Améliorer l’article

Enregistrer l’article

J’aime l’article

Afficher la discussion

Améliorer l’article

Enregistrer l’article

J’aime l’article

Ant Design Library a ce composant pré-construit, et il est également très facile à intégrer. Le composant DatePicker est utilisé pour sélire une date à partir d’un panneau contextuel lorsque le l’utilisateur clique sur la zone de saisie. Nous pouvons utiliser l’approche suivante dans ReactJS pour utiliser le composant Ant Design DatePicker.

API commune :

  • AutoriserEffacer : Il est utilisé pour indiquer si autoriser ou non l’effacement du texte.
  • mise au point automatique : Il est utilisé pour obtenir le focus lorsque le composant est monté si cela est défini sur true.
  • bordé: Il est utilisé pour indiquer s’il a un style de bordure ou non.
  • nom du cours: Il est utilisé pour passer le className du sélecteur.
  • dateRender : Il est utilisé comme fonction de rendu personnalisée pour les cellules de date.
  • désactivé: Il est utilisé pour déterminer si le DatePicker est désactivé ou non.
  • date de désactivation : Il est utilisé pour spécifier la date qui ne peut pas être sélectionnée.
  • dropdownClassName : Il est utilisé pour personnaliser le className du calendrier contextuel.
  • getPopupContainer : Il est utilisé pour définir le conteneur de la couche flottante.
  • inputReadOnly : Il est utilisé pour définir l’attribut de lecture seule de la balise d’entrée.
  • lieu: Il est utilisé pour la configuration de la localisation.
  • mode: Il est utilisé pour désigner le mode du panneau de sélection.
  • ouvert: Il est utilisé pour indiquer l’état ouvert du sélecteur.
  • panneauRendu : Il est utilisé pour personnaliser le rendu du panneau.
  • cueilleur: Il est utilisé pour définir la date du type de sélecteur.
  • espace réservé : Il est utilisé pour désigner l’espace réservé de l’entrée de date.
  • popupStyle : Il est utilisé pour personnaliser le style du calendrier contextuel.
  • Taille: Il est utilisé pour déterminer la taille de la zone de saisie.
  • style: Il est utilisé pour personnaliser le style de la zone de saisie.
  • icône de suffixe : Il est utilisé pour l’icône de suffixe personnalisé.
  • onOpenChange : Il s’agit d’une fonction de rappel qui peut être déclenchée lorsque le calendrier contextuel est affiché ou fermé.
  • onPanelChange : Il s’agit d’une fonction de rappel qui est déclenchée lorsque le mode du panneau de sélection est modifié.

Accessoires DatePicker :

  • defaultPickerValue : Il est utilisé pour définir la date du sélecteur par défaut.
  • valeur par défaut: Si l’heure de début ou l’heure de fin est nulle ou indéfinie, elle est utilisée pour définir la date par défaut.
  • temps désactivé : Il est utilisé pour spécifier le temps qui ne peut pas être sélectionné.
  • format: Il est utilisé pour définir le format de la date.
  • renderExtraFooter : Il est utilisé pour afficher un pied de page supplémentaire dans le panneau.
  • montre maintenant: Il est utilisé pour indiquer s’il faut afficher le bouton « Maintenant » sur le panneau lorsque showTime est défini.
  • afficher l’heure: Il est utilisé pour fournir un objet de sélection de temps supplémentaire.
  • showTime.defaultValue : Il est utilisé pour définir l’heure par défaut de la date sélectionnée.
  • afficherAujourd’hui : Il est utilisé pour indiquer s’il faut afficher le bouton Aujourd’hui.
  • évaluer: Il est utilisé pour fixer une date.
  • sur le changement: Il s’agit d’une fonction de rappel qui se déclenche lorsque l’heure sélectionnée change.
  • surOk : C’est une fonction de rappel qui est déclenchée lorsque vous cliquez sur le bouton ok.
  • onPanelChange : C’est une fonction de rappel qui est déclenchée pour le changement de panneau.

Sélecteur de date[picker=year] Accessoires :

  • defaultPickerValue : Il est utilisé pour définir la date du sélecteur par défaut.
  • valeur par défaut: Il est utilisé pour définir la date par défaut.
  • format: Il est utilisé pour définir le format de la date.
  • renderExtraFooter : Il est utilisé pour afficher un pied de page supplémentaire dans le panneau.
  • évaluer: Il est utilisé pour fixer une date.
  • sur le changement: Il s’agit d’une fonction de rappel qui se déclenche lorsque l’heure sélectionnée change.

Sélecteur de date[picker=quarter] Accessoires :

  • defaultPickerValue : Il est utilisé pour définir la date du sélecteur par défaut.
  • valeur par défaut: Il est utilisé pour définir la date par défaut.
  • format: Il est utilisé pour définir le format de la date.
  • renderExtraFooter : Il est utilisé pour afficher un pied de page supplémentaire dans le panneau.
  • évaluer: Il est utilisé pour fixer une date.
  • sur le changement: Il s’agit d’une fonction de rappel qui se déclenche lorsque l’heure sélectionnée change.

Sélecteur de date[picker=month] Accessoires :

  • defaultPickerValue : Il est utilisé pour définir la date du sélecteur par défaut.
  • valeur par défaut: Il est utilisé pour définir la date par défaut.
  • format: Il est utilisé pour définir le format de la date.
  • moisCellRender : Il est utilisé pour la méthode de rendu de contenu de cellule de mois personnalisé.
  • renderExtraFooter : Il est utilisé pour afficher un pied de page supplémentaire dans le panneau.
  • évaluer: Il est utilisé pour fixer une date.
  • sur le changement: Il s’agit d’une fonction de rappel qui se déclenche lorsque l’heure sélectionnée change.

Sélecteur de date[picker=week] Accessoires :

  • defaultPickerValue : Il est utilisé pour définir la date du sélecteur par défaut.
  • valeur par défaut: Il est utilisé pour définir la date par défaut.
  • format: Il est utilisé pour définir le format de la date.
  • renderExtraFooter : Il est utilisé pour afficher un pied de page supplémentaire dans le panneau.
  • évaluer: Il est utilisé pour fixer une date.
  • sur le changement: Il s’agit d’une fonction de rappel qui se déclenche lorsque l’heure sélectionnée change.

Méthodes :

  • se brouiller(): Cette méthode est utilisée pour supprimer le focus.
  • se concentrer(): Cette méthode est utilisée pour obtenir le focus.

Accessoires Range Picker :

  • allowVide : Il est utilisé pour laisser l’entrée de début ou de fin vide.
  • dateRender : Il est utilisé pour personnaliser la cellule de date.
  • defaultPickerValue : Il est utilisé pour définir la date du sélecteur par défaut.
  • valeur par défaut: Il est utilisé pour définir la date par défaut.
  • désactivé: Il est utilisé pour indiquer s’il faut désactiver le début ou la fin ou non.
  • temps désactivé : Il est utilisé pour spécifier le temps qui ne peut pas être sélectionné.
  • format: Il est utilisé pour définir le format de la date.
  • gammes : Il est utilisé pour les plages prédéfinies pour une sélection rapide.
  • renderExtraFooter : Il est utilisé pour afficher un pied de page supplémentaire dans le panneau.
  • séparateur: Il est utilisé pour définir un séparateur entre les entrées.
  • afficher l’heure: Il est utilisé pour fournir une sélection de temps supplémentaire.
  • showTime.defaultValue : Il est utilisé pour définir l’heure par défaut de la date sélectionnée.
  • évaluer: Il est utilisé pour fixer une date.
  • onCalendarChange : Il s’agit d’une fonction de rappel qui se déclenche lorsque l’heure de début ou l’heure de fin de la plage change.
  • sur le changement: Il s’agit d’une fonction de rappel qui se déclenche lorsque l’heure sélectionnée change.

Création de l’application React et installation du module :

  • Étape 1: Créez une application React à l’aide de la commande suivante :

    npx create-react-app foldername
  • Étape 2: Après avoir créé votre dossier de projet, c’est-à-dire le nom du dossier, déplacez-vous dessus à l’aide de la commande suivante :

    cd foldername
  • Étape 3: Après avoir créé l’application ReactJS, installez le obligatoire module à l’aide de la commande suivante :

    npm install antd

Structure du projet : Cela ressemblera à ce qui suit.

ProjectStructure

Structure du projet

Exemple: Maintenant, écrivez le code suivant dans le App.js dossier. Ici, App est notre composant par défaut où nous avons écrit notre code.

App.js

import React from 'react'

import "antd/dist/antd.css";

import { DatePicker } from 'antd';

 

export default function App() {

 

  return (

    <div style={{

      display: 'block', width: 700, padding: 30

    }}>

      <h4>ReactJS Ant-Design DatePicker Component</h4>

      <>

        <DatePicker onChange={(date) => console.log(date)} />,

      </>

    </div>

  );

}

Étape pour exécuter l’application : Exécutez l’application à l’aide de la commande suivante à partir du répertoire racine du projet :

npm start

Production: Ouvrez maintenant votre navigateur et accédez à http://localhost:3000/vous verrez la sortie suivante :

ReactApp

Référence: https://ant.design/components/date-picker/

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *