Pierwsze kroki ze Styled

Pakiet styled dostarcza gotowe komponenty do wyboru daty z wbudowanym CSS. Nie jest wymagany żaden framework CSS.

Instalacja

npm install react-date-range-picker-styled

Po instalacji zaimportuj CSS w punkcie wejściowym swojej aplikacji:

import "react-date-range-picker-styled/rdrp-styles.css";

Szybki start

import { useState } from "react";
import { DatePicker } from "react-date-range-picker-styled";
import "react-date-range-picker-styled/rdrp-styles.css";


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


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

Co zawiera pakiet

KomponentOpis
DatePickerWybór pojedynczej daty z wyskakującym kalendarzem
DateRangePickerWybór zakresu dat z podwójnym kalendarzem i presetami
DateTimePickerWybór daty i czasu z panelem do przewijania czasu
DateRangeTimePickerWybór zakresu dat i czasu

Wszystkie komponenty wspierają:

  • Kontrolowaną wartość za pomocą value / onChange
  • Nawigację za pomocą klawiatury
  • Tryb ciemny za pomocą zmiennych CSS
  • 4 rozmiary: small, medium, large, x-large
  • API komponentów złożonych (Compound Component) do personalizacji

Typy TypeScript

Wszystkie typy konfiguracji i danych są reeksportowane 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-styled";

Te typy są przydatne do:

  • Locale — Niestandardowe ustawienia regionalne (nazwy dni tygodnia, etykiety przycisków, formatowanie daty)
  • DatePickerSize — Typowanie propa size ("small" | "medium" | "large" | "x-large")
  • TimeConfig — Konfiguracja precyzji, formatu i kroków wyboru czasu
  • DateRangePreset — Definiowanie presetów dla DateRangePicker / DateRangeTimePicker
  • CalendarMonth, DayProps — Niestandardowe renderowanie za pomocą komponentów złożonych

Zobacz Typy Headless aby uzyskać szczegółowe definicje typów.

Następne kroki