시작일과 종료일을 받는 달력.
(시작일보다 종료일이 과거일 경우 에러메세지 출력)
<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>
'JavaScript' 카테고리의 다른 글
| [jQuery] jQuery에서 outerHTML 가져오기 (0) | 2010.03.02 |
|---|---|
| [jQuery] 새 엘리먼트 추가시 이벤트 핸들러 깨지는 현상. (0) | 2010.03.02 |
| [JavaScript] 브라우저가 canvas를 지원하는지 체크 (0) | 2010.02.12 |
| [JavaScript] 10진수, 16진수 변환 (0) | 2010.01.11 |
| [JavaScript] 객체 상속 (0) | 2010.01.05 |
