Özel Tetikleyici

Varsayılan tetikleyiciyi bir render prop kullanarak kendi elemanınızla değiştirin. Trigger bileşeni, durumu ve geri aramaları alan bir fonksiyon alt bileşeni kabul eder, bu da herhangi bir özel düğme veya girdi oluşturmanıza olanak tanır.

import { useState } from "react";
import { DatePicker } from "react-date-range-picker-tailwind3";

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

  return (
    <DatePicker.Root value={value} onChange={setValue}>
      <DatePicker.Trigger>
        {({ displayValue, isOpen, onToggle, triggerRef }) => (
          <button
            ref={triggerRef as React.Ref<HTMLButtonElement>}
            onClick={onToggle}
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 8,
              padding: "8px 12px",
              border: `1px solid ${isOpen ? "#3b82f6" : "#d1d5db"}`,
              borderRadius: 6,
              background: isOpen ? "#eff6ff" : "#fff",
              cursor: "pointer",
              fontSize: 14,
            }}
          >
            <span style={{ fontSize: 18 }}>{"\uD83D\uDCC5"}</span>
            <span>{displayValue || "Pick a date"}</span>
          </button>
        )}
      </DatePicker.Trigger>
      <DatePicker.Content>
        <DatePicker.Header>
          <DatePicker.PrevButton />
          <DatePicker.Title />
          <DatePicker.NextButton />
        </DatePicker.Header>
        <DatePicker.Grid />
        <DatePicker.Footer>
          <DatePicker.ClearButton />
          <DatePicker.CancelButton />
          <DatePicker.ConfirmButton />
        </DatePicker.Footer>
      </DatePicker.Content>
    </DatePicker.Root>
  );
}

Tetikleyici Render Props

Prop	Tür	Açıklama
`displayValue`	`string`	Biçimlendirilmiş seçili tarih
`placeholder`	`string`	Yer tutucu metni
`hasValue`	`boolean`	Bir tarihin seçili olup olmadığı
`isOpen`	`boolean`	Açılır pencerenin açık olup olmadığı
`onToggle`	`() => void`	Açılır pencereyi aç/kapat
`onClear`	`() => void`	Seçimi temizle
`locale`	`Locale`	Mevcut yerel ayar nesnesi
`triggerRef`	`(node) => void`	Konumlandırma için ref geri araması

Aralıklı Seçici Tetikleyicisi

Aynı desen DateRangePicker ile de çalışır:

import { useState } from "react";
import { DateRangePicker } from "react-date-range-picker-tailwind3";

function CompoundCustomTriggerRange() {
  const [value, setValue] = useState<{ start: Date | null; end: Date | null }>({
    start: null,
    end: null,
  });

  return (
    <DateRangePicker.Root value={value} onChange={setValue}>
      <DateRangePicker.Trigger>
        {({ displayValue, isOpen, onToggle, triggerRef }) => (
          <button
            ref={triggerRef as React.Ref<HTMLButtonElement>}
            onClick={onToggle}
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 8,
              padding: "8px 16px",
              border: `2px solid ${isOpen ? "#3b82f6" : "#d1d5db"}`,
              borderRadius: 8,
              background: isOpen ? "#eff6ff" : "#fff",
              cursor: "pointer",
              fontSize: 14,
              fontWeight: 500,
              transition: "border-color 0.15s, background 0.15s",
            }}
          >
            <svg
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
              <line x1="16" y1="2" x2="16" y2="6" />
              <line x1="8" y1="2" x2="8" y2="6" />
              <line x1="3" y1="10" x2="21" y2="10" />
            </svg>
            <span>{displayValue || "Select date range"}</span>
          </button>
        )}
      </DateRangePicker.Trigger>
      <DateRangePicker.Content>
        <div>
          <DateRangePicker.Header>
            <DateRangePicker.PrevButton />
            <DateRangePicker.Title calendarIndex={0} />
            <div style={{ flex: 1 }} />
            <DateRangePicker.Title calendarIndex={1} />
            <DateRangePicker.NextButton />
          </DateRangePicker.Header>
          <DateRangePicker.Calendars>
            <DateRangePicker.Grid calendarIndex={0} />
            <DateRangePicker.Grid calendarIndex={1} />
          </DateRangePicker.Calendars>
          <DateRangePicker.Footer>
            <DateRangePicker.ClearButton />
            <DateRangePicker.CancelButton />
            <DateRangePicker.ConfirmButton />
          </DateRangePicker.Footer>
        </div>
      </DateRangePicker.Content>
    </DateRangePicker.Root>
  );
}