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 cả hai). 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-tailwind3";

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-tailwind3";

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 và kết thúc giống nhau là được phép. Thiết lập 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-tailwind3";

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

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