1.라이브러리

<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>

 

2.주말 색상 변경 및  연도 글자크기 작게

<style>
.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option {
    font-size: 13px;
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_weekend:first-child {
    color: #f4361e;    
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_weekend:last-child {
    color: #3a67ea;    
}
</style>

 

3.js

<script type="text/javascript">
$(function() {
	$(".datetimepicker").datetimepicker({ 
		/* format: "Y-m-d H:i", */
		lang : 'ko',
		format: "Y-m-d",
		timepicker:false
	});
	jQuery.datetimepicker.setLocale('kr'); 
});

function focusStartDatePicker(){
	$("#start_dt").focus();
}
function focusEndDatePicker(){
	$("#end_dt").focus();
}
</script>

 

 

 

4.html

				<div class="date_box">
					
				
				
					<a href="#"  onclick="focusStartDatePicker(); return false;">
						<img src="/images/common/btn_calendar.png" alt="검색 시작일 선택">
					</a>
					
					<input class='datetimepicker'  type="text" name="start_dt" id="start_dt" value="${param.start_dt}" size="15" 					
					title="검색 시작일 형식: YYYY-MM-DD" placeholder="YYYY-MM-DD" maxlength="10" style="text-align:center"> ~ 
					
					<a href="#" onclick="focusEndDatePicker(); return false;">					
						<img src="/images/common/btn_calendar.png" alt="검색 종료일 선택">
					</a>
					<input class='datetimepicker' type="text"  name="end_dt" id="end_dt"   value="${param.end_dt}" size="15" 
					title="검색 종료일 형식: YYYY-MM-DD" placeholder="YYYY-MM-DD" maxlength="10" style="text-align:center">
				</div>