react datepicker
7.5.0
Un composant DatePicker simple et réutilisable pour React (Demo)
Le package peut être installé via NPM:
npm install react-datepicker --save
Ou via le fil:
yarn add react-datepicker
Vous devrez installer React et Propypes séparément car ces dépendances ne sont pas incluses dans le package. Si vous avez besoin d'utiliser un paramètre régional autre que l'EN-US par défaut, vous devrez également l'importer dans votre projet à partir de Date-FNS (voir la section de localisation ci-dessous). Vous trouverez ci-dessous un exemple simple de la façon d'utiliser le DatePicker dans une vue React. Vous devrez également exiger le fichier CSS de ce package (ou fournir le vôtre). L'exemple ci-dessous montre comment inclure le CSS à partir de ce package si votre système de construction prend en charge les fichiers CSS (WebPack est celui qui le fait).
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 (
< DatePicker selected = { startDate } onChange = { ( date ) => setStartDate ( date ) } />
) ;
} ; L'utilisation la plus élémentaire du DatePicker peut être décrite avec:
< DatePicker selected = { startdate } onChange = { ( date ) => setStartDate ( date ) } /> Vous pouvez utiliser le gestionnaire d'événements onSelect qui tire chaque fois qu'une date de calendrier a été sélectionnée
< DatePicker
selected = { date }
onSelect = { handleDateSelect } //when day is clicked
onChange = { handleDateChange } //only when value has changed
/> Le gestionnaire onClickOutside peut être utile pour fermer DatePicker en mode inline
Voir ici pour une liste complète d'accessoires qui peuvent être transmis au composant. Des exemples sont donnés sur le site Web principal.
Vous pouvez également inclure un cueilleur de temps en ajoutant l'hélice ShowtimeSelect
< DatePicker
selected = { date }
onChange = { handleDateChange }
showTimeSelect
dateFormat = "Pp"
/>Les temps seront affichés à des intervalles de 30 minutes par défaut (par défaut configurable via TimeIntervals Prop)
Plus d'exemples sur la façon d'utiliser le sélecteur de temps sont donnés sur le site Web principal
Le cueilleur de date s'appuie sur l'internationalisation des Date-FNS pour localiser ses composants d'affichage. Par défaut, le sélecteur de dates utilisera l'ensemble des paramètres mondiaux, qui est l'anglais. Sont fournis 3 méthodes d'assistance pour définir les paramètres régionaux:
import { registerLocale , setDefaultLocale } from "react-datepicker" ;
import { es } from 'date-fns/locale/es' ;
registerLocale ( 'es' , es )
< DatePicker
locale = "es"
/ >Les lieux peuvent être modifiés de la manière suivante:
setDefaultLocale('es'); Nous essayons toujours de rester compatibles avec la dernière version de React. Nous ne pouvons pas prendre en charge toutes les anciennes versions de React.
Dernières versions compatibles:
Jusqu'à la version 1.8.0, ce package utilisait le moment.js. Démarrage v2.0.0, nous sommes passés à l'utilisation date-fns , qui utilise des objets de date natifs, pour réduire la taille du package. Si vous passez de 1,8.0 à 2.0.0 ou supérieur, veuillez consulter l'exemple mis à jour ci-dessus de la consultation du site d'exemples pour les exemples à jour.
Le cueilleur de date est compatible avec les dernières versions de Chrome, Firefox et IE10 +.
Malheureusement, il est difficile de prendre en charge les navigateurs hérités tout en conservant notre capacité à développer de nouvelles fonctionnalités à l'avenir. Pour le support IE9, il est connu que le polyfill de liste de classe est nécessaire, mais cela peut changer ou se casser à tout moment dans le futur.
La branche main contient la dernière version du composant DatePicker.
Pour commencer le développement local:
yarn link à partir du projet Rootcd docs-site && yarn link react-datepickeryarn install à partir de la racine du projetyarn build à partir de la racine du projetyarn start de la racine du projetLa dernière étape démarre l'application de documentation comme un serveur Web simple sur http: // localhost: 3000.
Vous pouvez exécuter yarn test pour exécuter la suite de tests et les liners. Pour vous aider à développer le composant, nous avons mis en place des tests qui couvrent la fonctionnalité de base (peuvent être trouvés dans /tests ). Même si nous sommes de grands fans de tests, cela ne couvre qu'un petit morceau du composant. Nous vous recommandons fortement d'ajouter des tests lorsque vous ajoutez de nouvelles fonctionnalités.
Veuillez vous référer au fichier CONTRIBUTING.md pour plus de détails sur la configuration.
Les exemples sont hébergés dans le dossier DOCS et sont exécutés dans l'application simple qui charge le DatePicker. Pour étendre les exemples avec un nouvel exemple, vous pouvez simplement dupliquer l'un des exemples existants et modifier les propriétés uniques de votre exemple.
Copyright (C) 2014-2024 Hackerone Inc. et contributeurs individuels. Licencié sous licence MIT, voir Licence pour la licence complète.
