외형

커스텀 로캘

국제화를 위해 커스텀 로캘을 제공합니다. dateTimePlaceholder 키를 사용하여 트리거 텍스트를 커스터마이즈할 수 있습니다.

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

const koLocale = createLocale("ko-KR", {
  confirm: "확인",
  cancel: "취소",
  clear: "초기화",
  today: "오늘",
  dateTimePlaceholder: "날짜 및 시간 선택",
});

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

  return <DateTimePicker value={value} onChange={setValue} locale={koLocale} />;
}

폼 통합

네이티브 폼 제출을 위한 숨겨진 인풋(hidden input)을 포함하려면 name prop을 사용하세요.

import { type SubmitEvent, useState } from "react";
import { DateTimePicker } from "react-date-range-picker-styled";
import "react-date-range-picker-styled/rdrp-styles.css";

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

  const handleSubmit = (e: SubmitEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    const appointment = formData.get("appointment");
    alert(`Submitted datetime: ${typeof appointment === "string" ? appointment : ""}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <DateTimePicker value={value} onChange={setValue} name="appointment" />
      <button type="submit" style={{ marginTop: 8 }}>
        Submit
      </button>
    </form>
  );
}