Các ràng buộc

Số ngày tối thiểu & tối đa

Giới hạn độ dài của khoảng thời gian bằng minDays và maxDays (bao gồm). Người dùng không thể xác nhận một khoảng thời gian ngắn hơn minDays hoặc dài hơn maxDays.

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

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

  return <DateRangePicker value={value} onChange={setValue} minDays={3} maxDays={14} />;
}

Ngày bị vô hiệu hóa

Sử dụng isDateUnavailable để vô hiệu hóa động các ngày cụ thể. Các ngày bị vô hiệu hóa không thể được chọn làm ngày bắt đầu hoặc kết thúc của một khoảng thời gian.

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

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

  const isDateUnavailable = (date: Date) => {
    const day = date.getDay();
    return day === 0 || day === 6; // Disable weekends
  };

  return (
    <DateRangePicker value={value} onChange={setValue} isDateUnavailable={isDateUnavailable} />
  );
}

Cho phép một ngày

Theo mặc định, một khoảng thời gian có ngày bắt đầu bằng ngày kết thúc là được phép. Đặt allowSingleDateInRange={false} để yêu cầu ít nhất hai ngày riêng biệt.

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

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

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