Styled ile Başlarken

Styled paketi, yerleşik CSS ile önceden stillendirilmiş tarih seçici bileşenleri sunar. Herhangi bir CSS çatısı gerektirmez.

Kurulum

npm install react-date-range-picker-styled

Kurulumdan sonra, CSS’i uygulama giriş noktanızda içe aktarın:

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

Hızlı Başlangıç

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

Neler Dahil

BileşenAçıklama
DatePickerAçılır takvim ile tek tarih seçimi
DateRangePickerÇift takvim ve hazır ayarlar ile tarih aralığı seçimi
DateTimePickerZaman kaydırma paneli ile tarih + saat seçimi
DateRangeTimePickerTarih aralığı + saat seçimi

Tüm bileşenler şunları destekler:

  • value / onChange ile kontrollü değer
  • Klavye ile gezinme
  • CSS değişkenleri aracılığıyla karanlık mod
  • 4 boyut: small, medium, large, x-large
  • Özelleştirme için Bileşik Bileşen API’si

TypeScript Tipleri

Tüm yapılandırma ve veri tipleri paketten yeniden dışa aktarılır — headless paketini ayrıca yüklemenize gerek yoktur:

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

Bu tipler şu durumlar için kullanışlıdır:

  • Locale — Özel yerel ayar geçersiz kılmaları (hafta günü adları, düğme etiketleri, tarih biçimlendirme)
  • DatePickerSize — size prop’unu tiplemek ("small" | "medium" | "large" | "x-large")
  • TimeConfig — Saat seçicinin hassasiyetini, biçimini ve adımlarını yapılandırma
  • DateRangePreset — DateRangePicker / DateRangeTimePicker için hazır ayarları tanımlama
  • CalendarMonth, DayProps — Bileşik Bileşenler ile özel render etme

Ayrıntılı tip tanımları için Headless Tipleri bölümüne bakın.

Sonraki Adımlar