ReactJS - Datumswähler: Ein Anfängerleitfaden

Hallo, ambitionierte Entwickler! Heute begeben wir uns auf eine aufregende Reise in die Welt der ReactJS Datumswähler. Machen Sie sich keine Sorgen, wenn Sie noch nie kodiert haben – ich werde Ihr freundlicher Guide sein und alles Schritt für Schritt erklären. Am Ende dieses Tutorials werden Sie in der Lage sein, einen schicken Datumswähler zu Ihren React-Anwendungen hinzuzufügen. Lassen Sie uns eintauchen!

Was ist ein Datumswähler?

Bevor wir mit dem Coden beginnen, lassen Sie uns verstehen, was ein Datumswähler ist. Stellen Sie sich vor, Sie buchen einen Flug online. Sie müssen Ihr Reiseziel auswählen, oder? Der Kalender, der aufpoppt und es Ihnen ermöglicht, ein Datum auszuwählen, das ist ein Datumswähler! Es ist ein Benutzeroberflächenelement, das das Auswählen von Daten einfach und intuitiv macht.

Warum einen Datumswähler in React verwenden?

React dreht sich alles um das Erstellen interaktiver Benutzeroberflächen, und ein Datumswähler ist ein perfektes Beispiel dafür. Er verbessert das Benutzererlebnis, indem er einen visuellen Kalender für die Datenauswahl bietet, Fehler reduziert und Ihre App benutzerfreundlicher macht.

Erste Schritte mit dem React Datumswähler

Um einen Datumswähler in React zu verwenden, werden wir eine beliebte Bibliothek namens react-datepicker verwenden. Diese Bibliothek bietet ein anpassungsfähiges Komponente, das wir problemlos in unsere React-Anwendungen integrieren können.

Schritt 1: Einrichten Ihres React-Projekts

Zuerst erstellen wir ein neues React-Projekt. Wenn Sie bereits eines haben, können Sie diesen Schritt überspringen.

npx create-react-app my-datepicker-app
cd my-datepicker-app

Dieser Befehl erstellt ein neues React-Projekt mit dem Namen "my-datepicker-app" und wechselt in das Projektverzeichnis.

Schritt 2: Installieren der Datumswähler-Bibliothek

Nun installieren wir die react-datepicker Bibliothek:

npm install react-datepicker

Dieser Befehl fügt die Datumswähler-Bibliothek zu Ihrem Projekt hinzu.

Verwendung des Datumswähler-Komponenten

Nun kommen wir zum spannenden Teil – die tatsächliche Verwendung des Datumswählers in unserer App!

Schritt 1: Einfügen der notwendigen Module

Öffnen Sie Ihre src/App.js Datei und fügen Sie diese Importanweisungen an der Oberseite hinzu:

import React, { useState } from 'react';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

Hier ist, was jede Zeile macht:

• Wir importieren useState von React, um den Zustand unseres Komponenten zu verwalten.
• Wir importieren das DatePicker Komponente aus der installierten Bibliothek.
• Wir importieren die CSS-Datei, um unseren Datumswähler zu stylen.

Schritt 2: Erstellen eines funktionalen Komponenten

Lassen Sie uns einen funktionalen Komponenten erstellen, der unseren Datumswähler verwendet:

function App() {
const [selectedDate, setSelectedDate] = useState(null);

return (
<div className="App">
<h1>Mein cooler Datumswähler</h1>
<DatePicker
selected={selectedDate}
onChange={date => setSelectedDate(date)}
dateFormat="dd/MM/yyyy"
placeholderText="Wählen Sie ein Datum aus"
/>
<p>Ausgewähltes Datum: {selectedDate ? selectedDate.toDateString() : "Kein Datum ausgewählt"}</p>
</div>
);
}

Lassen Sie uns das zusammenbrechen:

1. Wir verwenden useState, um eine Zustandsvariablen selectedDate und eine Funktion setSelectedDate zu erstellen, um sie zu aktualisieren.
2. Wir rendern ein DatePicker Komponente mit mehreren Props:

• selected: Das derzeit ausgewählte Datum
• onChange: Eine Funktion, die aufgerufen wird, wenn ein neues Datum ausgewählt wird
• dateFormat: Wie das Datum angezeigt werden soll
• placeholderText: Was angezeigt werden soll, wenn kein Datum ausgewählt ist

3. Wir zeigen das ausgewählte Datum unter dem Picker an, oder eine Nachricht, wenn kein Datum ausgewählt ist.

Schritt 3: Anpassen des Datumswählers

Eine der großartigen Eigenschaften von react-datepicker ist, wie anpassungsfähig es ist. Lassen Sie uns einige Möglichkeiten anschauen, wie wir unseren Datumswähler anpassen können:

function App() {
const [selectedDate, setSelectedDate] = useState(null);

return (
<div className="App">
<h1>Mein angepasster Datumswähler</h1>
<DatePicker
selected={selectedDate}
onChange={date => setSelectedDate(date)}
dateFormat="dd/MM/yyyy"
minDate={new Date()}
filterDate={date => date.getDay() !== 6 && date.getDay() !== 0}
showYearDropdown
scrollableYearDropdown
/>
</div>
);
}

In diesem Beispiel:

• minDate={new Date()} stellt sicher, dass vergangene Daten nicht ausgewählt werden können.
• filterDate wird verwendet, um Wochenenden (Samstag und Sonntag) zu deaktivieren.
• showYearDropdown und scrollableYearDropdown fügen eine Dropdown-Liste hinzu, um Jahre schnell zu wechseln.

Datumswähler-Methoden

Die react-datepicker Bibliothek bietet mehrere nützliche Methoden. Hier ist eine Tabelle, die einige davon zusammenfasst:

Methode	Beschreibung
setOpen(boolean)	Setzt manuell den geöffneten Zustand des Kalenders.
setFocus()	Setzt manuell den Fokus auf die Eingabe.
handleCalendarClose()	Schließt den Kalender manuell.
handleCalendarOpen()	Öffnet den Kalender manuell.

Sie können diese Methoden verwenden, indem Sie ein Ref zum DatePicker Komponenten erstellen:

const datePickerRef = useRef(null);

// Später in Ihrem JSX
<DatePicker ref={datePickerRef} />

// Um eine Methode zu verwenden
datePickerRef.current.setOpen(true);

Fazit

Glückwunsch! Sie haben gerade gelernt, wie man einen Datumswähler in React implementiert und anpasst. Dieses leistungsstarke Werkzeug wird die Datenauswahl in Ihren Apps für Benutzer zum Kinderspiel machen.

Erinnern Sie sich daran, dass der Schlüssel zum Beherrschen von React (oder jedem anderen Programmierkonzept) die Übung ist. Versuchen Sie, Datumswähler zu Ihren Projekten hinzuzufügen, experimentieren Sie mit verschiedenen Props und fürchten Sie sich nicht, sich in die Dokumentation für erweiterte Funktionen zu vertiefen.

Frohes Coden und möge Ihre Daten stets perfekt ausgewählt sein! ?️?‍?

Credits: Image by storyset