Erscheinungsbild

Mehrere Monate

Zeigen Sie mehr als 2 Monate nebeneinander an. Der Standardwert ist 2 für Bereichsauswahlen.

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


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

Benutzerdefinierte Lokalisierung

Verwenden Sie createLocale aus dem Headless-Paket, um Monats-/Tagesnamen und UI-Zeichenfolgen anzupassen.

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

Titel-Dropdown

Wechseln Sie von der Schaltflächen-Navigation zu Dropdown-Auswahlen für Monat und Jahr. Nützlich für die Auswahl von Daten, die weit vom aktuellen Monat entfernt sind.

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


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