728x90
반응형

<input type="date">태그는 캘린더에서 날짜를 선택하는 방식과, 텍스트창에 입력하는 방식으로 날짜를 지정할 수 있다.

문제는 캘린더에서 날짜를 선택한 경우는 YYYYMMDD형식으로 정상적인 출력이 되지만

텍스트창에서 날짜를 직접 입력할 경우 연도 부분을 6자리까지 입력받아 YYYYYYMMDD 형식으로 출력이 되는 현상이 발생한다.

 

이는 연도의 기본 설정이 6자리로 되어있기 때문인데, 아래와 같이 max 옵션을 추가하면 연도를 4자리까지 가져오게 설정할 수 있다.

<input type="date">    ⇒    <input type="date" max="9999-12-31">

 

max 옵션을 지정을 하게 되면 연도를 9999까지 4자리로 지정을 했기 때문에 5자리부터 입력이 달(MM)로 넘어가기 된다.

 

max 설정전
max 설정후

 

참고로 min 옵션으로 지정할 경우는 적용되지 않는다.

 

 


글 내용 중 잘못된 부분이 있거나, 첨부하실 내용이 있으시면 댓글로 남겨주세요. 공부하는데 많은 도움이 됩니다.
-- 기억의 유효기간은 생각보다 짧다. --
728x90
반응형