반응형
내가 원했던 것
select box로 나타냈던 날짜포맷에서 1월은 31일까지, 2월은 28일까지 등 해당 월에 맞는 일 수 를 나타내고 싶었다
날짜 가져오기
const [form, setForm] = useState({
year: nowYear,
month: "01",
day: "01",
});
날짜 계산하는 코드
const now = new Date();
let years = [];
for (let y = now.getFullYear(); y >= 1930; y -= 1) {
years.push(y);
}
let month = [];
for (let m = 1; m <= 12; m += 1) {
if (m < 10) {
// 날짜가 2자리로 나타나야 했기 때문에 1자리 월에 0을 붙혀준다
month.push("0" + m.toString());
} else {
month.push(m.toString());
}
}
let days = [];
let date = new Date(form.year, form.month, 0).getDate();
for (let d = 1; d <= date; d += 1) {
if (d < 10) {
// 날짜가 2자리로 나타나야 했기 때문에 1자리 일에 0을 붙혀준다
days.push("0" + d.toString());
} else {
days.push(d.toString());
}
}
결과를 나타내는 코드
<select
value={form.day}
onChange={(e) =>
setForm({ ...form, day: e.target.value })
}
>
{days.map(item => (
<option value={item} key={item}>
{item}
</option>
))}
</select>
반응형
'Today I Learn > React' 카테고리의 다른 글
[Next.js] 뒤로가기 시 스크롤 위치 유지하기(scrollRestoration) (0) | 2023.03.31 |
---|---|
[React/TypeScript]특정 영역 프린트 기능 구현 (0) | 2023.03.10 |
[React.js] react spinners 만들기(로딩중) (0) | 2022.02.15 |
[React.js]모달 오픈 시 배경 스크롤 막기 (0) | 2022.02.14 |
[React.js] input 숫자만 입력 받는 폼 만들기 (0) | 2022.02.14 |