Ràng buộc

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

Giới hạn độ dài của khoảng ngày 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 ngày ngắn hơn minDays hoặc dài hơn maxDays.

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

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 ngày.

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

const isWeekend = (date: Date) => {
  const day = date.getDay();
  return day === 0 || day === 6;
};

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

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

Cho phép một ngày

Theo mặc định, một khoảng ngày 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-styled";
import "react-date-range-picker-styled/rdrp-styles.css";

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

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