※ 아래와 같이 기본 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>
<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>
$(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);
}
});
}
});
<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>