react-date-picker 사용시 selectsRange 옵션 사용시 range limit 주기

react-date-picker 사용시 startDate와 endDate를 선택 했을 때 startDate를 먼저 선택 했을때 선택 할 수 있는 endDate의 범위를 제한 하고 싶었다. 그럴때 아래와 같은 조건을 만족 해야한다.

 

• maxDate를 이용하여 선택 할 수 있는 범위를 startDate 기준으로 설정한다.
• startDate 선택시에만 해당 maxDate설정을 주어야 하고 그게 아닐때는 날짜 선택이 가능하게 해야 된다.

위 그림처럼 범위 제한이 없어서 굉장히 곤란하다. github와 공식문서를 모든곳을 다 뒤져보았지만 range 제한을 두는 옵션은 존재하지 않았습니다.

 

Calendar.interface.ts

 

Calendar.tsx

 

datePickerOptions에서

• maxDate
• onSelect

 

Calendar 호출 컴포넌트

... 중략
import { addDays, isEqual } from 'date-fns';

const [isSelectDate, setIsSelectDate] = useState<Date>();

const handleSelectDate = (date: Date) => {
		if (!isSelectDate) {
			setIsSelectDate(date);
		} else {
			setIsSelectDate(undefined);
		}
	};
    
    
return(
        <Calendar
            startDate={startDate}
            endDate={endDate}
            handleChangeDate={handleChangeDate}
            datePickerOptions={{
                selectsRange: true,
                withPortal: true,
                minDate: isSelectDate ? isSelectDate : new Date(),
                maxDate: isSelectDate && addDays(isSelectDate, 9),
                onSelect: handleSelectDate,
            }}
        />
 )

 

// maxDate를 지정하는데 isSelectDate가 있을 경우 최대 10일까지 가능하게 지정
maxDate: isSelectDate && addDays(isSelectDate, 9)

// 선택 했을때 isSelectDate가 없을때는 startDate 선택 했을때고 있을때는 endDate 선택 했을때 
// startDate일때 isSelectDate를 설정해주고 endDate설정일때는 undefined로 초기화 해준다.
const handleSelectDate = (date: Date) => ...

 

결과

 

 

Reference

- (https://reactdatepicker.com/)