Today I Learn/React

[React.js]해당 월에 맞는 일 수 나타내기(select box 날짜 선택)

단추언니 2022. 2. 16. 17:12
반응형

내가 원했던 것

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>
반응형