Giao diện

Kích thước

Bốn kích thước tích hợp: small, medium, large, và x-large.

import { useState } from "react";
import { DatePicker } from "react-date-range-picker-styled";
import "react-date-range-picker-styled/rdrp-styles.css";
import type { DatePickerSize } from "react-date-range-picker-headless";

const sizes: DatePickerSize[] = ["small", "medium", "large", "x-large"];

function Sizes() {
  const [values, setValues] = useState<Record<DatePickerSize, Date | null>>({
    small: null,
    medium: null,
    large: null,
    "x-large": null,
  });

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
      {sizes.map((size) => (
        <div key={size} style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <span style={{ width: 60, fontSize: 13, fontWeight: 600, opacity: 0.5, flexShrink: 0 }}>
            {size}
          </span>
          <DatePicker
            value={values[size]}
            onChange={(date) => setValues((prev) => ({ ...prev, [size]: date }))}
            size={size}
          />
        </div>
      ))}
    </div>
  );
}

small

medium

large

x-large

Định dạng Tùy chỉnh

Tùy chỉnh chuỗi định dạng hiển thị.

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

function CustomFormat() {
  const [value, setValue] = useState<Date | null>(null);

  return <DatePicker value={value} onChange={setValue} displayFormat="YYYY/MM/DD" />;
}

Ngôn ngữ Tùy chỉnh

Cung cấp ngôn ngữ tùy chỉnh cho việc quốc tế hóa bằng cách sử dụng createLocale từ gói headless.

import { useState } from "react";
import { DatePicker } 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: "오늘",
  placeholder: "날짜 선택",
});

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

  return <DatePicker value={value} onChange={setValue} locale={koLocale} weekStartsOn="monday" />;
}

Tuần Bắt đầu Vào

Thay đổi ngày đầu tiên của tuần. Mặc định là "sunday".

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

function WeekStartsOn() {
  const [value, setValue] = useState<Date | null>(null);

  return <DatePicker value={value} onChange={setValue} weekStartsOn="monday" />;
}

Hiển thị Ngày Ngoài

Hiển thị các ngày từ các tháng liền kề để lấp đầy lưới lịch. Mặc định là false.

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

function ShowOutsideDays() {
  const [value, setValue] = useState<Date | null>(null);

  return <DatePicker value={value} onChange={setValue} showOutsideDays />;
}

Tiêu đề Dạng thả xuống

Chuyển đổi điều hướng tháng/năm từ mũi tên sang dạng thả xuống với captionLayout="dropdown". Sử dụng fromYear và toYear để đặt phạm vi năm.

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

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

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