솔솔

[JavaScript] input 타입 date에 max설정하기 본문

나의보물들/JavaScript

[JavaScript] input 타입 date에 max설정하기

솔솔하네 2022. 3. 2. 14:18
반응형

❗회원가입시 생년월일 입력 받을 때 미래의 날짜까지 들어가면  곤란하자나요 그쵸??

 

 

만약에 오늘이 2021년 07월 19일이라면 생년월일 입력시 이보다 미래에 날짜를 입력한다면 이상하겠죠?

 

 

 

🔍 해결방법


1. html 작성한다.

<input type="date" id="birth" name="u_birth" required>

 

2. Javascript를 작성한다.

      	let a = new Date();
        
    	let year = a.getFullYear(); // 년
    	let month = a.getMonth()+1; // 월
    	let day = a.getDate(); // 일
    	
        // 月이 '1~9'일경우 앞에 0을 붙이기 ex)01,02,03,04,05,06,07,08,09
    	if(month < 10){
    		month = '0' + month
    	}
        // 日이 '1~9'일경우 앞에 0을 붙이기 ex)01,02,03,04,05,06,07,08,09
    	if(day < 10){
    		day = '0' + day;
    	}
    	  	
    	let now = year + "-" + month + "-" + day;
    	console.log(now); // 값이 어떻게 나오는지 한번 확인 하기
    	
    	$('#birth').attr('max', now); // id가 birth -> 속성max에 만든값 now넣기(ajax로 한예시)
        
    	let birth =  document.getElementById('birth'); // id가 birth인걸 들고와서 변수에 넣고 
    	birth.setAttribute("min", "1900-01-01"); // 속성min에 설정값 넣기 (js로 한 예시)

3. 이렇게 오늘 날짜까 2022년 03월 02일이라면 그 이후 날짜는 입력을 할 수없습니닷! 하고 강제로 그 이후의 날짜를 손수입력하고 폼을 보내면 아래와같이 알림이 뜹니다!