自訂觸發器

使用 Trigger render prop 將預設的觸發器按鈕替換為您自己的元素。當您將一個函式作為子項傳遞給 DatePicker.Trigger 時，您會收到狀態和回呼函式，以建構您想要的任何觸發器 UI。

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

觸發器 Render Props

Prop	Type	描述
`displayValue`	`string`	格式化後的選定日期
`placeholder`	`string`	預留位置文字
`hasValue`	`boolean`	是否有選定日期
`isOpen`	`boolean`	彈出視窗是否開啟
`onToggle`	`() => void`	切換彈出視窗的開啟/關閉
`onClear`	`() => void`	清除選取項目
`locale`	`Locale`	目前的地區設定物件
`triggerRef`	`(node) => void`	用於定位的 ref 回呼函式

範圍選擇器觸發器

同樣的模式也適用於 DateRangePicker：

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