DateRangePicker / RHFDateRangePicker

- DateRangePicker는 Textfield props를 확장한 기간 선택 전용 컴포넌트입니다.
- placeholder, infoMessage, errorMessage, readOnly, disabled, isClearable, onClear 같은 Textfield props를 그대로 사용할 수 있습니다.
- selected와 onSelectedChange는 DateRange 형태로 동작하고, dayPickerProps는 기간 선택 모드에 맞는 옵션을 전달합니다.
- defaultIsCalendarOpen, getDefaultMonth, getShouldCloseOnSelect 같은 캘린더 제어 props도 함께 사용할 수 있습니다.

기간 값은 { from, to } 형태로 제어합니다. 종료일까지 선택되면 최종 값이 반영되고, 새 범위를 다시 시작하면 기존 값은 비워지며 미완성 범위는 닫힐 때 초기화됩니다.

clear 버튼은 isClearable이 true이고, 표시할 값이 있으며, onClear가 제공되고, dayPickerProps.required/readOnly/disabled가 아닐 때만 노출됩니다. 클릭하면 onSelectedChange(undefined)가 먼저 호출되고, 그 다음 onClear가 실행됩니다.

기간 선택 모드에서 min, max, excludeDisabled, resetOnSelect, required, disabled 같은 옵션을 전달할 수 있습니다.
아래 예시는 최소/최대 기간과 주말 비활성화 처리, required 범위를 함께 보여줍니다.

기간 선택 값도 입력창 표시 문자열을 원하는 형식으로 바꿀 수 있습니다.

기간 선택은 기본적으로 시작일과 종료일이 모두 선택되면 닫히고, 중간 선택 상태에서 닫으면 값이 초기화됩니다. defaultIsCalendarOpen은 내부 열림 상태의 초기값이고, shouldCloseOnSelect를 false로 두면 완료 후에도 캘린더를 유지할 수 있습니다. calendarButtonTitle과 dropdownClassName으로 캘린더 버튼/래퍼를 제어할 수 있습니다.

getDefaultMonth는 선택값이 없을 때 처음 보여줄 월을 계산하고, getShouldCloseOnSelect는 범위 선택 진행 중/완료 후 캘린더를 닫을지 직접 결정합니다.

DateRangePicker도 기본적으로 직접 타이핑 입력이 막혀 있고, disabled는 전체 상호작용을 비활성화합니다. readOnly는 현재 기간만 표시하면서 캘린더 열기, 기간 변경, clear 버튼을 막습니다.

RHFDateRangePicker는 DateRangePicker props를 기반으로 하고, "selected" 값은 RHF field.value로 관리합니다. name/control/rules/defaultValue/shouldUnregister/disabled는 RHF가 관리하고, 나머지 DateRangePicker UI props와 캘린더 제어 props는 그대로 전달할 수 있습니다. 새 범위를 다시 시작하면 RHF 값은 undefined로 초기화되고, clear 버튼을 사용하면 RHF 값이 먼저 undefined로 정리된 뒤 onClear가 호출됩니다.

기간 필드는 시작일과 종료일이 모두 있어야 하므로 validate에서 from/to를 함께 검사하는 패턴이 자주 사용됩니다.

RHF 연결 상태에서도 min, max, excludeDisabled, disabled, required 같은 기간 선택 옵션을 그대로 전달할 수 있습니다.

DateRangePicker에서 제공하는 표시 포맷과 닫힘 제어도 RHFDateRangePicker에서 그대로 사용할 수 있습니다.

RHFDateRangePicker도 DateRangePicker 상태 props를 그대로 상속합니다. disabled는 RHF controller와 UI를 함께 비활성화하고, readOnly는 현재 기간만 표시하면서 캘린더 열기, 기간 변경, clear를 막습니다.

RHF 연결 상태에서도 캘린더 열림/닫힘 관련 props를 그대로 사용할 수 있습니다. defaultIsCalendarOpen은 내부 상태의 초기값이고, shouldCloseOnSelect=false로 완료 후에도 캘린더를 유지할 수 있습니다. calendarButtonTitle과 dropdownClassName도 동일하게 전달됩니다.

RHF 연결 상태에서도 getDefaultMonth와 getShouldCloseOnSelect를 그대로 사용할 수 있습니다. 선택값이 없을 때 처음 보여줄 월을 계산하거나, 범위 선택 완료 후 닫힘 조건을 직접 커스터마이징할 때 사용합니다.