[React] Datepicker 라이브러리 사용법 + 시간 추가

1. 설치 방법

설치 방법은 간단하다. react-datepicker를 사용하기 위해 다음 명령어를 입력하면 된다.

npm install react-datepicker

 

2. 사용 방법

import

import DatePicker from "react-datepicker"; // 기본 설정 1
import "react-datepicker/dist/react-datepicker.css"; // 기본 설정 2
import { ko } from "date-fns/esm/locale"; // 한국어 설정

먼저 원하는 파일에서 라이브러리를 import 한다. 위의 두개는 기본적으로 불러준다.

기본 언어는 영어로 되어 있기 때문에 한국어로 설정하기 위해서는 위와 같이 import 해야 한다.

 

변수 선언

  const today = new Date();
  const [currentTime, setCurrentTime] = useState(today);

new Date(); 를 통해 현재 시간과 날짜를 나타내는 Date 객체를 생성하고, 이를 today라는 변수에 할당했다. 그리고 today를 currentTime의 초기 값으로 설정해주어 현재 시간이 Datepicker의 기본값이 되도록 했다.

 

컴포넌트

 <StyledDatePicker
    locale={ko} // 한국어 설정
    dateFormat="yyyy.MM.dd" // 날짜 형식 지정
    selected={currentTime} // 선택된 날짜와 시간을 currentTime 변수에서 가져옴
    onChange={(date) => { // Datepicker에서 선택된 값을 업데이트
    setCurrentTime(date)
    }}
/>

먼저 한국 기준으로 날짜와 시간을 표시하도록 locale={ko} 설정을 해주고 날짜를 어떤 형식으로 표시할지 지정해준다.

 

그리고 Datepicker에서 선택된 날짜와 시간을 currentTime 변수에서 가져오도록 한다. currentTime은 위에서 useState 훅으로 선언된 상태 변수로, 현재 시간과 날짜를 나타내는 Date 객체가 초기값으로 설정되어 있다.

 

OnChange를 통해 Datepicker에서 날짜와 시간이 선택되었을 때 선택된 값을 setCurrentTime을 사용하여 currentTime 에 업데이트한다. 

 

위와 같이 컴포넌트를 만든 결과

 

css 적용

나는 DatePicker를 styled-components를 이용하여 custom해서 사용했다.

const StyledDatePicker = styled(DatePicker)`
    width: 170px;
    height: 37px;
    border: none;
    font-weight: 400;
    font-size: 15px;
    line-height: 100%;
    background-color: transparent;
`;

 

3. 시간 추가

입금일'시'를 표현하는 컴포넌트를 만들어야 했기 때문에, 시간도 입력받고자 했다. 시간을 표시하기 위해서는 몇 가지만 추가하면 된다.

<StyledDatePicker
    locale={ko}
    dateFormat="yyyy.MM.dd HH:mm" // 시간 형식 추가
    selected={currentTime}
    showTimeSelect // 시간 선택 기능 활성화
    timeFormat="HH:mm" // Datepicker에서 시간을 어떤 형식으로 표현할지 지정
    timeIntervals={1} // 몇 분 단위로 선택할 수 있는지 지정
    onChange={(date) => {
    setCurrentTime(date)
    }}
/>

달라진 부분은 다음과 같다.

시간 선택 기능 활성화를 위해 showTimeSelect 옵션을 추가하였고, dateFormat에 시간 형식도 추가하였다.

또한 timeFormat을 통해 Datepicker에서 시간을 어떤 형식으로 표현할지 지정하였으며, 몇 분 단위로 선택할 수 있는지를 timeIntervals={1}을 통해 지정하였다.

 

4. 결과

시간 추가한 결과