Schneller Tipp: Erstellen eines Date -Pickers in React

Diese Anleitung zeigt, wie Sie mit der react-datepicker -Bibliothek in Ihre React -Anwendung in Ihre React -Anwendung integriert werden, wodurch die Benutzerinteraktion für die Datumsauswahl in Formularen oder Kalendern verbessert wird.

Schritt 1: Projekt -Setup

Stellen Sie sicher, dass Sie ein React -Projekt haben. Wenn nicht, erstellen Sie eine mit npx create-react-app my-datepicker-app.

Schritt 2: Installieren Sie react-datepicker

installieren Sie die Bibliothek über Ihr Terminal:

<code class="language-bash">npm install react-datepicker</code>

Schritt 3: Import react-datepicker

Importieren Sie die erforderlichen Komponenten in Ihre React -Komponente:

<code class="language-javascript">import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";</code>

Schritt 4: Implementierung des Datumsauswahl

Hier erfahren Sie, wie Sie react-datepicker in einer funktionalen Komponente mit Hooks verwenden:

<code class="language-javascript">import React, { useState } from 'react';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

const MyDatePicker = () => {
  const [selectedDate, setSelectedDate] = useState(null);

  return (
    <datepicker selected onchange="{date"> setSelectedDate(date)}
    />
  );
};

export default MyDatePicker;</datepicker></code>

Und hier ist das Äquivalent für eine Klassenkomponente:

<code class="language-javascript">import React, { Component } from 'react';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

class MyDatePicker extends Component {
  state = { selectedDate: null };

  handleChange = date => {
    this.setState({ selectedDate: date });
  };

  render() {
    return (
      <datepicker selected onchange="{this.handleChange}"></datepicker>
    );
  }
}

export default MyDatePicker;</code>

Schritt 5: Anpassung

react-datepicker bietet umfangreiche Anpassungsoptionen:

• dateFormat: steuern Sie das Datumsformat (z. B. "yjyy/mm/dd").
• minDate, maxDate: Mindest- und maximal wählbare Daten einstellen.
• inline: Rendern Sie den Picker inline statt als Dropdown.
• withPortal: Verbesserung der Positionierung in komplexen Layouts.

Beispiel für die Anpassung:

<code class="language-javascript"><datepicker selected onchange="{date"> setSelectedDate(date)}
  dateFormat="MM/dd/yyyy"
  minDate={new Date()}
  maxDate={addDays(new Date(), 30)} //Example using date-fns to add 30 days
  inline
/></datepicker></code>

Denken Sie daran, date-fns zu installieren, wenn Sie addDays (npm install date-fns).

verwenden

Kritische Überlegungen:

• Browserkompatibilität: gründlich über verschiedene Browser testen.
• Reaktionsfähigkeit: Stellen Sie in verschiedenen Bildschirmgrößen eine optimale Anzeige sicher.
• Barrierefreiheit: Tastaturnavigation und ARIA -Attribute für die Zugänglichkeit implementieren.
• Internationalisierung: Unterstützung mehrerer Sprachen und Datumsformate.
• Zeitzonen: Zeitzonen für globale Benutzer korrekt.
• Leistung: Optimieren Sie die Leistung, insbesondere bei großen Datumsbereichen.
• Abhängigkeitsverwaltung: Halten Sie die Bibliothek für Sicherheit und neue Funktionen aktualisiert.

Wenn Sie diese Schritte befolgen und diese wichtigen Punkte berücksichtigen, können Sie einen benutzerfreundlichen Datumspicker mit react-datepicker effektiv in Ihre React-Anwendung integrieren. Denken Sie daran, die react-datepicker -Dokumentation für eine vollständige Liste von Optionen und erweiterten Nutzungen zu konsultieren.

Das obige ist der detaillierte Inhalt vonSchneller Tipp: Erstellen eines Date -Pickers in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!