HTML에서는 <input type="month">를 사용하면 사용자가 월과 연도를 함께 선택할 수 있습니다. 하지만 연도만 선택하고 싶을 때는 어떻게 해야 할까요? 안타깝게도 HTML에는 연도(year) 전용 입력 유형이 존재하지 않습니다.
해결 방법: jQuery Datepicker 활용하기
연도만 입력받고 싶다면 jQuery의 Datepicker 위젯을 활용하는 것이 가장 효과적입니다. 일반 텍스트 입력 필드(<input type="text">)에 Datepicker를 적용하고, 날짜 형식을 'yy'로 지정하면 화면에 연도만 표시됩니다.
아래 예제 코드를 실행하면 생년월일 항목에서 연도만 선택할 수 있는 입력 필드를 확인할 수 있습니다.
예제 코드
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
</script>
<script type="text/javascript">
$(function() {
$( "#date" ).datepicker({dateFormat: 'yy'});
});
</script>
</head>
<body>
<form action = "" method = "get">
Details:<br> <br>
Student Name <br> <input type="name" name="sname"> <br>
Year of Birth <br> <input type="text" id="date"> <br>
<input type="submit" value="Submit">
</form>
</body>
</html>코드 설명
- jQuery 라이브러리 로드: CDN을 통해 jQuery를 불러옵니다.
- Datepicker 초기화:
$(function() {...})내부에서 ID가date인 요소에 Datepicker를 적용합니다. - dateFormat 옵션:
{dateFormat: 'yy'}로 설정하여 달력 팝업에서 연도 값만 입력되도록 합니다.
프로그램을 실행하면 'Year of Birth(출생 연도)' 입력란을 클릭했을 때 달력이 나타나고, 선택한 결과로 연도만 표시되는 것을 확인할 수 있습니다.