동작

선택 시 닫기

shouldCloseOnSelect가 활성화되면, 프리셋을 클릭했을 때 선택기가 자동으로 확인하고 닫힙니다.

ℹ️ Info

시간 설정이 활성화된 선택기에서 shouldCloseOnSelect는 프리셋 클릭에만 적용됩니다. 날짜 클릭에는 적용되지 않는데, 이는 사용자가 아직 시간을 설정해야 하기 때문입니다.

import { useState } from "react";
import "react-date-range-picker-styled/rdrp-styles.css";
import { DateRangeTimePicker } from "react-date-range-picker-styled";

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

  return (
    <DateRangeTimePicker
      value={value}
      onChange={setValue}
      shouldCloseOnSelect
      time={{ minuteStep: 5 }}
    />
  );
}

여러 달 표시

기본값인 2개의 달력보다 더 많은 달력을 나란히 표시합니다.

import { useState } from "react";
import "react-date-range-picker-styled/rdrp-styles.css";
import { DateRangeTimePicker } from "react-date-range-picker-styled";

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

  return (
    <DateRangeTimePicker
      value={value}
      onChange={setValue}
      numberOfMonths={3}
      time={{ minuteStep: 5 }}
    />
  );
}

Form 연동

name prop을 사용하여 네이티브 form 전송을 위한 숨겨진 입력을 포함할 수 있습니다.

💡 Tip

이 예제의 제출 버튼 스타일은 커스텀 스타일입니다 — 라이브러리는 날짜 선택기만 제공합니다.

import { type SubmitEvent, useState } from "react";
import "react-date-range-picker-styled/rdrp-styles.css";
import { DateRangeTimePicker } from "react-date-range-picker-styled";

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 }}>
      <DateRangeTimePicker
        value={value}
        onChange={setValue}
        name="booking"
        time={{ minuteStep: 5 }}
      />
      <button
        type="submit"
        style={{
          padding: "6px 14px",
          border: "1px solid #d1d5db",
          borderRadius: 6,
          background: "#3b82f6",
          color: "#fff",
          cursor: "pointer",
          fontSize: 13,
        }}
      >
        Submit
      </button>
    </form>
  );
}