React.js

React에서 react-datepicker 사용 typescript

Dev갱이 2023. 12. 7. 10:48
728x90

https://www.npmjs.com/package/react-datepicker

 

react-datepicker

A simple and reusable datepicker component for React. Latest version: 4.24.0, last published: 7 days ago. Start using react-datepicker in your project by running `npm i react-datepicker`. There are 2858 other projects in the npm registry using react-datepi

www.npmjs.com

https://www.npmjs.com/package/@types/react-datepicker

 

@types/react-datepicker

TypeScript definitions for react-datepicker. Latest version: 4.19.3, last published: a month ago. Start using @types/react-datepicker in your project by running `npm i @types/react-datepicker`. There are 307 other projects in the npm registry using @types/

www.npmjs.com

 

react-datepicker와 type 설치

npm install react-datepicker
npm install --save @types/react-datepicker

 

간편하게 한글로 적용 하기 위한 라이브러리 설치

date-fns

npm install date-fns

https://www.npmjs.com/package/date-fns

 

date-fns

Modern JavaScript date utility library. Latest version: 2.30.0, last published: 7 months ago. Start using date-fns in your project by running `npm i date-fns`. There are 15764 other projects in the npm registry using date-fns.

www.npmjs.com

 

 

공식문서

https://reactdatepicker.com/#example-date-range

 

React Datepicker crafted by HackerOne

 

reactdatepicker.com

 

 

스타일 css custom

https://doooodle932.tistory.com/150

 

react-datepicker 적용하기(+ 커스텀)

달력 구현에 어떤 라이브러리를 쓸까 고민하다가 가장 무난하고 많이 쓰이는 react-datepicker를 적용해보았다. React Datepicker 설치, 적용하기 라이브러리 설치 yarn add react-datepicker date-fns yarn add -D @type

doooodle932.tistory.com

https://velog.io/@remon/React-React-Datepicker-%EB%8B%AC%EB%A0%A5-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%BB%A4%EC%8A%A4%ED%85%80-%ED%95%98%EA%B8%B0-CSS-%EB%B3%80%EA%B2%BD%ED%95%98%EA%B8%B0

 

[React] React-Datepicker 달력 라이브러리 사용법 (커스텀 하기, CSS 변경하기)

React-DatePicker은 React에서 많이 사용되고 있는 📆달력 라이브러리이다.

velog.io

 

728x90