HTML input 태그 date 타입 날짜(달력) 입력 max 속성을 통한 연도 4자리 제한

 

날짜 정보를 입력받는 화면에서 input 태그에 type을 date 로 사용하여 구현하는 경우가 있는데

 

입력 창에서 연도 값을 타이핑 하다 보면 6자리 까지 입력이 되는 것을 확인할 수 있다.

 

 

 

 

물론 데이터를 넘기기 전에 자바스크립트를 통해 유효성 체크를 별도로 할 수 있지만

 

입력 자체를 4자리로 제한 하는 것이 깔끔할 수 있겠다는 생각이 든다.

 

그럴 경우 간단하게 태그의 속성 값으로 제어할 수 있을 듯 하다.

 

 

input 태그에 max 속성을 주는데, 값을 위 이미지 처럼 설정 해주면 연도는 4자리를 넘어가게 되면

 

다음 월 입력 칸으로 넘어가게 된다

 

 

 

 

이후 입력 값에 대해서는 자바스크립트를 통해 유효성을 체크한 뒤 DB와 통신하면 될 것 같다.