Tailwind CSS v3 ile Başlarken

Tailwind v3 paketi, Tailwind CSS v3 yardımcı sınıflarıyla stillendirilmiş tarih seçici bileşenleri sağlar.

Kurulum

npm install react-date-range-picker-tailwind3

Tailwind Yapılandırması

Tailwind yapılandırmanıza plugin ve content yolunu ekleyin:

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

Hızlı Başlangıç

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

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
  • dark: varyantı ile 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-tailwind3";

Bu tipler şunlar 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 tipleme ("small" | "medium" | "large" | "x-large")
  • TimeConfig — Zaman seçici 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 bkz. Headless Tipleri.

Sonraki Adımlar