jQuery UI datepicker - 자바스크립트 달력 사용하기

jQuery UI 의 datepicker 위젯은 웹 프로그램에서 날짜를 선택할 수 있는 자바스크립트 달력 입니다. 간단한 사용방법을 알아보겠습니다.

jQuery UI 는 jQuery 플러그인으로 만들어 졌으므로 jQuery가 있어야 합니다. 예제에서는 jQuery는 다운로드 받아서 쓰지 않고 CDN 을 사용해서 테스트 했습니다.

jQuery UI 는 http://jqueryui.com/download/ 에서 다운로드 받을 수 있습니다. 필요한 위젯만 선택하여 다운로드 받는것이 가능합니다. 모든 위젯이 포함되어 있는 배포판은 http://jqueryui.com/download/all/ 에서 다운 받을 수 있습니다.

달력의 한글화를 위한 파일은 https://github.com/jquery/jquery-ui/blob/master/ui/i18n/datepicker-ko.js 에서 다운 받을 수 있습니다.

1. CDN 을 사용한 jQuery UI의 사용

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="./jquery-ui-1.12.1/datepicker-ko.js"></script>

2. 다운로드 받은 파일을 사용한 jQuery UI의 사용

<link rel="stylesheet" href="./jquery-ui-1.12.1/jquery-ui.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="./jquery-ui-1.12.1/jquery-ui.min.js"></script>
<script src="./jquery-ui-1.12.1/datepicker-ko.js"></script>

3. 날짜 포맷을 2017-01-01 형식으로 바꾸기

- datepicker-ko.js 파일내의 dateFormat 을 dateFormat: "yy-mm-dd", 과 같이 수정합니다.

4. 기본 사용법

- 입력 필드를 클릭하면 달력이 팝업되고 날짜를 선택할 수 있습니다.

<script type="text/javascript">
$(function(){
    $("#date1").datepicker();
});
</script>

<input type="text" name="date" id="date1" size="12" />

5. 이미지 버튼 사용하기

- 입력 필드 옆에 지정된 이미지가 보여지고, 이미지를 클릭하면 달력이 팝업 됩니다.

<script type="text/javascript">
$(function(){
    $("#date2").datepicker({
        showOn: "both",
        buttonImage: "images/calendar.gif",
        buttonImageOnly: true,
        buttonText: "Select date"
    });
});
</script>

<input type="text" name="date" id="date2" size="12" />

- showOn : focus, button, both 중에 선택할 수 있습니다. focus 는 포커스가 오면 달력이 팝업 됩니다. button 은 버튼을 클릭하면 달력이 팝업 됩니다. both는 두 가지 경우 모두에서 팝업 됩니다.

- buttonImage : 입력 필드 옆에 표시될 버튼 이미지 입니다.

- buttonImageOnly : true이면 입력 필드 옆에 이미지만 표시됩니다. false이면 버튼 안에 이미지가 표시됩니다.

- buttonText : button 에 표시되는 글자입니다.

6. 팝업 버튼 직접 만들기 및 선택 이벤트 콜백

- 클릭하면 달력이 팝업 되는 버튼을 직접 만드는 방법과 날짜가 선택될때 실행되어지는 콜백함수를 지정하는 방법입니다.

<script type="text/javascript">
$(function(){
    $("#date3").datepicker({
        onSelect:function(dateText, inst) {
            console.log(dateText);
        }
    });
});
</script>
<input type="text" name="date" id="date3" size="12" />
<input type="button" value="달력" onclick="$('#date3').datepicker('show');" />

7. 년도와 월을 셀렉트 박스로 선택하게 하기

$("#date3").datepicker({
  changeYear:true,
  changeMonth:true
});

더 자세한 사항은 API 문서를 참조하세요. http://api.jqueryui.com/datepicker/

※ 예제소스

calendar.zip