Pierwsze kroki z CSS Tailwind v3

Pakiet Tailwind v3 zawiera komponenty selektora dat stylizowane na klasy narzędzi Tailwind CSS v3.

Instalacja

npm install react-date-range-picker-tailwind3

Konfiguracja Tailwind

Dodaj plugin i ścieżkę content do konfiguracji Tailwind:

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],
};

Szybki start

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} />;
}

Co jest wliczone w cenę

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

Wszystkie komponenty obsługują:

  • Wartość kontrolowana za pomocą value / onChange
  • Nawigacja klawiaturowa
  • Tryb ciemny poprzez wariant „dark:”.
  • 4 rozmiary: „mały”, „średni”, „duży”, „x-duży”
  • Interfejs API komponentów złożonych do dostosowywania

Typy TypeScriptu

Cała konfiguracja i typy danych są ponownie eksportowane z pakietu — nie ma potrzeby osobnej instalacji pakietu headless:

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

Te typy są przydatne do:

  • Locale — Niestandardowe zastąpienie ustawień regionalnych (nazwy dni tygodnia, etykiety przycisków, formatowanie daty)
  • DatePickerSize — Wpisanie właściwości size ("mały" | "średni" | "duży" | "x-duży")
  • TimeConfig — Konfigurowanie precyzji, formatu i kroków selektora czasu
  • DateRangePreset — Definiowanie ustawień wstępnych dla DateRangePicker / DateRangeTimePicker
  • CalendarMonth, DayProps — niestandardowe renderowanie za pomocą komponentów złożonych

Szczegółowe definicje typów znajdziesz w Typach bezgłowych.

Następne kroki