Erste Schritte mit Tailwind CSS v3

Das Tailwind v3-Paket stellt Datumsauswahlkomponenten bereit, die mit Tailwind CSS v3-Dienstprogrammklassen gestaltet sind.

Installation

npm install react-date-range-picker-tailwind3

Tailwind-Konfiguration

Fügen Sie das Plugin und den Content-Pfad zu Ihrer Tailwind-Konfiguration hinzu:

tailwind.config.js
import { rdrpPlugin } from “react-date-range-picker-tailwind3/plugin”;


export default {
  content: [
    “./src/**/*.{js,ts,jsx,tsx}”,
    “./node_modules/react-date-range-picker-tailwind3/dist/**/*.{js,mjs}”,
  ],
  darkMode: “class”,
  plugins: [rdrpPlugin],
};

Schnellstart

import { useState } from "react";
import { DatePicker } from "react-date-range-picker-tailwind3";


function Basic() {
  const [value, setValue] = useState<Date | null>(null);


  return <DatePicker value={value} onChange={setValue} />;
}

Was ist im Lieferumfang enthalten?

ComponentDescription
DatePickerSingle date selection with popup calendar
DateRangePickerDate range selection with dual calendar and presets
DateTimePickerDate + time selection with time scroll panel
DateRangeTimePickerDate range + time selection

Alle Komponenten unterstützen:

  • Kontrollierter Wert mit „value“ / „onChange“.
  • Tastaturnavigation
  • Dunkler Modus über die Variante „dark:“.
  • 4 Größen: „klein“, „mittel“, „groß“, „x-groß“.
  • Compound Component API zur Anpassung

TypeScript-Typen

Alle Konfigurations- und Datentypen werden aus dem Paket erneut exportiert – eine separate Installation des Headless-Pakets ist nicht erforderlich:

import type {
  Locale,
  DatePickerSize,
  TimeConfig,
  MinuteStep,
  SecondStep,
  TimePrecision,
  HourFormat,
  TimePeriod,
  CaptionLayout,
  WeekDay,
  DateRangePreset,
  CalendarMonth,
  DayProps,
} from "react-date-range-picker-tailwind3";

Diese Typen sind nützlich für:

  • `Gebietsschema – Benutzerdefinierte Gebietsschemaüberschreibungen (Wochentagsnamen, Schaltflächenbeschriftungen, Datumsformatierung)
  • DatePickerSize – Eingabe der Requisite „Größe“ („klein“ | „mittel“ | „groß“ | „x-groß“)
  • TimeConfig – Konfigurieren der Genauigkeit, des Formats und der Schritte der Zeitauswahl
  • DateRangePreset – Definieren von Voreinstellungen für DateRangePicker / DateRangeTimePicker
  • CalendarMonth, DayProps – Benutzerdefiniertes Rendering mit zusammengesetzten Komponenten

Detaillierte Typdefinitionen finden Sie unter Headless-Typen.

Nächste Schritte