jQuery 를 이용한 날짜 입력 방법
웹사이트를 제작할때 가장 많이 사용하는 것 중의 하나가 날짜 입력이 아닐까 생각하며, jQuery 와 같은 자바스크립트 라이브러리가 나오기 전만해도 날짜를 입력받기 위해서는 직접 입력을 하거나 아니면, 장문의 자바스크립트를 코딩했어야 했었지요.
그러나 이제 jQuery UI를 이용하면 정말 간편하게 날짜를 입력이 가능합니다.
jQuery를 이용한 날짜 입력 하기
jQuery 라이브러리를 사용하기 위해서는 먼저, jQuery.js를 다운로드 또는 CDN 으로 링크를 하여야 하며http://theqoop.tistory.com/284 를 참조하시면 됩니다.
날짜 입력을 위해서는 먼저 2개의 js 파일을 불러와야 합니다. 하나는 jQuery를 사용하기 위한 jquery.js 와 날짜를 쉽게 입력하기 위한 jquery-ui.js 입니다. ( js 파일의 버전은 생략했습니다. )
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
위의 2종류의 js 파일만 불어오면, 간단한 코딩으로 날짜 입력이 가능합니다.
-- jquery.datepicker.html --
<!DOCTYPE html>
<html>
<head>
... 생략
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(function() {
$(".datepicker").datepicker();
});
</script>
</head>
<body>
<div>날짜입력 : <input type="text" class="datepicker" /></div>
</body>
</html>
위의 이미지 처럼 나타납니다. 원하는 날짜를 선택하면, input 박스에 선택한 날짜가 입력이 되어집니다. 그런데, 날짜를 입력해 보면, 2015/01/01 형식이 아닌, 01/01/2015 형식으로 나타나게 됩니다.
이것은 datepicker()을 사용할때 옵션을 지정하지 않아서, 외국에서 많이 사용하는 날짜 형식인 디폴트로 나타나기 때문입니다.
그럼 한국에서 사용하는 방식인 년/월/일 방식으로 설정을 위해 옵션을 추가 해야 합니다.
... 생략
<script>
$(function(){
$(".datepicker").datepicker({
dateFormat : "yy/mm/dd"
});
});
</script>
... 생략
( datepicker 디폴트 결과 값 )
( datepicker dateFormat 을 추가한 결과 값 )
jQuery 날짜 입력 파일 :
jQuery.datepicker.html'Web > jQuery' 카테고리의 다른 글
| [jQuery] 시작과 기본 문법 $(function(){ }); (0) | 2015.02.01 |
|---|---|
| [jQuery] 자바스크립트 라이브러리 jQuery 시작하기 (2) | 2015.01.23 |
| $.noConflict() or jQuery.noConflict() (0) | 2010.04.09 |
| jQuery 사용하기 (0) | 2010.04.08 |