Composant React DatePicker

Un composant DatePicker pour la sélection de date.

Version française

English Version

Table of Contents

• Features
• Compatibility
• Installation
• Usage
• Customization
• Troubleshooting
• Contributing
• Changelog
• License

Features

• Simple, lightweight and performant
• Uses TypeScript
• Date selection via dropdown menu
• "Today" button with icon for better user experience
• Wide range of year selection (100 years in the past to 10 years in the future)
• Customizable without CSS framework
• Takes into account localization for displaying months according to the language (en,fr)
• Allows color customization with props (colorPrimary, colorSecondary, colorTertiary, colorBackgroundField, colorBorderField, colorIcon)
• Automatic closure on click outside
• Month and year selectors by props

Compatibility

• React: version 16.8.0 or higher
• TypeScript: version 3.7 or higher
• Browsers: Chrome, Firefox, Safari, Edge (latest versions)

Installation

Install the package via npm:

npm install @sriver/date-picker-react-v2

Usage

Import and use the component in your application:

import React, { useState } from 'react';
import DatePicker from '@sriver/date-picker-react-v2';

function Example() {
	const [startDate, setStartDate] = useState(null);

	return (
		<DatePicker
			onChange={setStartDate}
			name="startDate"
			initialDate={new Date()}
			locale="en-US"
			colorPrimary="#4caf50"
			colorSecondary="#f1faee"
			colorTertiary="#a8dadc"
			yearRangeStart={100}
			yearRangeEnd={10}
			blurBackground={2}
			colorBackgroundSelect="#000000"
			placeholder="Select a date"
			placeholderColor="#333333"
			colorTextField="#333333"
			colorBackgroundField="#ffffff"
			colorBorderField="#d1d5db"
			colorIcon="#333333"
		/>
	);
}

Customization

The DatePicker component can be customized with the following props:

| Prop | Type | Default | Description | | --------------------- | -------- | --------------- | ---------------------------------------------------- | | onChange | Function | - | Function called when a date is selected | | initialDate | Date | new Date() | Initial date to display | | name | string | '' | Name of the input field | | locale | string | 'en-US' | Language code for localization | | colorPrimary | string | '#4caf50' | Primary color of the component | | colorSecondary | string | '#ffffff' | Secondary color (background) of the component | | colorTertiary | string | '#333333' | Tertiary color (text) of the component | | yearRangeStart | number | 100 | Number of years in the past for selection | | yearRangeEnd | number | 10 | Number of years in the future for selection | | placeholder | string | 'Select a date' | Text of the placeholder for the input field | | placeholderColor | string | '#333333' | Color of the placeholder for the input field | | colorBackgroundField | string | '#ffffff' | Background color of the input field | | colorBorderField | string | '#d1d5db' | Border color of the input field | | colorIcon | string | '#333333' | Color of the icon of the "Today" button | | colorTextField | string | '#333333' | Color of the text of the input field | | blurBackground | number | 2 | Amount of blur for the background of the datepicker | | colorBackgroundSelect | string | '#000000' | Background color for the dropdowns of the datepicker |

Troubleshooting

The component is not displaying correctly

• Make sure you have imported the component correctly and all dependencies are installed.

Custom colors are not applying

• Verify that you have passed the color props with valid hexadecimal values.

Contributing

Contributions are welcome! Please follow these steps to contribute:

1. Fork the project: https://github.com/D-Sriver/Date-Picker-React/
2. Create your feature branch (git checkout -b feature/AmazingNewFeature)
3. Commit your changes (git commit -m 'Add AmazingNewFeature')
4. Push to the branch (git push origin feature/AmazingNewFeature)
5. Open a Pull Request

Changelog

Version 1.0.10

• Added blurBackground prop to customize the blur of the datepicker
• Added colorBackgroundSelect prop to customize the background color of the dropdowns of the datepicker

Version 1.0.9

• Added colorTextField prop to customize the text input color of the datepicker

Version 1.0.7

• Added yearRangeStart and yearRangeEnd props to customize the year selection range
• Added placeholder prop to customize the placeholder of the input field
• Added placeholderColor prop to customize the color of the placeholder
• Added colorBackgroundField prop to customize the background color of the input field
• Added colorBorderField prop to customize the border color of the input field
• Added colorIcon prop to customize the color of the "Today" button icon

Version 1.0.6

• Added color customization with props

Version 1.0.5

• Date change via dropdown list

Version 1.0.4

• Implemented event propagation prevention

Version 1.0.3

• Added locale prop for localization (EN or FR)

Version 1.0.2

• Added README.md

Version 1.0.0

• Created the datepicker

License

MIT

Version française

Table des matières

• Caractéristiques
• Compatibilité
• Installation
• Utilisation
• Personnalisation
• Dépannage
• Contribution
• Changelog
• Licence

Caractéristiques

• Simple, léger et performant
• Utilisation de TypeScript
• Sélection de date par menu déroulant
• Bouton "Aujourd'hui" avec icône pour une meilleure expérience utilisateur
• Large plage de sélection d'années (100 ans dans le passé à 10 ans dans le futur)
• Personnalisable sans framework CSS
• Prend en compte la localisation pour l'affichage des mois en fonction de la langue (en,fr)
• Permet la personnalisation des couleurs avec les props (colorPrimary, colorSecondary, colorTertiary, colorBackgroundField, colorBorderField, colorIcon)
• Fermeture automatique lors d'un clic à l'extérieur
• Sélecteurs de mois et d'année par props

Compatibilité

• React : version 16.8.0 ou supérieure
• TypeScript : version 3.7 ou supérieure
• Navigateurs : Chrome, Firefox, Safari, Edge (dernières versions)

Installation

Installez le package via npm :

npm install @sriver/date-picker-react-v2

Utilisation

Importez et utilisez le composant dans votre application :

import React, { useState } from 'react';
import DatePicker from '@sriver/date-picker-react-v2';

function Example() {
	const [startDate, setStartDate] = useState(null);

	return (
		<DatePicker
			onChange={setStartDate}
			name="startDate"
			initialDate={new Date()}
			locale="fr-FR"
			colorPrimary="#4caf50"
			colorSecondary="#f1faee"
			colorTertiary="#a8dadc"
			yearRangeStart={150}
			yearRangeEnd={20}
			blurBackground={2}
			colorBackgroundSelect="#000000"
			placeholder="Sélectionner une date"
			placeholderColor="#333333"
			colorTextField="#333333"
			colorBackgroundField="#ffffff"
			colorBorderField="#d1d5db"
			colorIcon="#333333"
		/>
	);
}

Personnalisation

Le composant DatePicker peut être personnalisé avec les props suivantes :

| Prop | Type | Défaut | Description | | --------------------- | -------- | ----------------------- | ------------------------------------------------ | | onChange | Function | - | Fonction appelée lors de la sélection d'une date | | initialDate | Date | new Date() | Date initiale à afficher | | name | string | '' | Nom du champ de saisie | | locale | string | 'fr-FR' | Code de langue pour la localisation | | colorPrimary | string | '#4caf50' | Couleur principale du composant | | colorSecondary | string | '#ffffff' | Couleur secondaire (fond) du composant | | colorTertiary | string | '#333333' | Couleur tertiaire (texte) du composant | | yearRangeStart | number | 100 | Nombre d'années dans le passé pour la sélection | | yearRangeEnd | number | 10 | Nombre d'années dans le futur pour la sélection | | placeholder | string | 'Sélectionner une date' | Texte du placeholder pour le champ de saisie | | placeholderColor | string | '#333333' | Couleur du placeholder pour le champ de saisie | | colorBackgroundField | string | '#ffffff' | Couleur de fond du champ de saisie | | colorBorderField | string | '#d1d5db' | Couleur de bordure du champ de saisie | | colorIcon | string | '#333333' | Couleur de l'icône du bouton "Aujourd'hui" | | colorTextField | string | '#333333' | Couleur du texte du champ de saisie | | blurBackground | number | 2 | Transparence du fond du datepicker | | colorBackgroundSelect | string | '#000000' | Couleur de fond pour les listes déroulantes |

Dépannage

Le composant ne s'affiche pas correctement

• Assurez-vous d'avoir importé le composant correctement et que toutes les dépendances sont installées.

Les couleurs personnalisées ne s'appliquent pas

• Vérifiez que vous avez bien passé les props de couleur avec des valeurs hexadécimales valides.

Contribution

Les contributions sont les bienvenues ! Veuillez suivre ces étapes pour contribuer :

1. Forkez le projet : https://github.com/D-Sriver/Date-Picker-React/
2. Créez votre branche de fonctionnalité (git checkout -b feature/NouvellefonctionnaliteIncroyable)
3. Commitez vos changements (git commit -m 'Ajout de NouvellefonctionnaliteIncroyable')
4. Poussez vers la branche (git push origin feature/NouvellefonctionnaliteIncroyable)
5. Ouvrez une Pull Request

Changelog

Version 1.0.10

• Ajout de la prop blurBackground pour personnaliser la transparence du fond du datepicker
• Ajout de la prop colorBackgroundSelect pour personnaliser la couleur de fond des listes déroulantes du datepicker

Version 1.0.9

• Ajout de la prop colorTextField pour personnaliser la couleur du texte de l’input du datepicker

Version 1.0.7

• Ajout des props yearRangeStart et yearRangeEnd pour personnaliser la plage d'années sélectionnables
• Ajout de la prop placeholder pour personnaliser le placeholder du champ de saisie
• Ajout de la prop placeholderColor pour personnaliser la couleur du placeholder
• Ajout de la prop colorBackgroundField pour personnaliser la couleur de fond du champ de saisie
• Ajout de la prop colorBorderField pour personnaliser la couleur de bordure du champ de saisie
• Ajout de la prop colorIcon pour personnaliser la couleur de l'icône du bouton "Aujourd'hui"

Version 1.0.6

• Ajout de la personnalisation de la couleur avec les props

Version 1.0.5

• Changement de date par liste déroulante

Version 1.0.4

• Implémentation de la prévention de la propagation des événements

Version 1.0.3

• Ajout de la prop locale pour la localisation (EN ou FR)

Version 1.0.2

• Ajout du README.md

Version 1.0.0

• Création du datepicker

Version 1.0.7

• Ajout des props yearRangeStart et yearRangeEnd pour personnaliser la plage d'années sélectionnables

Licence

MIT