230927 개발일지 TIL - antd-mobile에서 RangePicker 구현

프로젝트 작업 중 모바일 환경에서도 문제없이 antd에서 RangePicker를 활용하고 싶었는데 반응형을 지원하지 않아 antd-mobile에서 RangePicker를 것을 지원하는지 알아보게 되었다.

antd-mobile에서 RangePicker 구현

먼저 antd 라이브러리는 범위 선택 기능을 지원하는 RangePicker 컴포넌트를 제공한다. 이 컴포넌트는 시작 날짜와 종료 날짜를 한 번에 선택할 수 있게 해준다. 그러나 이와 달리, antd-mobile 라이브러리는 RangePicker 컴포넌트를 제공하지 않는다.

antd-mobile에서 시작 날짜와 종료 날짜를 각각 선택할 수 있는 방법을 알아보았다.

import { DatePicker } from 'antd-mobile';

const [startDate, setStartDate] = useState(
  selectedBlock ? dayjs(selectedBlock?.startDate) : null,
);
const [endDate, setEndDate] = useState(
  selectedBlock ? dayjs(selectedBlock?.endDate) : null,
);

<label htmlFor="rangePicker">모집 기간</label>
<div>
  <DatePicker
    mode="date"
    title="Select Start Date"
    extra="Optional"
    value={startDate}
    onChange={date => setStartDate(date)}
  >
    <List.Item arrow="horizontal">Start Date</List.Item>
  </DatePicker>

  <DatePicker
    mode="date"
    title="Select End Date"
    extra="Optional"
    value={endDate}
    onChange={date => setEndDate(date)}
  >
   <List.Item arrow="horizontal">End Date</List.Item>
 </DatePicker>
</div>

위 코드에서는 두 개의 DatePicker 컴포넌트를 사용하여 시작 날짜와 종료 날짜를 각각 선택하게 한다. 주의할 점은 사용자가 두 번 터치해야 하므로 UX가 다르다는 것이다.

결론
결론은 antd-mobile에서 RangePicker 기능을 구현하는 것은 어렵다. 따라서 위처럼 대체 방법을 사용하거나 별도의 커스텀 컴포넌트를 개발하거나 다른 UI 라이브러리를 찾아보아야 한다.