Giao diện

Nhiều tháng

Hiển thị nhiều hơn 2 tháng cạnh nhau. Mặc định là 2 cho bộ chọn phạm vi.

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

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

  return <DateRangePicker value={value} onChange={setValue} numberOfMonths={3} />;
}

Ngôn ngữ tùy chỉnh

Sử dụng createLocale từ gói headless để tùy chỉnh tên tháng/ngày và các chuỗi giao diện người dùng.

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

const koLocale = createLocale("ko-KR", {
  confirm: "확인",
  cancel: "취소",
  clear: "초기화",
  today: "오늘",
  rangePlaceholder: "날짜 범위 선택",
  rangeSeparator: " ~ ",
});

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

  return <DateRangePicker value={value} onChange={setValue} locale={koLocale} />;
}

Chú thích dạng thả xuống

Chuyển từ điều hướng bằng nút sang bộ chọn thả xuống cho tháng và năm. Hữu ích khi chọn những ngày xa tháng hiện tại.

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

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

  return (
    <DateRangePicker
      value={value}
      onChange={setValue}
      captionLayout="dropdown"
      fromYear={2020}
      toYear={2030}
    />
  );
}