@cyril-vtn/date-picker

Un composant DatePicker personnalisé pour React, offrant une interface utilisateur intuitive pour la sélection de dates.

Installation

npm install @cyril-vtn/date-picker

ou

yarn add @cyril-vtn/date-picker

ou

pnpm add @cyril-vtn/date-picker

Utilisation

import React, { useState } from "react";
import DatePicker from "@cyril-vtn/date-picker";
function App() {
  const [selectedDate, setSelectedDate] = useState(new Date());
  const handleDateChange = (event) => {
    setSelectedDate(new Date(event.target.value));
  };
  return (
    <div>
      <h1>Sélectionnez une date</h1>
      <DatePicker
        value={selectedDate}
        onChange={handleDateChange}
        name="date-selection"
      />
    </div>
  );
}
export default App;

Props

Le composant DatePicker accepte les props suivantes :

| Prop | Type | Description | | ---------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | | value | Date ou string | La date actuellement sélectionnée. Peut être un objet Date ou une chaîne de caractères au format ISO (YYYY-MM-DD). | | onChange | function | Fonction appelée lorsqu'une nouvelle date est sélectionnée. Reçoit un objet event avec target.name et target.value (au format ISO). | | name | string | Le nom du champ, utilisé dans l'objet event passé à onChange. |

Fonctionnalités

• Sélection de date via un calendrier interactif
• Navigation entre les mois
• Saisie manuelle de la date au format mm/dd/yyyy
• Style sombre par défaut
• Fermeture automatique du calendrier lors d'un clic à l'extérieur

Personnalisation

Le composant utilise des styles CSS par défaut. Vous pouvez les surcharger en créant vos propres règles CSS ciblant les classes utilisées dans le composant.

Licence

ISC

Auteur

Cyril Votion