개요
오늘도 즐거운 팀프 코딩 시간....
현재 작업중인 컴포넌트는 아래와 같은 컴포넌트를 만드는 것입니다.
약속추가 부분의 날짜를 받는 부분을 실제로 구현하려다 라이브러리가 있는지 먼저 찾아보며 봤던 사이트를 공유/기록 하고자 올리게 되었습니다.
본론
https://blog.bitsrc.io/13-react-time-and-date-pickers-for-2020-d52d88d1ca0b
13 React DatePickers and TimePickers for 2020
Useful React components and libraries that save you time when letting users choose their own time.
blog.bitsrc.io
여러 사이트를 봤지만 해당 사이트가 가장 명확하게 Date, Calendar에 대한 정보를 잘 보여주고 있고 저 또한 해당 사이트에서 라이브러리를 선택해 제작하였습니다.
그리고 또 알게된 사이트는 컴포넌트 드리븐 개발을 위한 플랫폼인 `bit`입니다.
Bit Cloud: How teams build composable software together
Join 200k+ developers and world-class teams on the component platform. Scale and improve modern app development with the power of components, and collaborate to build better together. Join for Free!
bit.cloud
이렇게 date-picker라는 컴포넌트를 미리보며 원하는 컴포넌트를 찾거나 공유할 수 있고 그 종류도 다양합니다!!
https://bit.cloud/nexxtway/react-rainbow/date-picker
react-rainbow / date-picker
A DatePicker is a text input to capture a date. Labeled with Date, Date Picker, Form Elements, React, Styled Components. Properties: className, style, value, maxDate. Install Date-picker in your project.
bit.cloud
이번에 선택한 라이브러리는 기본이라고 불리는 React-DatePicker입니다.
공식사이트는 여기있어요!!
https://reactdatepicker.com/#example-select-time
React Datepicker crafted by HackerOne
reactdatepicker.com
제가 사용하고있는 Typescript + react + styled-component까지 동일하게 사용하고 계신분이 있더라고요! 그래서 많이 참고하여 제작했습니다!!
https://yong-nyong.tistory.com/11
[React] react-datepicker 라이브러리 사용 하기(캘린더, 달력 라이브러리)
📖 들어가며 이번에 팀 프로젝트로 팀 프로젝트를 구하는 웹앱을 클론 코딩하게 되면서 프로젝트 진행 기간을 선택할 수 있게 하는 Input이 필요했습니다. 그래서 캘린더가 표시되고 캘린더에서
yong-nyong.tistory.com
결론
그럼 이만 마치겠습니다. 감사합니다!
'Language > Javascript' 카테고리의 다른 글
| [styled-component] react-slick 사용하기 (how to use react-slick) (0) | 2022.04.13 |
|---|---|
| [styled Component] Styled Component로 custom dropdown 만들기 (0) | 2022.04.11 |
| [자바스크립트] String을 number로 바꾸는 법 (0) | 2021.09.26 |
| [JS, JavaScript] document.getElementById()를 이용해 값을 바꾸려했는데 반영이 안됨. (부제 : 생일 Dday 출력하기) (0) | 2021.04.28 |