動作

選択時に閉じる

shouldCloseOnSelect が有効な場合、終了日が選択されるとピッカーは自動的に確定し、閉じます。

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

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

  return <DateRangePicker value={value} onChange={setValue} shouldCloseOnSelect />;
}

複数月表示

デフォルトの2ヶ月以上を並べて表示します。

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

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

  return <DateRangePicker value={value} onChange={setValue} numberOfMonths={3} />;
}

フォーム連携

name prop を使用して、ネイティブフォームの送信用の非表示 input を含めることができます。

💡 Tip

この例の送信ボタンのスタイルはカスタムです — ライブラリが提供するのは日付ピッカーのみです。

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

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

  const handleSubmit = (e: SubmitEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    const start = formData.get("booking");
    const end = formData.get("booking-end");
    alert(
      `Submitted range: ${typeof start === "string" ? start : ""} ~ ${typeof end === "string" ? end : ""}`,
    );
  };

  return (
    <form onSubmit={handleSubmit} style={{ display: "flex", alignItems: "center", gap: 8 }}>
      <DateRangePicker value={value} onChange={setValue} name="booking" />
      <button
        type="submit"
        style={{
          padding: "6px 14px",
          border: "1px solid #d1d5db",
          borderRadius: 6,
          background: "#3b82f6",
          color: "#fff",
          cursor: "pointer",
          fontSize: 13,
        }}
      >
        Submit
      </button>
    </form>
  );
}