Özel Tetikleyici

Varsayılan tetikleyici düğmesini, Trigger render prop’unu kullanarak kendi elementinizle değiştirin. DatePicker.Trigger bileşenine bir alt eleman olarak bir fonksiyon geçtiğinizde, istediğiniz herhangi bir tetikleyici arayüzünü oluşturmak için durum ve geri aramalar alırsınız.

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

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’ları

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 (locale) nesnesi
`triggerRef`	`(node) => void`	Konumlandırma için ref geri araması

Aralık Seçici Tetikleyicisi

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

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

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