react-datepicker 커스텀

DatePicker 팝업 안에 '날짜 모름'을 추가하려면 DatePicker 컴포넌트를 커스텀하여 팝업 내부에 체크박스를 추가해야 합니다. 이를 위해 react-datepicker의 CustomInput prop을 사용하여 커스텀 인풋을 만들고, 해당 인풋이 클릭되었을 때 팝업이 열리도록 조정할 수 있습니다. 아래는 그 예시입니다.

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

const CustomDatePicker = () => {
  const [selectedDate, setSelectedDate] = useState(null);
  const [dateUnknown, setDateUnknown] = useState(false);

  const handleDateChange = (date) => {
    setSelectedDate(date);
    setDateUnknown(false);
  };

  const toggleDateUnknown = () => {
    if (dateUnknown) {
      setSelectedDate(null);
    }
    setDateUnknown(!dateUnknown);
  };

  const CustomInput = React.forwardRef(({ value, onClick }, ref) => (
    <div>
      <input
        type="text"
        value={value}
        onClick={onClick}
        ref={ref}
        readOnly
      />
      <label>
        <input
          type="checkbox"
          checked={dateUnknown}
          onChange={toggleDateUnknown}
        />
        날짜 모름
      </label>
    </div>
  ));

  return (
    <DatePicker
      selected={selectedDate}
      onChange={handleDateChange}
      dateFormat="yyyy-MM-dd"
      placeholderText="날짜 선택"
      customInput={<CustomInput />}
    />
  );
};

export default CustomDatePicker;

 

j이 코드에서 CustomInput 컴포넌트를 만들어 Datepicker의 커스텀 인풋으로 사용하고 있습니다. 이 커스텀 인풋에는 입력 필드와 '날짜 모름'을 나타내는 체크박스가 함께 포함되어 있습니다. 사용자가 팝업을 열면 이 체크박스가 팝업 안에 표시됩니다.

 

 

 

기본사용법

https://jiyumi00.tistory.com/54 

[React -5] ReactDatePicker 라이브러리로 기간 설정 구현

 

 

커스텀 수정 예제:

https://velog.io/@oo009pbh/react-datepicker-%EC%BB%A4%EC%8A%A4%ED%85%80-%ED%95%98%EC%97%AC-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

react-datepicker 커스텀 하여 사용하기

 

커스텀 input 예제: 

https://velog.io/@bnb8419/React-Datepicker-%EC%82%AC%EC%9A%A9%EB%B2%95-1znalwg3

React Datepicker Custom

 

css 스타일링으로 세로 text출력.

https://hanbbistory.tistory.com/59