[react] Datepicker 사용하기

 

다양한 달력 라이브러리가 있지만 그 중에서도 많이 사용하고 있는 datePicker를 사용해 보려고 한다

 

 

설치

//npm
npm install react-datepicker --save

//yarn
yarn add react-datepicker

 

 

 

설치가 끝났으면 파일에 import 한다

import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

 

 

 

아래 코드를 적용하면

  const [selecedDate, setSelecedDate] = useState(new Date());
 
 <DatePicker className='datePicker'
    dateFormat='yyyy.MM.dd'
    shouldCloseOnSelect
    selected={setSelecedDate}
    onChange={(date)=> setSelecedDate(new Date(date)}
/>

 

 

 

이와 같이 나온다

 

 

 

한국어로 설정하고 싶을 때는 아래 npm을 설치 후 import 하고 사용하면 된다.

//1. npm 설치
npm install date-fns --save

//2. import 하기
import { ko } from 'date-fns/locale';

//3. DatePicke에 아래 코드 추가
locale={ko}

 

 

 

결과

 

 

 

내가 필요한 건 두 날짜 간의 일 수였는데 그걸 알아내기 위해 아래와 같은 코드를 작성했다

import React, { useEffect, useState } from 'react'
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import { ko } from 'date-fns/locale';

function Edit() {

    const [startDate, setStartDate] = useState(new Date());
    const [endDate, setEndDate] = useState(new Date());
    const [readingDay, setReadingDay] = useState(0);
   
    useEffect(()=>{
        const calculationDay = () => {
            const start = new Date(startDate);
            const end = new Date(endDate);
   
            // 두 날짜 간의 차이를 초 단위로 계산
            const time = end - start;
            //일(day) 단위로 변환
            const dayChange = time / (1000 * 60 * 60 * 24);
            //소수점 버리기
            const day = Math.trunc(dayChange)
            return  day;
        };

        setReadingDay(calculationDay());
       
    }, [endDate, startDate]) //endDate,startDate 바뀔 때마다 호출
   
  return (
        <ul className='inputBox'>
            <li className='col'>
                <div className='flexBox'>
                    <p>책을 읽은 기간</p>
                    <span><small className="readingDay">{readingDay}</small> 일</span>
                </div>

                <DatePicker className='datePicker'
                    locale={ko}
                    dateFormat='yyyy.MM.dd'
                    shouldCloseOnSelect
                    selected={startDate}
                    onChange={(date)=> setStartDate(new Date(date))
                    }
                />
                <DatePicker className='datePicker'
                    locale={ko}
                    dateFormat='yyyy.MM.dd'
                    shouldCloseOnSelect
                    selected={endDate}
                    minDate={startDate}
                    onChange={(date)=> setEndDate(new Date(date))
                    }
                />
            </li>
        </ul>
  )
}

export default Edit

 

 

그럼 이렇게 결과가 나온다 !