외형

다중 월 표시

두 개 이상의 월을 나란히 표시합니다. 범위 선택기(range picker)의 기본값은 2입니다.

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

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

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

사용자 정의 로캘

headless 패키지의 createLocale을 사용하여 월/요일 이름 및 UI 문자열을 사용자 정의할 수 있습니다.

import { useState } from "react";
import { DateRangePicker } from "react-date-range-picker-tailwind3";
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} />;
}

캡션 드롭다운

월과 연도를 버튼 탐색 방식에서 드롭다운 선택 방식으로 변경합니다. 현재 월에서 멀리 떨어진 날짜를 선택할 때 유용합니다.

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

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