[jquery] datepicker

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.js"></script>

<script>
$(document).ready(function(){
	$("#startDate").datepicker({
		onClose: function(){
			var startDate = $("#startDate").datepicker('getDate');
			var endDate = $("#endDate").datepicker('getDate');
				if (endDate != null) {
					if (startDate > endDate) {
						alert("시작일이 종료일보다 후 일수 없습니다. \n종료일로 설정합니다.");
						$("#startDate").val($("#endDate").val());
					}  
				}
			}
	});
	$("#endDate").datepicker({
		beforeShow: function() {
			//get date startDate is set to
			var startDate = $("#startDate").datepicker('getDate');
			//if a date was selected else do nothing 
			if (startDate != null) {
				$(this).datepicker('option', 'minDate', startDate);
			}
		}
	});
});
</script>

▷datepicker 사용 위해 import 해야 하는 부분

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.js"></script>

css는 쓰고싶은 테마에 따라 바꾸면 된다
프로젝트에 파일 넣지 않고 구글에서 가져오게 했다

▷datepicker setting

기본적으로 사용하려면

function() {

$("#id").datepicker();

}

만 써도 된다. 

여기서는 시작일이 종료일보다 이후의 날짜가 선택되지 않도록 했다.

▷datepicker 영역

<input type="text" id="startDate" name="startDate">~<input type="text" id="endDate" name="endDate">

스크립트 영역과 id값을 맞춰주면 된다.