📆date <input> 🎂생년월일 제한 기능

회원 정보에서 🎂생년월일을 입력할 수 있는 <input> 값을 '만14세 부터 만110세 까지' 제한하는 min, max값을 주는 기능입니다.

컴포넌트 외부

🚩만 나이 날짜를 만들어주는 함수 따로 분리

export default function calculateDateYearsAgo(years: number) {
  const currentDate = new Date();
  return new Date(currentDate.setFullYear(currentDate.getFullYear() - years))
    .toISOString()
    .split('T')[0];
}

컴포넌트 내부

🚩calculateDateYearsAgo 함수 import 해오기
🚩리액트 상단에 생년월일 min, max 값 가져오기

 //calculateDateYearsAgo 함수 import
 import calculateDateYearsAgo from '@/utils/calculateDateYearsAgo';
 // 생년월일 min, max 값
 const minDate = calculateDateYearsAgo(110);
 const maxDate = calculateDateYearsAgo(14);

🚩input안에 min={minDate}과 max={maxDate} 값 전달

 		<table >
              <tbody>
                <tr >
                  <td >
                    <label htmlFor="inputBirthday">생년월일</label>
                  </td>
                  <td >
                    <input
                      type="date"
                      id="inputBirthday"
                      min={minDate}
                      max={maxDate}
                    />
                  </td>
                </tr>
              </tbody>
            </table>

💁‍♂️최종 - 날짜가 제한됨