[1116] react 마감시간 정하는 기능 - datepicker 사용하기

 

사용자가 시간을 설정할 수 있도록

- 데이트 피커 설정

 

React에서는 일반적으로 사용하는 jquery용 datepicker가 호환이 안되기 때문에

React 전용 datepicker 라이브러리를 사용해야 한다고 합니다.

 

 

💙💙 React에서 DatePicker 사용하기 💙💙

https://reactdatepicker.com/

React Datepicker crafted by HackerOne

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

react-datepicker

https://github.com/Hacker0x01/react-datepicker

GitHub - Hacker0x01/react-datepicker: A simple and reusable datepicker component for React

 

 

 

npm install react-datepicker --save

// yarn 사용시

yarn add react-datepicker

 

진짜 나는!!!!! 이거 css 있는줄 모르고 하나하나 다 플랙스 주고 다 했는데!!!!

단 한줄이면 되는거였다 와

 

import "react-datepicker/dist/react-datepicker.css";

 

추가해주자...

 

공식페이지에 보면 웬만한 설정법이 다 나와있음!

내가 한 설정은 날짜선택 & 시간 선택까지

 

몇 분 단위로 선택을 하게 할지도 정할 수 있고 커서를 두고 직접 설정하면 그 시간으로 나옴. 

짱신기!

 

 

 

 

💕원하는 설정 추가하기

 

 

- 시간 나오게 하기

<DatePicker
  closeOnScroll={true} // 스크롤 하면 선택box 닫히게
  selected={startDate} // 처음에 맨 위에 표시된 input에 나오는게 지금 날짜
  onChange={(date) => setStartDate(date)} // 내가 선택한 날짜가 맨 위에 표시 됨
  showTimeSelect // 시간 나오게 하기
  timeFormat="HH:mm" //시간 포맷 
  timeIntervals={15} // 15분 단위로 선택 가능한 box가 나옴
  timeCaption="time"
  dateFormat="MMMM d, yyyy h:mm aa"
 />

 

 

 

 

- 날짜 제한하기 : 오늘 이후의 날짜만 선택 가능하게

()=>{
const isPossibleDay = (date) => {
    const currentDate = new Date();
    const selectedDate = new Date(date);
    return currentDate.getDate() <= selectedDate.getDate();
  };
      
< DatePicker
    filterDate={isPossibleDay}
    />
    
}

 

 

 

 

 

 

 

🧡🧡 필요한 형식으로 시간 포맷 바꾸기

 

데이터에 넣을 때 timestamp()가 기본값으로 해서, 만약 시간을 넣지 않으면 발행한 시간으로 찍히도록 설정해놓았다.

따라서 이 형식에 맞춰서 데이터를 넣어야 함!

그냥 new Date() 안에 넣으면 
//Tue Nov 16 2021 19:00:00 GMT+0900 (한국 표준시) 
// 이렇게 나오는걸

2021-11-16 14:36:51 // 이런 형태로 나오게

 

 

🤍 형식1 : 2021-11-16 14:36:51 

const day = new Date(+[변환전 날짜]+ 3240*10000).toISOString().replace("T", " ").replace(/\..*/, '');

+[변환전 날짜]+ 3240*10000 

와 같은 수식을 이용하지 않으면 현재 시간과 차이가 나기때문에 꼭 해줘야 함!

 

 

정규표현식을 이용하면 그외 다른 형식으로 자유롭게 조작이 가능하다!