Headless

Headless paket (react-date-range-picker-headless) stilsiz hook’lar ve context provider’lar sağlar. Tüm durum yönetimi, takvim mantığı, klavye navigasyonu ve erişilebilirlik özelliklerini içerir — ancak sıfır CSS, sıfır işaretleme dayatması sunar.

Kendi kullanıcı arayüzünüzü siz getirirsiniz.

Kurulum

npm install react-date-range-picker-headless

Headless Ne Zaman Kullanılır?

Kendi bileşen kütüphanesine sahip bir tasarım sisteminiz varsa
Her öğe üzerinde piksel düzeyinde mükemmel kontrol istiyorsanız
Belirli bir kullanım durumu için özel bir tarih seçici oluşturuyorsanız
Stilli paketler tarafından kapsanmayan bir CSS çatısı ile entegre olmak istiyorsanız

Kullanıma hazır stilli bileşenler istiyorsanız, bunun yerine Styled, Tailwind v4 veya Tailwind v3 belgelerine bakın.

Nasıl Çalışır?

Kullanım durumunuza göre bir hook seçin
Seçenekleri (value, onChange, config) geçin
Durum (state) ve işleyicileri (handler) geri alın
Geri dönen değerleri kullanarak kendi kullanıcı arayüzünüzü oluşturun

import { useState } from "react";
import { useDatePicker } from "react-date-range-picker-headless";
function MyDatePicker() {
  const [value, setValue] = useState<Date | null>(null);

  const {
    isOpen,
    calendar,
    getDayProps,
    displayValue,
    handleToggle,
    handleDateClick,
    handleConfirm,
    handlePrevMonth,
    handleNextMonth,
    locale,
  } = useDatePicker({ value, onChange: setValue });

  return (
    <div>
      <button onClick={handleToggle}>{displayValue || locale.placeholder}</button>
      {isOpen && (
        <div>
          <div>
            <button onClick={handlePrevMonth}>{locale.prevMonth}</button>
            <span>{locale.formatMonthYear(calendar.month)}</span>
            <button onClick={handleNextMonth}>{locale.nextMonth}</button>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)" }}>
            {calendar.weeks.flat().map((day, i) => {
              if (!day) return <span key={i} />;
              const props = getDayProps(day);
              return (
                <button
                  key={i}
                  onClick={() => handleDateClick(day)}
                  style={{
                    background: props.isSelected ? "#0ea5e9" : "transparent",
                    color: props.isDisabled ? "#ccc" : props.isToday ? "#0ea5e9" : "inherit",
                  }}
                >
                  {props.day}
                </button>
              );
            })}
          </div>
          <button onClick={handleConfirm}>{locale.confirm}</button>
        </div>
      )}
    </div>
  );
}

Mevcut Hook’lar

Hook	Kullanım Alanı
`useDatePicker`	Tek tarih seçimi
`useDateRangePicker`	Çift takvimli tarih aralığı seçimi
`useDateTimePicker`	Tarih + saat seçimi
`useDateRangeTimePicker`	Tarih aralığı + saat seçimi
`useTimePicker`	Yalnızca saat için kaydırma tekerleği
`useStandaloneTimePicker`	Açma/kapama davranışına sahip saat seçici

Sonraki Adımlar

Building Custom UI — Headless deseninin tam anlatımı
Hooks Reference — Ayrıntılı hook dokümantasyonu
Contexts — Bileşik bileşenler için provider deseni
Date Utilities — Headless’ten dışa aktarılan yardımcı fonksiyonlar