오늘은 위와같은 기능을 구현하기 위해 사용한 Datepicker 사용법에 대해서 알아보도록 하겠다.
const [date, setDate] = useState(
new Date(
new Date().getFullYear(),
new Date().getMonth(),
new Date().getDate() - 3
)
);
const [endDate, setEndDate] = useState(new Date());
const handleBtnClicked = (e) => {
const today = new Date();
const weeksAgo = new Date(
today.getFullYear(),
today.getMonth(),
today.getDate() - 7
);
const threeDays = new Date(
today.getFullYear(),
today.getMonth(),
today.getDate() - 3
);
const oneMonth = new Date(
today.getFullYear(),
today.getMonth() - 1,
today.getDate()
);
const threeMonth = new Date(
today.getFullYear(),
today.getMonth() - 3,
today.getDate()
);
setIsBtnClicked(e.target.value);
if (e.target.value === "전체") {
setDate();
setEndDate();
}
if (e.target.value === "오늘") {
setDate(today);
setEndDate(today);
}
if (e.target.value === "1주일") {
setDate(weeksAgo);
setEndDate(today);
}
if (e.target.value === "3일") {
setDate(threeDays);
setEndDate(today);
}
if (e.target.value === "1개월") {
setDate(oneMonth);
setEndDate(today);
}
if (e.target.value === "3개월") {
setDate(threeMonth);
setEndDate(today);
}
};
<DatePick
date={date}
setDate={setDate}
endDate={endDate}
setEndDate={setEndDate}
/>
위는 날짜 버튼을 누를 떄 마다 datepicker의 속성 값을 변경해주는 함수의 코드이다. Datepicker가 실행되는 부모 컴포넌트 이기도 하다.
코드를 입력하세요
function DatePick({ date, setDate, endDate, setEndDate }) {
return (
<Fragment>
<PickerWrapper>
<NewDatePicker
selected={date}
onChange={(date) => setDate(date)}
dateFormat="yyyy-MM-dd"
placeholderText="클릭해주세요....."
/>
<span>~</span>
<NewDatePicker
selected={endDate}
onChange={(date) => setEndDate(date)}
dateFormat="yyyy-MM-dd"
placeholderText="클릭해주세요....."
/>
</PickerWrapper>
</Fragment>
);
}
위는 datepicker라는 라이브러리의 기본값들을 설정해놓은 자식컴포넌트 Datepick이다.