티스토리 뷰

WEB 전체/JS

JQuery 달력 (datepicker 이용)

minov 2011. 11. 2. 12:44 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		
			
			
			
			

			<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.8.16/jquery-1.6.2.js"></script>
			<link rel="stylesheet" href="http://jquery-ui.googlecode.com/svn/tags/latest/themes/base/jquery.ui.all.css" type="text/css" />
			<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.ui.core.js"></script>
			<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.ui.widget.js"></script>
			<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.ui.datepicker.js"></script>
			<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/i18n/jquery.ui.datepicker-ko.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>
		start
		 
		end
	</body>
</html>

참조 : http://bloodguy.tistory.com/entry/jQuery-datepicker (bloodguy 님 블로그)

'WEB 전체 > JS' 카테고리의 다른 글

간단한 SNS 공유하기 스크립트  (0) 2012.02.07
JQuery 활용 - JQuery & Javascript HTML Form validation  (0) 2011.12.07
JQuery - ajax 한글파라미터 전송 해결법  (0) 2011.10.28
Javascript trim function  (0) 2011.10.11
AJAX 를 이용한 파일 업로드 (iframe method)  (0) 2011.10.11
공유하기 링크
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
글 보관함