Programming > jQuery/JavaScript

[jquery-ui] 캘린더 팝업 (Calendar-datepicker)

jQueryUI Calendar - datepicker 팝업 한글화

로딩해야할 리소스

※ 아래와 같이 기본 3가지 리소스를 import해야한다.

<link rel="stylesheet" href="/js/jqueryui/jquery-ui.min.css">
<script src="/js/jqueryui/jquery.min.js"></script>
<script src="/js/jqueryui/jquery-ui.min.js"></script>

View 설정

<script>
<!--
$(function(){    
    var mcdays = ['일', '월', '화', '수', '목', '금', '토'],
    mcmonths = ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
    opts = {
        dateFormat:           'yy-mm-dd',
        constrainInput:       true,
        dayNames:            mcdays,
        dayNamesShort:     mcdays,
        dayNamesMin:       mcdays,
        monthNames:        mcmonths,
        monthNamesShort: mcmonths,
        monthNamesMin:   mcmonths,
        constrainInput:       true,
        showMonthAfterYear: true,
        yearSuffix:             "",
        changeYear:          true,
        changeMonth:       true
    };
    $( "#stAccDt" ).datepicker(opts);
    $( "#edAccDt" ).datepicker(opts); 
       
});    
-->    
</script>    

날짜입력
<input type="text" id="stAccDt" value="<c:out value='${param.stAccDt}'/>" readonly>    
    ~     
<input type="text" id="edAccDt" value="<c:out value='${param.edAccDt}'/>" readonly>    

 

공통화 - 옵션 dynamic추가 - callback

공통.js 파일

$(document).ready(function(){
 
    $.makeDate = function(id,callback){
       $("#"+id).datepicker({
             showOn:'button',
             buttonImage: '/resources/images/sub/icon-calendar.png',
            dateFormat:'yy-mm-dd',
            monthNamesShort:['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
            dayNamesMin:['일','월','화','수','목','금','토'],
            changeMonth:true,
            changeYear:true,
            showMonthAfterYear:true,
            onSelect: function(date){
            if(callback) callback(date);
            }
       });
    }
});

JSP 내에서 사용

<script type="text/javascript">

$(function(){
      
       $.callbackSt = function(date) {
             alert(date);
       }
      
       // 검색버튼을 클릭한다.
       $.makeDate("id-date-start", $.callbackSt);
       $.makeDate("id-date-end");
      
       $( "#id-date-start" ).datepicker('option','minDate',-10);
       $( "#id-date-start" ).datepicker('option','minDate',-3);
       $( "#id-date-start" ).datepicker('option','maxDate',10);

});

</script>