react datepicker
7.5.0
Eine einfache und wiederverwendbare Datumspunktkomponente für React (Demo)
Das Paket kann über NPM installiert werden:
npm install react-datepicker --save
Oder über Garn:
yarn add react-datepicker
Sie müssen React und ProfTypes separat installieren, da diese Abhängigkeiten nicht im Paket enthalten sind. Wenn Sie ein anderes Gebietsschema als die Standard-EN-US verwenden müssen, müssen Sie dies auch in Ihr Projekt von Datum-Fns importieren (siehe Abschnitt Lokalisierung unten). Nachfolgend finden Sie ein einfaches Beispiel für die Verwendung des Datumsspitzers in einer React -Ansicht. Sie müssen auch die CSS -Datei aus diesem Paket benötigen (oder Ihre eigene angeben). Das folgende Beispiel zeigt, wie das CSS aus diesem Paket einbezieht, wenn Ihr Build -System die erforderliche CSS -Dateien unterstützt (WebPack ist eine, die dies tut).
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 ) } />
) ;
} ; Die grundlegendste Verwendung des DatePickers kann beschrieben werden mit:
< DatePicker selected = { startdate } onChange = { ( date ) => setStartDate ( date ) } /> Sie können onSelect -Event -Handler verwenden, der jedes Mal ausgewählt wird, wenn ein Kalenderdatum ausgewählt wurde
< DatePicker
selected = { date }
onSelect = { handleDateSelect } //when day is clicked
onChange = { handleDateChange } //only when value has changed
/> onClickOutside -Handler kann nützlich sein, um das Datumspunkt im inline -Modus zu schließen
Hier finden Sie eine vollständige Liste von Requisiten, die an die Komponente übergeben werden können. Beispiele finden Sie auf der Hauptwebsite.
Sie können auch einen Zeitpicker einfügen, indem Sie die SendimeSelect -Requisite hinzufügen
< DatePicker
selected = { date }
onChange = { handleDateChange }
showTimeSelect
dateFormat = "Pp"
/>Die Zeiten werden standardmäßig in Intervallen von 30 Minuten angezeigt (standardmäßig konfigurierbar über TimeIntervals Prop)
Weitere Beispiele für die Verwendung des Zeitpickers finden Sie auf der Hauptwebsite
Der Datumspicker stützt sich auf die Internationalisierung der Datums-FNS, um seine Anzeigekomponenten zu lokalisieren. Standardmäßig verwendet der Datumspicker das Gebietsschema weltweit, das Englisch ist. Stellen Sie sich 3 Helfer -Methoden zur Festlegung des Gebietsschemas aus:
import { registerLocale , setDefaultLocale } from "react-datepicker" ;
import { es } from 'date-fns/locale/es' ;
registerLocale ( 'es' , es )
< DatePicker
locale = "es"
/ >Orte können auf folgende Weise geändert werden:
setDefaultLocale('es'); Wir versuchen immer, mit der neuesten Version von React kompatibel zu bleiben. Wir können nicht alle älteren Versionen von React unterstützen.
Neueste kompatible Versionen:
Bis zur Version 1.8.0 verwendete dieses Paket moment.js. Starten von V2.0.0 haben wir auf die Verwendung date-fns umgestellt, die native Date-Objekte verwendet, um die Größe des Pakets zu reduzieren. Wenn Sie von 1.8.0 auf 2.0.0 oder höher wechseln, finden Sie in der oben genannten aktualisierten Beispiele die Beispiele für aktuelle Beispiele.
Der Date Picker ist mit den neuesten Versionen von Chrome, Firefox und IE10+kompatibel.
Leider ist es schwierig, ältere Browser zu unterstützen und gleichzeitig unsere Fähigkeit beizubehalten, in Zukunft neue Funktionen zu entwickeln. Für IE9 -Unterstützung ist bekannt, dass die Klassenliste Polyfill benötigt wird, dies kann sich jedoch zu jedem Zeitpunkt in der Zukunft ändern oder brechen.
Der main enthält die neueste Version der DatePicker -Komponente.
Lokale Entwicklung beginnen:
yarn link von Project Root auscd docs-site && yarn link react-datepickeryarn install aus dem Projektstamm ausyarn build aus Projektwurzel ausyarn startDer letzte Schritt beginnt die Dokumentations -App als einfacher Webserver unter http: // localhost: 3000.
Sie können yarn test ausführen, um die Testsuite und die Linter auszuführen. Um die Komponente zu entwickeln, haben wir einige Tests eingerichtet, die die grundlegende Funktionalität abdecken (können in /tests gefunden werden). Obwohl wir großen Testfans sind, deckt dies nur ein kleines Stück der Komponente ab. Wir empfehlen Ihnen dringend, Tests hinzuzufügen, wenn Sie neue Funktionen hinzufügen.
Weitere Informationen zum Einrichten finden Sie in der Datei bei der Datei CONTRIBUTING.md .
Die Beispiele werden im DOCS -Ordner gehostet und in der einfachen App ausgeführt, die den Datumspicker lädt. Um die Beispiele mit einem neuen Beispiel zu erweitern, können Sie einfach eines der vorhandenen Beispiele duplizieren und die eindeutigen Eigenschaften Ihres Beispiels ändern.
Copyright (C) 2014-2024 Hackerone Inc. und einzelne Mitwirkende. In der MIT -Lizenz lizenziert, siehe Lizenz für die vollständige Lizenz.
