Hành vi

Đóng khi chọn

Khi shouldCloseOnSelect được bật, bộ chọn sẽ tự động xác nhận và đóng lại khi một giá trị đặt trước được nhấp.

ℹ️ Info

Đối với các bộ chọn có bật thời gian, shouldCloseOnSelect chỉ áp dụng cho các lần nhấp vào giá trị đặt trước — không phải các lần nhấp vào ngày, vì người dùng vẫn cần đặt thời gian.

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

Nhiều tháng

Hiển thị nhiều hơn hai tháng mặc định cạnh nhau.

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

Tích hợp biểu mẫu

Sử dụng prop name để bao gồm các đầu vào ẩn cho việc gửi biểu mẫu gốc.

💡 Tip

Kiểu dáng nút gửi trong ví dụ này là tùy chỉnh — thư viện chỉ cung cấp bộ chọn ngày.

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