반응형
15일, 30일, 90일, 180일 나눠서 계산
const [startDate, setStartDate] = useState(new Date())
const [endDate, setsEndDate] = useState(new Date())
// 날짜 연산 함수
const _handle15day = () =>{
const today = new Date();
const newDay = new Date();
return setStartDate(newDay.setDate(today.getDate() - 15 ))
}
const _handle30day = () =>{
const today = new Date();
const newDay = new Date();
return setStartDate(newDay.setDate(today.getDate() - 30 ))
}
const _handle90day = () =>{
const today = new Date();
const newDay = new Date();
return setStartDate(newDay.setDate(today.getDate() - 90 ))
}
const _handle180day = () =>{
const today = new Date();
const newDay = new Date();
return setStartDate(newDay.setDate(today.getDate() - 180 ))
}
<Box>
<Button onClick={_handle15day}>15일</Button>
<Button onClick={_handle30day}>1개월</Button>
<Button onClick={_handle90day}>3개월</Button>
<Button onClick={_handle180day}>6개월</Button>
<DatePicker selected={startDate} onChange={date => setStartDate(date)} />
<Text> ~ </Text>
<DatePicker flex-center' selected={endDate} onChange={date => setEndDate(date)} />
</Box>
반응형
'Frontend > React & React.Native &Next.js' 카테고리의 다른 글
React) Html 데이터를 text만 추출하기 (0) | 2022.01.04 |
---|---|
Next.js) 상세페이지 만들기 (query 받기) (0) | 2022.01.04 |
React 별점 기능 구현 (0) | 2021.12.28 |
Chaka UI) CheckBox(체크박스) 만들기 (0) | 2021.12.20 |
에러) useEffect 무한루프(infinite useEffect) (0) | 2021.11.26 |