My-datepicker-plugin NPM

📅 DatePickerPlugin - React Date Picker Component

Auteur :

👤 Marc Torres

DatePickerPlugin est un composant React simple et facile à utiliser pour ajouter une sélection de date dans vos formulaires. Il permet de choisir une date facilement et d'ajuster la sélection à vos besoins dans un projet React.

📦 Installation

Installez le plugin directement depuis npm en utilisant la commande suivante :

npm install my-datepicker-plugin

🚀 Utilisation

Une fois installé, vous pouvez utiliser le plugin dans n'importe quel composant de votre application React. Voici un exemple basique d'utilisation :

import React, { useState } from 'react';
import DatePicker from 'my-datepicker-plugin'; // Importer le plugin

const MyFormComponent = () => {
  const [selectedDate, setSelectedDate] = useState('');

  return (
    <div>
      <h2>Formulaire avec Date Picker</h2>
      <DatePicker
        label="Choisissez une date"
        onChange={(date) => setSelectedDate(date)}
      />
      <p>Date sélectionnée : {selectedDate}</p>
    </div>
  );
};

export default MyFormComponent;

Props

Le composant DatePickerPlugin accepte les props suivantes :

Props	Type	Description	Obligatoire
`label`	string	Le texte qui apparaît au-dessus du champ de sélection de la date.	Oui
`onChange`	func	Fonction appelée avec la nouvelle valeur de date lorsque celle-ci est sélectionnée.	Oui
`className`	string	Ajoute une classe CSS personnalisée au champ de sélection (optionnel).	Non
`value`	string	Permet de définir une valeur par défaut pour la date (format YYYY-MM-DD).	Non

🎨 Personnalisation du style

Le style par défaut du DatePickerPlugin peut être personnalisé en modifiant le fichier CSS fourni ou en ajoutant vos propres classes CSS.

Exemple de style personnalisé :

/* Fichier: DatePickerPlugin.css */
.datepicker-container {
  margin: 20px 0;
}

.datepicker-input {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ddd;
  width: 100%;
  max-width: 400px;
}

Vous pouvez également passer une classe CSS personnalisée à travers la prop className pour modifier les styles du composant :

<DatePicker
  label="Votre date de naissance"
  className="my-custom-datepicker"
/>

🛠 Développement

Installation des dépendances

Si vous souhaitez modifier ou contribuer au plugin, clonez le dépôt et installez les dépendances en local :

git clone https://github.com/marco3866/my-datepicker-plugin.git
cd my-datepicker-plugin
npm install

Scripts disponibles

Script	Description
`npm run dev`	Lancer un serveur de développement pour tester le composant.
`npm run build`	Générer la version de production du composant.
`npm run lint`	Vérifier la qualité du code avec ESLint.
`npm run preview`	Lancer un aperçu local de la version de production.

🌟 Fonctionnalités à venir

Ajout d'options de localisation pour supporter différents formats de date.
Ajout d'un thème sombre pour le composant.
Validation de la sélection des dates avec des intervalles (dates minimum/maximum).

🤝 Contribuer

Les contributions sont les bienvenues ! N'hésitez pas à soumettre une issue ou une pull request si vous souhaitez ajouter de nouvelles fonctionnalités ou résoudre des bugs.