리액트 react-datepicker

react-datepicker 설치

npm install react-datepicker --save

DatePicker 컴포넌트 사용하기

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

function Calendar() {
  const [startDate, setStartDate] = useState(new Date());

  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
    />
  );
}

export default Calendar;

오늘부터 2주 후까지의 날짜 선택 제한하기

일반적인 날짜 선택기에서는 사용자가 과거 또는 미래의 어떤 날짜든지 선택할 수 있습니다. 하지만 특정 범위 내의 날짜만 선택하도록 제한하고 싶을 때가 있습니다. 예를 들어, 오늘부터 2주 후까지만 선택할 수 있도록 하고 싶다면, minDate와 maxDate 속성을 사용하여 날짜 범위를 지정할 수 있습니다.

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

export default function Calendar() {
  const [startDate, setStartDate] = useState(new Date());
  const twoWeeksLater = new Date(new Date().setDate(new Date().getDate() + 14));

  return (
    <div>
      <DatePicker
        selected={startDate}
        onChange={(date) => setStartDate(date)}
        minDate={new Date()}
        maxDate={twoWeeksLater}
        inline
      />
    </div>
  );
}

날짜 선택 시 특정 동작 수행하기

날짜가 선택되었을 때 추가적인 동작을 수행하려면, onChange 이벤트 핸들러 내에서 원하는 로직을 구현하면 됩니다. 예를 들어, 선택된 날짜로 특정 API를 호출하고 싶다면, onChange 이벤트에서 해당 함수를 호출할 수 있습니다.

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import useBookActions from '../hooks/useBookActions';

export default function Calendar({ book_id }) {
    const { rentBook } = useBookActions();
    const [startDate, setStartDate] = useState(new Date()); // 오늘 날짜를 시작 날짜로 설정
    // 최소 날짜를 내일로 설정
    const aDayLater = new Date(new Date().setDate(new Date().getDate() + 1));
    // 최대 날짜를 오늘로부터 2주 후로 설정
    const twoWeeksLater = new Date(new Date().setDate(new Date().getDate() + 14));
    const handleDateOnchange = (date) => {
        setStartDate(date);
        rentBook(date, book_id);
    };
    return (
        <div>
            <DatePicker
                selected={startDate}
                onChange={(date) => handleDateOnchange(date)}
                minDate={aDayLater} // 최소 날짜를 내일로 설정
                maxDate={twoWeeksLater} // 최대 날짜를 2주 후로 설정
                inline
            />
        </div>
    );
}