front-mockup(6)react date picker

기간

2021/11/4 ~ 2021/11/9

메일작성 페이지

• <CKEditor />
• <Select />
• Datepicker
• Styled Component
• Node-schedule || cron
• <Modal />

구현하고 싶은 내용

예약날짜 선택시 다음과 같은 기능을 추가하려고 합니다.

• 날짜 형식을 0000-00-00의 형태로 표현
• 한글로 표시
• 최소 예약날짜와 최대 예약날짜 제한

code

npm install react-datepicker --save
npm install date-fns

import DatePicker, {registerLocale} from "react-datepicker
import ko from "date-fns/locale/ko
import { addDays, subDays } from 'date-fns';
import "react-datepicker/dist/react-datepicker.css"

registerLocale("ko",ko) //컴포넌트에 작성
<DatePicker
selected={reservedDate}
onChange={(date)=>handleDatePicker(date)}
locale="ko"
dateFormat='yyyy-mm-dd'
minDate={subDays(new Date(), -1}
maxDate={addDays(new Date(), 365}
/>//프롭스로 전달

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