Life-Calendar / DatePicker

1. DatePicker 적용법

날짜 선택할때 쓰였던 datePicker 적용법

react datePicker npm 다운 주소
https://www.npmjs.com/package/react-datepicker

1. 설치

• npm 설치

npm install react-datepicker --save

• yarn 설치

yarn add react-datepicker

package.json 파일을 확인하면 잘 설치 된것을 확인 할수 있다.

2. 사용하기

React-DatePicker 공식문서

-> 공식문서에 다양한 예제들이 나와있으니 참고하면 될것같다.

기본 예제이다

() => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
  );
};

나는 Calendar 프로젝트에 필요한 예제를 찾아 반영하였다.

📃반영코드

const [ViewData, setViewData] = useState({
     id:""
    ,title:""
    ,content:""
    ,date: new Date()
    ,color:""
  }) 
  const {title, content, date } = ViewData;


const getChangeDate = (date) => {
    setViewData({
      ...ViewData,
      'date': date,
    })
    search(date);
  };

const DatePick = forwardRef(({ value, onClick }, ref) => (
    <Datebutton className='custom-btn'
      onClick={onClick} ref={ref}>
        {value}
    </Datebutton>
));
return (
	<Datebox>
    	<DatePicker
        	value={date}
            dateFormat="yyyy-MM-dd"
            selected={ViewData.date}
            onChange={getChangeDate}
            customInput={<DatePick/>}
        />
    </Datebox>
);

1. value 값을 {date} 로 설정해주었다.
2. 내가 사용하는 custom 날짜의 모양이 월/일/년 으로 되어있어서
   dateFormat 으로 년 - 월 - 일 로 맞춰주었다.
3. {ViewData.date} 에 있는 날짜가 보여진다.
   기본값 newDate() -> 현재 로컬 날짜이다.
4. 날짜를 선택할때의 이벤트 함수로 {getChangeDate} 로 따로 만들어 주었다
5. forwardRef / react hook을 사용해 속성에 추가해줄 컴포넌트 를 만들었다.
6. 속성에 만든 customInput = {< DatePick/ >} 를 추가해 주었다.

🎈적용 결과

-> datepicker 안에 스타일은 따로 파일로 만들어서 custom 해주었다.

📁diary.css

.react-datepicker__header{
  background-color: #7A90E2;
}

.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after{
  border-bottom-color: #7A90E2;
}

.react-datepicker__day--selected{
  background-color: #153462;
}

.react-datepicker__month-container{
  font-family: "Gaegu", serif;
}