sp1000je
68 lines
3.5 KiB
HTML
68 lines
3.5 KiB
HTML
<!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>
|
|
<title> helloCalendar </title>
|
|
<meta name="author" content="" />
|
|
<meta name="generator" content="editplus" />
|
|
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
|
|
<link rel="stylesheet" type="text/css" href="helloCalendar.css" />
|
|
<style type="text/css">
|
|
* { font-size:13px; font-family:돋움; }
|
|
input { text-align:center; }
|
|
span { color:#FF0080; }
|
|
</style>
|
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
|
|
<script type="text/javascript" src="helloCalendar.js"></script>
|
|
<script type="text/javascript">
|
|
$(function(){
|
|
$('#sDate1').helloCalendar();
|
|
$('#sDate2').helloCalendar({'selectBox':true});
|
|
$('#sDate3').helloCalendar({'sign':'.'});
|
|
$('#sDate4').helloCalendar({'startLinkDate':'2011-05-09','endLinkDate':'2011-05-13'});
|
|
$('#sDate5').helloCalendar({'endLink':'eDate5'});
|
|
$('#eDate5').helloCalendar({'startLink':'sDate5'});
|
|
$('#sDate6').helloCalendar({'clickID':'sDate6Img'});
|
|
$('#sDate7').helloCalendar({'sTitle':true});
|
|
$('#eDate7').helloCalendar({'eTitle':true});
|
|
$('#calrendarDiv').helloCalendar({'inputID':'sDate8'});
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
1. 기본형<br />
|
|
<span>Code : $('#sDate1').helloCalendar();</span> <br />
|
|
<input type="text" size="10" id="sDate1" name="sDate1" value="2011-05-30"> <br /><br />
|
|
|
|
2. 년도와 월을 선택할수 있음<br />
|
|
<span>Code : $('#sDate2').helloCalendar({'selectBox':true});</span> <br />
|
|
<input type="text" size="10" id="sDate2" name="sDate2" value="2011-05-30"> <br /><br />
|
|
|
|
3. 년월일 중간에 들어가는 문자열을 정의 할수 있습니다. ( 기본은 "-" 입니다 )<br />
|
|
<span>Code : $('#sDate3').helloCalendar({'sign':'.'});</span> <br />
|
|
<input type="text" size="10" id="sDate3" name="sDate3" value="2011-05-30"> <br /><br />
|
|
|
|
4. 선택할수 있는 구간을 임의로 정할수 있습니다.<br />
|
|
<span>Code : $('#sDate4').helloCalendar({'startLinkDate':'2011-05-09','endLinkDate':'2011-05-13'});</span> <br />
|
|
<input type="text" size="10" id="sDate4" name="sDate4" value="2011-05-11"> <br /><br />
|
|
|
|
5. 시작일과 종료일을 연결하여 종료일보다 큰 날짜를 시작일쪽에서 선택이 되지 않도록 합니다.<br />
|
|
<span>Code : $('#sDate5').helloCalendar({'endLink':'eDate5'}); $('#eDate5').helloCalendar({'startLink':'sDate5'});</span> <br />
|
|
<input type="text" size="10" id="sDate5" name="sDate5" value="2011-05-23"> ~
|
|
<input type="text" size="10" id="eDate5" name="eDate5" value="2011-05-27"><br /><br />
|
|
|
|
6. 이미지를 클릭했을때 달력이 나오도록 설정<br />
|
|
<span>Code : $('#sDate6').helloCalendar({'clickID':'sDate6Img'});</span> <br />
|
|
<input type="text" size="10" id="sDate6" name="sDate6" value="2011-05-11"> <img src="ecal2.gif" id="sDate6Img"><br /><br />
|
|
|
|
7. 달력이 나오면 달력에 이전달과 다음달 사이에 타이틀을 누르시면 각월에 1일과 각월에 마지막일이 선택되어 집니다.<br />
|
|
<span>Code : $('#sDate7').helloCalendar({'sTitle':true}); $('#eDate7').helloCalendar({'eTitle':true});</span> <br />
|
|
<input type="text" size="10" id="sDate7" name="sDate7" value="2011-05-23"> ~
|
|
<input type="text" size="10" id="eDate7" name="eDate7" value="2011-05-27"><br /><br /><br /><br /><br /><br />
|
|
|
|
8. 달력이 펼쳐져 있는 형태<br />
|
|
<span>Code : $('#calrendarDiv').helloCalendar({'inputID':'sDate8'});</span> <br />
|
|
<input type="text" size="10" id="sDate8" name="sDate8" value="2011-05-11"><br /><br />
|
|
<div id="calrendarDiv"></div>
|
|
|
|
</body>
|
|
</html> |