react-date-range2 [React]달력을 이용해 날짜 범위 정보얻기2 (react-date-range) DateRange 달력에서 날짜의 범위를 설정하고, 설정한 날짜의 정보를 받아와 캘린더 바로 아래에 출력해본다. react-date-range 사용을 위해서는 아래 게시물을 참고하여 패키지 설정을 완료해준다. [React]달력을 이용해 날짜 범위 정보얻기1 (react-date-range) 날짜 및 날짜 범위를 선택하기 위한 React 패키지로 날짜 작업에 date-fns 모듈을 사용한다. react-date-range에서 지원하는 Components Example은 다음과 같다. Exmaple 1 : 2개의 달력을 표시 Exmaple 2 : 다.. doqtqu.tistory.com ★ 프로젝트 구조 src ㄴ component ㄴ Calender.js ㄴ App.js Calender.js import .. 2020. 11. 25. [React]달력을 이용해 날짜 범위 정보얻기1 (react-date-range) 날짜 및 날짜 범위를 선택하기 위한 React 패키지로 날짜 작업에 date-fns 모듈을 사용한다. react-date-range에서 지원하는 Components Example은 다음과 같다. Exmaple 1 : 2개의 달력을 표시 Exmaple 2 : 다중 범위(2개) Exmaple 3 : 다중 범위(3개 이상) Exmaple 4 : 날짜 입력 수정이 가능한 달력 Exmaple 5 : 기본 달력 더 자세한 예시는 링크 참고 react-date-range를 사용하는 이유 - 상태 비 저장 날짜 작업 - 고도로 구성 가능 - 다중 범위 선택 - 기본 js date 기반 - 드래그 앤 드롭 선택 - 날짜 입력을 통한 범위 설정 가능 react-date-rang 사용하기 아래의 명령어를 이용하여 react.. 2020. 11. 24. 이전 1 다음 반응형
