Giao diện

Nhiều tháng

Hiển thị nhiều hơn 2 tháng liền kề. Mặc định là 2 cho bộ chọn 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";


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


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

Tùy chỉnh ngôn ngữ

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-styled";
import { createLocale } from "react-date-range-picker-headless";
import "react-date-range-picker-styled/rdrp-styles.css";


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

Tiêu đề dạng Dropdown

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 để chọn ngày ở xa tháng hiện tại.

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


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