Einführung

Oft stoßen wir auf verschiedene Foren und Websites, in denen wir unser Geburtsdatum eingeben oder einen Termin für einen Termin aus irgendeinem Grund auswählen müssen, und schon erscheint direkt vor unseren Augen ein kalenderähnliches Symbol. Wie und woher kommt das? Es muss sich um einen spezifischen und dynamisch betriebenen Kalender handeln, der die von uns gewünschten Daten intelligent erkennt und uns präsentiert. Hier kommt React Date Picker ins Spiel. In diesem Tutorial lernen wir alle diese Methoden von Grund auf bis zum fortgeschrittenen Niveau, wie sie in React implementiert werden und wie sie angepasst werden können. Fahren wir mit der Diskussion fort.

Der Reagieren Date Picker ist eine hilfreiche und umfangreiche Komponente, die zum Anzeigen von Daten im Kalenderdialogformat verwendet wird. Heutzutage stehen in der Regel viele Optionen zur Datumsauswahl zur Verfügung. Sie alle können unterschiedliche technische Aspekte und Anwendungen haben. In diesem Tutorial befassen wir uns speziell mit React Date Picker. Dafür benötigen wir ein Paket, das Uhrzeit und Datum anzeigt. Zum besseren Verständnis werden wir eine Anwendung erstellen, die uns hilft, React Date Picker besser zu verstehen. Aber vorher installieren wir es wie in den folgenden Schritten gezeigt.

Installation

Um Date Picker für unsere React-Anwendung zu installieren, muss Node.js auf unserem System vorinstalliert sein. Obwohl es nicht wichtig ist, immer über Knotenmodule zu verfügen, wird dringend empfohlen, diese herunterzuladen, damit alle Abhängigkeiten effizient bedient werden. Daher wird unten der Befehl zum Installieren von React Date Picker angegeben.

Das Paket kann über installiert werden npm:

zähle verschiedene SQL

 npm install react-datepicker --save 

Oder über Garn:

 yarn add react-datepicker 

Möglicherweise muss React und seine Proptypes einzeln installiert werden, da es ohne diese Abhängigkeiten nicht möglich ist, einen React Date Picker zu erstellen. Außerdem müssen wir möglicherweise CSS aus den externen Paketen verwenden, damit die Datumsauswahl optisch gut aussieht. Um mit unserer Anwendung zu beginnen, müssen wir den React Date Picker in unsere Hauptdatei importieren und ihn in der React-Ansicht ständig überprüfen.

 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 ( setStartDate(date)} /> ); }; 

React Datepicker-Beispiel

Unter der Annahme, dass unser System mit allen Installationsanforderungen und Abhängigkeiten konfiguriert ist, lernen wir, wie man eine React-Anwendung von Grund auf erstellt. Diese Implementierung basiert vollständig auf der Anwendung von React Datepicker.

In der obigen Diskussion gehen wir davon aus, dass wir React und PropTypes unabhängig voneinander installiert haben, da diese Abhängigkeiten nicht im Paket selbst enthalten sind. Um mit den Methoden zum Erstellen unserer Anwendung fortzufahren, müssen wir die unten aufgeführten Schritte befolgen.

 npx create-react-app react-datepicker-app 

Bewegen Sie sich mit dem Befehl in den Projektordner.

 cd react-datepicker-app 

Starten Sie die React-App.

VLC-Download auf YouTube

 npm start 

Nachdem die Node-Engine gestartet wurde, können wir unsere Anwendung über die Portnummer 3000 des Localhosts überprüfen. Außerdem müssen wir den unten angegebenen Codeausschnitt in unsere app.js-Datei einfügen, damit wichtige Komponenten für React Date Picker in unsere Datei importiert werden.

 // app.js import React, { Component } from 'react'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; import 'bootstrap/dist/css/bootstrap.min.css'; class App extends Component { constructor (props) { super(props) this.state = { startDate: new Date() }; this.handleChange = this.handleChange.bind(this); this.onFormSubmit = this.onFormSubmit.bind(this); } handleChange(date) { this.setState({ startDate: date }) } onFormSubmit(e) { e.preventDefault(); console.log(this.state.startDate) } render() { return ( Show Date ); } } export default App; 

Unsere Bewerbung würde nun etwa so aussehen.

Im obigen Beispielcode haben wir zuerst die Pakete von importiert Datumsauswahl Und Bootstrap in der React-Vorlage. Dann haben wir es definiert, um das zu binden Griffwechsel und reichen Sie die Komponente im Veranstaltungskalender ein. Diese Ereignisse werden automatisch ausgelöst, wenn ein Benutzer die Eingabewerte des Datepickers übermittelt oder ändert. Später haben wir den Datepicker-Formularstatus mit einem neuen initialisiert Datum() Objekt innerhalb des Konstruktors. Zuletzt haben wir den Datepicker mit der folgenden Direktive initiiert, um ihm einige Eigenschaften hinzuzufügen.

Wir können die Ausgabe in Form eines kalenderzentrierten Datumsauswahlformats visualisieren. Der oben angegebene Datepicker fügt den oben gezeigten React-Anwendungskomponenten benutzerdefinierte Eigenschaften hinzu. Es ermöglicht uns, die Daten in der Form auszuwählen Monate, Tage, Und Jahre .

Darüber hinaus stehen uns zum Anpassen des Datumswählers verschiedene andere Methoden zur Verfügung, sei es das Färben der Komponenten oder das intelligente Anwenden der Funktionen zum Erfassen der Daten. Wir können sie auch einfach anpassen, wenn wir HTML- und CSS-Komponenten haben, die sich auf die Datei app.js beziehen.

Lokalisierung des Datepickers

Ein weiteres Beispiel, das wir kennenlernen werden, ist die Lokalisierung des Datepickers. Die Datumsauswahl, die wir erstellen werden, hängt stark von der Internationalisierung von date-fns ab. Dies liegt daran, dass es zur Lokalisierung der angezeigten Elemente verwendet wird. Wenn wir ein anderes Gebietsschema als die Standardeinstellung „en-US“ verwenden müssen, müssen wir es möglicherweise aus date-fns in das Projekt importieren.

Darüber hinaus ist Englisch das Standardgebietsschema, das aus drei Methoden zum Festlegen des Gebietsschemas besteht.

lokal registrieren (Zeichenfolge, Objekt): Lädt ein importiertes Gebietsschemaobjekt aus date-fns.

Legen Sie das Standardgebietsschema fest (string): legt ein registriertes Gebietsschema als Standard für alle Datepicker-Instanzen fest.

Java-Arraylist-Sortierung

getDefaultLocale: gibt eine Zeichenfolge zurück, die das aktuell eingestellte Standardgebietsschema zeigt.

Mit dem folgenden Codeausschnitt können wir diese Dienste in das Gebietsschema der Kalenderansicht importieren.

 import { registerLocale, setDefaultLocale } from 'react-datepicker'; import es from 'date-fns/locale/es'; registerLocale('es', es) 

Beim Importieren und Speichern dieser Gebietsschemadienste in unserer app.js-Datei sieht unsere Anwendung folgendermaßen aus.

In einem anderen Fall müssen wir zum Ändern der Gebietsschemas in erster Linie den Gebietsschemacode ändern oder die Internationalisierung der Datums-FNs verwenden, damit die Codeüberprüfung unterstützt werden kann.

 setDefaultLocale('es') 

Festlegen des Kalenderdatumsbereichs im Datepicker.

Wir werden lernen, wie man die Range-Funktionalität mit implementiert das Mindestdatum Und maxDate-Eigenschaft in diesem Schritt. Dazu importieren wir die addDays AP Ich aus dem date-fns Bibliothek an den Anfang unserer React-Komponente. Es wird die spezifische Anzahl von Tagen zum zugewiesenen Datum hinzugefügt, um den Bereich festzulegen.

 import addDays from 'date-fns/addDays' 

Der addDays() Die Methode benötigt normalerweise zwei Parameter:

Datum: Das Datum, das aktualisiert werden muss.

Menge: Die erhebliche Anzahl an Tagen musste einbezogen werden.

Wir können im React-Kalender ganz einfach den Datumsbereich vom aktuellen bis zu den nächsten sieben Tagen festlegen. Dies kann verstanden werden, wenn wir das implementieren Mindestdatum Und maxDate Methoden im unten gezeigten Beispielcode.

 render() { return ( Show Date ); } 

Der vollständige Codeausschnitt für unsere Anwendung nach der Implementierung aller oben genannten Schritte wird unten angezeigt.

 import React, { Component } from 'react'; import DatePicker from 'react-datepicker'; import addDays from 'date-fns/addDays' import 'react-datepicker/dist/react-datepicker.css'; import 'bootstrap/dist/css/bootstrap.min.css'; class App extends Component { constructor (props) { super(props) this.state = { startDate: new Date() }; this.handleChange = this.handleChange.bind(this); this.onFormSubmit = this.onFormSubmit.bind(this); } handleChange(date) { this.setState({ startDate: date }) } onFormSubmit(e) { e.preventDefault(); console.log(this.state.startDate) } render() { return ( Show Date ); } } export default App; 

Im obigen Beispiel-Snippet haben wir es erstellt Mindestdatum als Check-in-Komponente, und der Benutzer kann nur das Datum vor dem heutigen Tag auswählen. Wir haben den Datumswert für die Check-out-Komponente verwendet, was bedeutet, dass der Benutzer kein Datum vor dem Check-in-Datum auswählen kann.

Im nächsten Schritt speichern wir den Wert unseres Status und definieren, wie jedes Handle funktioniert. Die Hauptidee besteht darin, dies zu implementieren, indem einfach für jeden ein Status erstellt wird einchecken Und Kasse Datum mit den definierten Werten und speichert die Daten dort. Der einzige Unterschied liegt in der Mindestdatum Methode der Check-out-Komponente, da sie ausschließlich von der Check-in-Komponente abhängig ist. Damit sichergestellt ist, dass alles in Bezug auf Werte festgelegt ist, nicht vorher und nicht danach, können wir nun ganz einfach die Daten auswählen und den Check-out definieren.

Konvertieren Sie NFA in DFA

Abschluss

In diesem Tutorial konnten wir eine einfache Schritt-für-Schritt-Anleitung zum Erstellen einer benutzerdefinierten React Datepicker-Komponente befolgen, die problemlos als Ersatz für die native Komponente verwendet werden kann HTML5-Datumsauswahl Eingabeelemente. Wir haben gelernt, wie man die React-Anwendung nach Priorität einrichtet, da das Rendern der React-Komponenten für Anfänger komplex erscheinen könnte, weshalb das Einrichten von Abhängigkeiten von Anfängern immer bevorzugt wird. Wir sind auch auf verschiedene Beispiele gestoßen, um ein glasklares Konzept für die Verwendung der Komponenten von Datepicker in unserer Anwendung zu entwickeln. Wir haben auch den Prozess der Lokalisierung des Datumswählers kennengelernt, sodass der Datumsauswahlprozess kein Problem darstellt, wenn sie für eine bestimmte Dauer im Kalender ausgewählt werden.

Obwohl der in diesem Tutorial erstellte benutzerdefinierte Datepicker wie erwartet funktioniert, erfüllt er nicht alle erweiterten Anforderungen für ein Datepicker-Element. Es können weitere Verbesserungen vorgenommen werden, z. B. die Implementierung von Max und Min über Requisiten, die Umstellung des Eingabetyps von Text auf Datum und die Einrichtung einer besseren Verbesserung der Barrierefreiheit. Wir können auch Designmethoden für den Datepicker entwickeln, den wir in diesem Tutorial implementiert haben, indem wir Bootstrap-Pakete importieren und benutzerdefinierte Stile und Hovering-Eigenschaften hinzufügen, damit er besser aussieht.