[React] JS 데이터피커 이용할 때 최소 날짜 최대날짜 설정

현대 웹 애플리케이션에서 날짜 선택(DatePicker)은 예약, 통계 조회, 일정 관리 등 다양한 기능에서 핵심 역할을 합니다. 특히 사용자가 입력 가능한 날짜 범위를 제약하지 않으면 잘못된 데이터가 유입되거나, 의도치 않은 조작이 발생할 수 있습니다. React 환경에서 널리 사용되는 react-datepicker 라이브러리를 예로 들면, minDate와 maxDate 옵션을 활용해 선택 가능한 날짜를 효율적으로 제한할 수 있습니다. 이번 포스팅에서는 설치부터 기본 사용법, 그리고 최소/최대 날짜 설정 및 동적 범위 지정 방법까지 상세히 다루어 보겠습니다.

설치 및 기본 사용법

1. 라이브러리 설치

가장 먼저 react-datepicker와 관련 스타일 패키지를 설치합니다. 프로젝트 루트에서 다음 명령어를 실행하세요:

npm install react-datepicker
# 또는
yarn add react-datepicker

설치가 완료되면 전역 스타일을 불러와야 합니다. 보통 src/index.js 또는 App.js 상단에서 다음과 같이 import 합니다:

import 'react-datepicker/dist/react-datepicker.css';

2. 기본 DatePicker 컴포넌트 활용

이제 기본 DatePicker 컴포넌트를 렌더링해 보겠습니다. 아래 예시 코드는 날짜 상태를 관리하고, 선택된 날짜를 화면에 표시합니다:

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';

function App() {
  const [selectedDate, setSelectedDate] = useState(new Date());

  return (
    <div>
      <DatePicker
        selected={selectedDate}
        onChange={(date) => setSelectedDate(date)}
      />
      <p>선택한 날짜: {selectedDate.toLocaleDateString()}</p>
    </div>
  );
}

export default App;

위 예제는 기본적인 날짜 선택 기능을 제공하지만, 아직 범위 제약 없이 모든 날짜를 자유롭게 선택할 수 있습니다.

최소/최대 날짜 설정 방법

1. `minDate`와 `maxDate` 옵션 사용하기

react-datepicker 컴포넌트는 minDate와 maxDate props를 지원합니다. 이를 통해 사용자에게 선택 가능한 날짜 범위를 지정할 수 있습니다. 다음 예시를 참고하세요:

<DatePicker
  selected={selectedDate}
  onChange={(date) => setSelectedDate(date)}
  minDate={new Date(2025, 6, 1)}  // 2025년 7월 1일부터 선택 가능
  maxDate={new Date(2025, 6, 31)} // 2025년 7월 31일까지 선택 가능
/>

new Date(연도, 월 - 1, 일) 형식으로 JavaScript Date 객체를 생성합니다.
minDate보다 이전 날짜는 비활성화(disabled) 상태로 렌더링됩니다.
maxDate보다 이후 날짜도 마찬가지로 비활성화됩니다.

2. 동적 날짜 범위 지정하기

고정된 범위 대신 사용자 입력이나 API 응답에 따라 동적으로 범위를 설정할 수도 있습니다. 예를 들어, 시작일(startDate)과 종료일(endDate) 상태를 따로 관리하며 서로 영향을 주는 방식입니다:

const [startDate, setStartDate] = useState(null);
const [endDate, setEndDate] = useState(null);

<DatePicker
  selected={startDate}
  onChange={(date) => setStartDate(date)}
  selectsStart
  startDate={startDate}
  endDate={endDate}
  minDate={new Date()}
/>

<DatePicker
  selected={endDate}
  onChange={(date) => setEndDate(date)}
  selectsEnd
  startDate={startDate}
  endDate={endDate}
  minDate={startDate}
/>

위 구성은 두 개의 DatePicker가 연동되어, 종료일은 시작일 이후로만 선택하도록 제한합니다. selectsStart와 selectsEnd 옵션은 범위 선택 UI를 보완해 줍니다.

추가 활용 팁

1. 포맷 및 로케일 설정

날짜 표시 형식이나 언어 설정은 dateFormat과 locale props를 사용해 손쉽게 조정할 수 있습니다. 예를 들어, 한글 및 YYYY.MM.DD 포맷으로 렌더링하려면:

import { ko } from 'date-fns/locale';

<DatePicker
  selected={selectedDate}
  onChange={(date) => setSelectedDate(date)}
  dateFormat="yyyy.MM.dd"
  locale={ko}
/>

2. 특정 요일 비활성화하기

주말, 공휴일 등 특정 요일을 비활성화하려면 filterDate 콜백을 활용합니다:

<DatePicker
  filterDate={(date) => date.getDay() !== 0 && date.getDay() !== 6}
/>

위 코드에서 getDay()는 0(일요일)~6(토요일)을 반환하므로, 주말을 제외한 모든 날짜만 활성화됩니다.

3. 사용자 피드백 및 오류 처리

선택 불가능한 날짜를 클릭할 경우 사용자에게 메시지나 툴팁을 제공하면 UX를 개선할 수 있습니다. 예를 들어 onSelect 이벤트와 상태를 활용해 경고 메시지를 출력할 수 있습니다:

<DatePicker
  onSelect={(date) => {
    if (date < minDate || date > maxDate) {
      alert('유효하지 않은 날짜입니다. 범위를 확인해주세요.');
    }
  }}
/>

결론

React 애플리케이션에서 react-datepicker 라이브러리를 활용하면 사용자의 날짜 입력을 직관적이고 안정적으로 관리할 수 있습니다. minDate와 maxDate 옵션을 통해 선택 가능한 날짜 범위를 제약함으로써 잘못된 입력을 방지하고, 동적 범위 지정과 사용자 피드백 기능을 통해 UX를 한층 더 개선할 수 있습니다. 이 외에도 로케일 설정, 포맷 변경, 요일 필터링 등 다양한 커스터마이징이 가능하므로, 프로젝트 요구사항에 맞춰 유연하게 적용해 보시기 바랍니다.

hanuhyunu2025x4

[React] JS 데이터피커 이용할 때 최소 날짜 최대날짜 설정