728x90
반응형

 

HTML 에서 정식으로 날짜 입력폼을 지원하고 있습니다.

 

input 태그에 type 을 'date' 로 지정해주면 간단하게 만들어집니다.

 

 

 

 

이로 인해서 jquery에서 지원하던 datePicker를 사용하지 않고도 쉽고 빠르게 만들수 있게 되었습니다.

 

month 까지만 입력을 제한할 수도있고 시작날짜를 value 속성을 통해 지정할 수도 있습니다.

 

그리고 최소 입력 날짜와 최대 입력날짜도 제한할 수 있습니다.

 

 

 

 

input date를 사용하면서 문제는 기본 설정으로 연도입력이 6글자까지 입력이 된다는 문제가 있습니다.

 

아래와 같이 아무렇게나 입력해봐도 6글자까지 입력이 되고 있습니다.

 

 

 

JavaScript 에서나 Jquery 에서 입력한 값을 정규표현식으로 걸러내는 방식도 있지만 입력자체를 막아야 된다는 생각이 들었습니다.

 

정말 간단한 속성을 설정하여 년도 yyyy 즉 년도 입력을 4자리만 제한해 보겠습니다.

 

 

 

 

아래와 같이 max값을 주어 yyyy 년도값을 4자리로 제한을 주었습니다.

 

정말 간단하게 max 속성을 주는것만으로도 입력을 제한할 수 있습니다.

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

 

 

 

다양한 브라우저에서 쉽고 간편하게 input date를 사용해보세요.

 

728x90
반응형

+ Recent posts