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 thời gian.

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


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


  return (
    <DateRangeTimePicker
      value={value}
      onChange={setValue}
      numberOfMonths={3}
      time={{ minuteStep: 5 }}
    />
  );
}

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 { DateRangeTimePicker } 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 (
    <DateRangeTimePicker
      value={value}
      onChange={setValue}
      locale={koLocale}
      time={{ minuteStep: 5 }}
    />
  );
}

Tiêu đề dạng Dropdown

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

import { useState } from "react";
import { DateRangeTimePicker } 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 (
    <DateRangeTimePicker
      value={value}
      onChange={setValue}
      captionLayout="dropdown"
      fromYear={2020}
      toYear={2030}
      time={{ minuteStep: 5 }}
    />
  );
}