본문 바로가기
프로그래밍/자바스크립트

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

by pentode 2018. 4. 20.

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


반응형