회사 프로젝트 진행 중 datepicker를 사용했어야 했다.
캘린더의 위치가 input 창 위에서 show/hide가 되어
아래 사진처럼 캘린더가 보여지는 위치가 input 창 아래로 설정하고 싶었다.
공식문서에는 popper.js(type 링크)에서 확인해라는 링크만 걸려 있을뿐이었다.
구글링 결과 나와같은 문제를 겪는 github issue 글이 있었고,
친절한 답변을 통해 문제를 해결할 수 있었다.
Have the same issue. Want to move it left depends on input position. Someone know how to do that ?).
This params will help you: 'auto', 'auto-left', 'auto-right', 'bottom', 'bottom-end', 'bottom-start', 'left', 'left-end', 'left-start', 'right', 'right-end', 'right-start', 'top', 'top-end', 'top-start'
Found params in src. You need to pass one of this values to popperPlacement props to the DatePicker component like that -<DatePicker popperPlacement="bottom-end" />
.Someone who knows how to contact with develop team tell them to update popperPlacement docs. It's not so clear to find this values. Thx.
input창을 클릭했는데 아래 사진처럼 캘린더가 뜨는 걸 확인했다.
이 또한 구글링을 통해 해결할 수 있었다. 도움 받은 블로그의 코드를 보면 css가 들어가 있는 걸 확인할 수 있었고,
아래 코드와 같이 import를 해주는 방법
import "react-datepicker/dist/react-datepicker.css";
node_modules > react-datepicker > dadatepicker.scss 파일을 복사해 프로젝트 폴더에 넣어준 후 import 하는 방법이 있다.
import './styles/datepicker.scss';
dateFormat={'yyyy.MM.dd(eee)'}
사용한 데이터 포맷형태이다. 이 형태를 서버로 보내기 위해
yyyyMMdd 형태로 바꿔주어야 한다. 좋은 라이브러리들이 있긴 하지만,,,,
나의 경우는 따로 만들어준 함수를 사용하면 되긴 하지만 공부 차원에서 새로운 방법으로 포맷형태를 바꿔줄려고 한다. replaceAll
은 최신 문법이므로 지원을 안하는 브라우저가 있으므로, replace
+ 정규식 콤비로 바꾼 다음 map 혹은 for문을 사용하여 바꿔주는 방법이 있다.
new Date().toLocaleDateString().replaceAll('.', '').split(' ').join('');
new Date().toLocaleDateString() // yyyy. MM . dd.
replaceAll('.', '').split(' ') //모든 .을 '' 공백으로 바꿔준 후 공백 기준으로 배열 type으로 변환
// 예시 ['2022', '12', '25']
.join(''); // 배열을 string으로 합쳐준다. join값으로 '-'을 준다면, '2022-12-25'로 리턴 될 것이다.
new Date().toLocaleDateString().replace(/\./g, '') //정규 표현식으로 모든 string의 .을 공백으로 바꾸고
.map((val, i) => i > 0 && val.length < 2 ? '0' + v : v) // MM이 1 ~ 9월은 length가 1개이므로 '0'을 더한다. 예시) 2022. 1. 15.
.join(''); // string으로 합쳐준다.