[jQuery] datepicker
시작일과 종료일을 받는 달력.
(시작일보다 종료일이 과거일 경우 에러메세지 출력)
<html>
<head>
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.4.2.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.8rc1/jquery-1.4.1.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.8rc1/ui/jquery-ui.js"></script>
<script>
$(document).ready(function() {
// 달력 - 시작일
$('#date_start').datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function (dateText, inst) {
var sEndDate = jQuery.trim($('#date_end').val());
if (sEndDate.length>0) {
var iEndDate = parseInt(sEndDate.replace(/-/g, ''));
var iStartDate = parseInt(jQuery.trim(dateText).replace(/-/g, ''));
if (iStartDate>iEndDate) {
alert('시작일보다 종료일이 과거일 수 없습니다.');
$('#date_start').val('');
}
}
}
});
$('#img_date_start').click(function() {$('#date_start').focus();});
// 달력 - 종료일
$('#date_end').datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function (dateText, inst) {
var sStartDate = jQuery.trim($('#date_start').val());
if (sStartDate.length>0) {
var iStartDate = parseInt(sStartDate.replace(/-/g, ''));
var iEndDate = parseInt(jQuery.trim(dateText).replace(/-/g, ''));
if (iStartDate>iEndDate) {
alert('시작일보다 종료일이 과거일 수 없습니다.');
$('#date_end').val('');
}
}
}
});
$('#img_date_end').click(function() {$('#date_end').focus();});
});
</script>
</head>
<body>
<input type="text" name="date_start" id="date_start" size="10" readonly />
<img src="달력이미지" id="img_date_start" />
<input type="text" name="date_end" id="date_end" size="10" readonly />
<img src="달력이미지" id="img_date_end" />
</body>
</html>