리액트 datepicker

라따뚜이·2022년 11월 25일
0

캘린더의 위치 변경 문제

회사 프로젝트 진행 중 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.

캘린더 css 문제

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으로 합쳐준다.

참고사이트


https://jsikim1.tistory.com/185
profile
돈만 준다면 해 노예

0개의 댓글